how to run demo city bars using sencha architect
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的更多相关文章
- BZOJ1628: [Usaco2007 Demo]City skyline
1628: [Usaco2007 Demo]City skyline Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 256 Solved: 210[Su ...
- Sencha Architect 安装与使用
http://www.sencha.com/products/touch/ Sencha SDK Tools Advanced JavaScript and CSS Project Build Too ...
- SenchaTouch介绍和Sencha Architect介绍以及安装
一.SenchaTouch介绍 Sencha Touch框架是世界上第一个基于HTML 5的Mobile App框架. 在Sencha Touch这个名词中,包括了两个组成部分,其中Sencha的前身 ...
- 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 ...
- 如何在版本控制工具中管理Sencha Architect的項目
根據數次痛苦的經歷結合stack overflow上的解答,發現原來還是可以使用svn.git之類的版本控制工具管理Sencha Architect生成的項目的. 具體的要點如下,假定項目記作{PRO ...
- Sencha Architect 激活方法
Sencha Architect 2是ExtJS和Sencha Touch的官方可视化IDE工具.最新版本是2.2,说是破解,其实是修改License来实现无限试用而已. 1.先下载安装官方软件,大 ...
- 简单破解 Sencha Architect 2.2 (ExtJs Designer)
Sencha Architect 2是ExtJS和Sencha Touch的官方可视化IDE工具.最新版本是2.2,说是破解,其实是修改License来实现无限试用而已. 1.先下载安装官方软件,大约 ...
- Sencha Architect打开闪退问题修复
删除以下位置的cache文件夹 C:\Users\Administrator\AppData\Local\Sencha\Sencha Architect 3.2\Cache bug解决参考 https ...
- 使用Sencha Architect开发Sencha Touch应用的整理
官网:http://www.sencha.com/ 其实官网上的文档都很清楚了,不过整理一下总比较好 第一步,软件准备 注: 以下软件的安装本着这样两条原则 一是不要安装在中文目录下 二是不要安装在带 ...
随机推荐
- Debug 之 The state information is invalid for this page and might be corrupted
1.问题描述: 网站部署之后,排序或者搜索之后报错:The state information is invalid for this page and might be corrupted 2.问题 ...
- 将字符串写进txt中方式
try { File file = new File(filePath); PrintStream ps = new PrintStream(new FileOutputStream(file)); ...
- ios webview 图片自适应屏幕宽度
//这个知识点主要是自己最近在尝试写后台接口 在移动端展示的时候需要用到这个知识点,在webViewDidFinishLoad方法里面执行一段js代码 拿到各个图片 判断其宽度是否大于当前手机屏幕尺寸 ...
- javah 生成header file 报错 问题解决
环境:Android Studio, Mac OS 目标: 用javah 为MainActivity.class 生成 jni header 文件 正确的命令是 cd <class文件的路径&g ...
- 禁用 Browser Link,在浏览器调试的时候回出现大量的get,post数据。
VS2013新增的Browser Link功能虽然“强大”,但默认是开启的,很烦人!
- 关于git fetch 和git pull 的区别
1.fetch 相当于是从远程获取最新版本呢到本地,不会自动merge. git fetch origin master:tmpgit diff tmp git merge tmp 2. git pu ...
- BigInteger
首先上模板(不断更新中...)(根据刘汝佳AOAPCII修改) #include <iostream> #include <sstream> #include <cstd ...
- 针对SharePointFarm场时安装部署OWA的步骤
下面文章列出针对SharePointFarm场时安装部署OWA的步骤: http://blogs.technet.com/b/meamcs/archive/2013/03/27/office-web- ...
- Android logcat使用
Android logcat使用 1. Android日志说明 当Android系统运行的时候,会搜集所有的系统信息. logcat是Android系统的一个命令行工具,主要用来查看和过滤日志信息. ...
- 使用CHttpFile从服务器端正确的读取数据
前段时间在给软件做升级提示模块的时候发现一个问题,就是使用CHttpFile对象无法从服务器端获取到正确的响应数据长度,无论是使用CHttpFile:: QueryInfo方法,还是使用CHttpFi ...