1. create a project using city bars template in sencha architect

2. save your project name as CityBars

3. modify your controll code to:

Ext.define('CityBars.controller.Business', {
extend: 'Ext.app.Controller', config: {
refs: {
dataList: '#dataList',
listCard: '#listCard',
mainNav: 'mainnav',
detailCard: 'detailpanel'
}, control: {
"#dataList": {
itemtap: 'onListItemTap'
},
"detailpanel #callButton": {
tap: 'onCallButtonTap'
},
"detailpanel > map": {
activate: 'onMapActivate'
}
}
}, onListItemTap: function(dataview, index, target, record, e, eOpts) {
var map,
info,
details; if (record) {
details = Ext.create('CityBars.view.DetailPanel', {
title: 'Details'
}); // set the map
map = details.child('#detailMap');
map._record = record; // set the info
info = details.child('#contact').child('#info');
info.child('#photo').setData(record.data);
info.child('#data').setData(record.data); this.getMainNav().push(details);
}
}, onCallButtonTap: function(button, e, eOpts) { // TODO: Add custom phone call code here
window.location = 'tel:555-555-5555'; }, onMapActivate: function(newActiveItem, container, oldActiveItem, eOpts) {
var map = newActiveItem,
record = map._record,
lat = record.get('latitude'),
lng = record.get('longitude'),
centerMap = Ext.Function.createDelayed(function() {
map.setMapOptions({
zoom: 18
});
map.setMapCenter({
latitude: lat,
longitude: lng
});
}, 250),
geocoder, loc; if (lat && lng) {
centerMap();
} else {
geocoder = this._geocoder || (this._geocoder = new google.maps.Geocoder());
geocoder.geocode(
{address: [
record.get('address1'),
record.get('address2'),
record.get('address3'),
record.get('city'),
record.get('state_code'),
record.get('zip')
].join(', ')},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
loc = results[0].geometry.location;
lat = loc.lat();
lng = loc.lng();
record.set('latitude', lat);
record.set('longitude', lng);
centerMap();
} else {
Ext.Msg.alert("Could not find location: " + status);
}
}
);
} }, launch: function() { var me = this; // NOTE ABOUT YELP KEY
// You must use your own yelp key, available by registering (for free) with Yelp:
// http://www.yelp.com/developers/getting_started/api_overview
// (in this app, we use the Review Search API v1.0)
me.apiKey = '8UUJ-jfiOwttLyzTC56F6A'; // enter your own yelp key here // Get the location, then find businesses
Ext.Viewport.setMasked({ xtype: 'loadmask', message: 'Loading...' });
me.getLocation(function (location) { // then use Yelp to get the businesses
me.getBusinesses(location, function (store) { // then bind data to list and show it
me.getDataList().setStore(store); Ext.Viewport.setMasked(false); }); }); }, getLocation: function(callback) {
if (navigator && navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
callback(position);
}, function(error) {
// give a warning for error
});
}
}, getBusinesses: function(location, callback) { var store = Ext.data.StoreManager.lookup('BusinessStore'),
url = 'http://api.yelp.com/business_review_search' +
'?ywsid=' + this.apiKey +
'&term=Bars' +
'&lat=37.785834' + //location.coords.latitude +
'&long=-122.406417';// + location.coords.longitude;
store.getProxy().setUrl(url);
store.load(function() {
callback(store);
}); } });

4. run sencha cmd to launch your application on your web server

sencha fs web start -map /Users/user1/Documents/CityBars

5. visit your web using the url , which likes the following format:http://localhost:1841

how to run demo city bars using sencha architect的更多相关文章

  1. BZOJ1628: [Usaco2007 Demo]City skyline

    1628: [Usaco2007 Demo]City skyline Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 256  Solved: 210[Su ...

  2. Sencha Architect 安装与使用

    http://www.sencha.com/products/touch/ Sencha SDK Tools Advanced JavaScript and CSS Project Build Too ...

  3. SenchaTouch介绍和Sencha Architect介绍以及安装

    一.SenchaTouch介绍 Sencha Touch框架是世界上第一个基于HTML 5的Mobile App框架. 在Sencha Touch这个名词中,包括了两个组成部分,其中Sencha的前身 ...

  4. sencha architect/sencha touch , to prevent breakpoint lost when you debug

    add this to your loader config: Ext.Loader.setConfig({ disableCaching: false }); or : click 'applica ...

  5. 如何在版本控制工具中管理Sencha Architect的項目

    根據數次痛苦的經歷結合stack overflow上的解答,發現原來還是可以使用svn.git之類的版本控制工具管理Sencha Architect生成的項目的. 具體的要點如下,假定項目記作{PRO ...

  6. Sencha Architect 激活方法

     Sencha Architect 2是ExtJS和Sencha Touch的官方可视化IDE工具.最新版本是2.2,说是破解,其实是修改License来实现无限试用而已. 1.先下载安装官方软件,大 ...

  7. 简单破解 Sencha Architect 2.2 (ExtJs Designer)

    Sencha Architect 2是ExtJS和Sencha Touch的官方可视化IDE工具.最新版本是2.2,说是破解,其实是修改License来实现无限试用而已. 1.先下载安装官方软件,大约 ...

  8. Sencha Architect打开闪退问题修复

    删除以下位置的cache文件夹 C:\Users\Administrator\AppData\Local\Sencha\Sencha Architect 3.2\Cache bug解决参考 https ...

  9. 使用Sencha Architect开发Sencha Touch应用的整理

    官网:http://www.sencha.com/ 其实官网上的文档都很清楚了,不过整理一下总比较好 第一步,软件准备 注: 以下软件的安装本着这样两条原则 一是不要安装在中文目录下 二是不要安装在带 ...

随机推荐

  1. Sqlserver的触发器的简单使用

    1,触发器有两种 (1)After触发器(之后触发) 触发器有个好处:就是你之前有过什么操作他会将你的操作的数据信息完整的保存下来,比如你删过什么信息,如果用触发器,那么删除后就会显示两行受影响,那么 ...

  2. LogstashL reference 重要章节

    配置文件结构说明 https://www.elastic.co/guide/en/logstash/current/configuration-file-structure.html Event相关配 ...

  3. PV信号量的一些理解

    进程通常分为就绪.运行和阻塞三个工作状态.三种状态在某些条件下可以转换,三者之间的转换关系如下:   进程三个状态之间的转换就是靠PV操作来控制的.PV操作主要就是P操作.V操作和信号量.其中信号量起 ...

  4. 关于RSS

    RSS(简易信息聚合)是一种消息来源格式规范,用以聚合经常发布更新数据的网站,例如博客文章.新闻.音频或视频的网摘.RSS文件(或称做摘要.网络摘要.或频更新,提供到频道)包含了全文或是节录的文字,再 ...

  5. adb uninstall卸载apk 命令后跟的是包的名称

    昨天在使用adb卸载程序,结果死活卸载不了.我输入的命令和系统提示如下: arthur@arthur-laptop:~$ adb uninstall com.hase.bclm.client-2.ap ...

  6. 聊一聊 AngularJS 服务

    什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. AngularJS 内建了30 多个服务. 为什么使用服务? 在很多服务中,比如 $loca ...

  7. ViewState原理

    1.IsPostBack原理 1.1 所有的服务端控件,都必须放在runat="server"的表单里面,runat="server"的表单会生成__VIEWS ...

  8. ASP.NET会员注册登录模块(MD5加密,Parameters防止SQL注入,判断是否注册)

    MD5加密,Parameters防止SQL注入: protected void btnLog_Click(object sender, EventArgs e)     {         //获取验 ...

  9. JD(转载)

    时间:2012-9-11 地点:川大 我只能说第一家公司,不是一般的火爆.不得不吐槽一下: 京东宣讲完全没有计划,只看到个下午两点半宣讲,结果跑过去,下午两点是宣讲管培的.在川大外的德克士呆了一下午. ...

  10. zxing.dll生成条码

    引入zxing.dll using System; using System.Drawing; using ZXing.QrCode; using ZXing; using ZXing.Common; ...