Sencha touch 初体验
一、什么是Sencha Touch？
Sencha Touch是一个应用手持移动设备的前端js框架，与extjs是同一个门派的，它继承了extjs的优点和缺点。功能很强大，效果很炫丽，效率不高。
二、例子来了
效果图：Sencha touch官方一个list的example
PS：模拟器访问本地server的地址是10.0.2.2:8080，而不是127.0.0.1:8080
1、导入touch的相关js，css以及资源文件
2、index.html
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5: <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
6: <title>Sencha Touch List Example</title>
7: <!-- import touch css and js -->
8: <link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css">
9: <script type="text/javascript" src="touch/sencha-touch-debug.js"></script><script type="text/javascript" src="src/index.js"></script>
10: </head>
11: <body></body>
12: </html>
3、index.js
1: /**
2: * 前言：
3: * 此例子来自sencha touch的官方example
4: * 注释用语如有不当请见谅。
5: */
6: //相信这是每个页面都是一样的
7: Ext.setup({
8: tabletStartupScreen: 'tablet_startup.png',
9: phoneStartupScreen: 'phone_startup.png',
10: icon: 'icon.png',
11: glossOnIcon: false,
12: onReady : function() {
13: //注册一个名为“Contact”的模型，显示的字段为firstName和lastName
14: Ext.regModel('Contact', {
15: fields: ['firstName', 'lastName']
16: });
17:
18: //定义一个对象，有点类似Android里面的BaseAdapter
19: var groupingBase = {
20: itemTpl: '<div class="contact2"><strong>{firstName}</strong> {lastName}</div>',
21: selModel: {//选择模型，单选；应该还有多选
22: mode: 'SINGLE',
23: allowDeselect: true
24: },
25: grouped: true,//分组
26: indexBar: true, //索引栏
27:
28: //定义点击事件
29: onItemDisclosure: {
30: scope: 'test',
31: //事件处理
32: handler: function(record, btn, index) {
33: alert('Disclose more info for ' + record.get('firstName'));
34: }
35: },
36: //数据仓库
37: store: new Ext.data.Store({
38: model: 'Contact',//与上面注册的模型对应
39: sorters: 'firstName',//排序字段
40:
41: //分组title显示的数据源，为firstName的首字母
42: getGroupString : function(record) {
43: return record.get('firstName')[0];
44: },
45: //就是数据了
46: data: [
47: {firstName: 'Aaron', lastName: 'Conran'},
48: {firstName: 'Ape', lastName: 'Evilias'},
49: {firstName: 'Dave', lastName: 'Kaneda'},
50: {firstName: 'Michael', lastName: 'Mullany'},
51: {firstName: 'Abraham', lastName: 'Elias'},
52: {firstName: 'Jay', lastName: 'Robinson'},
53: {firstName: 'Tommy', lastName: 'Maintz'},
54: {firstName: 'Ed', lastName: 'Spencer'},
55: {firstName: 'Jamie', lastName: 'Avins'},
56: {firstName: 'Ed', lastName: 'Spencer'},
57: {firstName: 'Jamie', lastName: 'Avins'},
58: {firstName: 'Aaron', lastName: 'Conran'},
59: {firstName: 'Dave', lastName: 'Kaneda'},
60: {firstName: 'Ape', lastName: 'Evilias'},
61: {firstName: 'Dave', lastName: 'Kaneda'},
62: {firstName: 'Michael', lastName: 'Mullany'},
63: {firstName: 'Abraham', lastName: 'Elias'},
64: {firstName: 'Jay', lastName: 'Robinson'},
65: {firstName: 'Tommy', lastName: 'Maintz'},
66: {firstName: 'Ed', lastName: 'Spencer'},
67: {firstName: 'Jamie', lastName: 'Avins'},
68: {firstName: 'Aaron', lastName: 'Conran'},
69: {firstName: 'Dave', lastName: 'Kaneda'},
70: {firstName: 'Michael', lastName: 'Mullany'},
71: {firstName: 'Abraham', lastName: 'Elias'},
72: {firstName: 'Jay', lastName: 'Robinson'},
73: {firstName: 'Tommy', lastName: 'Maintz'},
74: {firstName: 'Ed', lastName: 'Spencer'},
75: {firstName: 'Jamie', lastName: 'Avins'},
76: {firstName: 'Aaron', lastName: 'Conran'},
77: {firstName: 'Dave', lastName: 'Kaneda'},
78: {firstName: 'Michael', lastName: 'Mullany'},
79: {firstName: 'Abraham', lastName: 'Elias'},
80: {firstName: 'Jay', lastName: 'Robinson'},
81: {firstName: 'Michael', lastName: 'Mullany'},
82: {firstName: 'Abraham', lastName: 'Elias'},
83: {firstName: 'Jay', lastName: 'Robinson'},
84: {firstName: 'Zed', lastName: 'Zacharias'}
85: ]
86: })
87: };
88:
89: /**
90: * 应该是判断设备类型把
91: * Phone和其他类型有所不同，主要就是屏幕大小了
92: */
93: if (!Ext.is.Phone) {
94: new Ext.List(Ext.apply(groupingBase, {
95: floating: true,
96: width: 350,
97: height: 370,
98: centered: true,
99: modal: true,
100: hideOnMaskTap: false
101: })).show();
102: }
103: else {
104: new Ext.List(Ext.apply(groupingBase, {
105: fullscreen: true //全屏
106: }));
107: }
108: }
109: });
Sencha touch 初体验的更多相关文章
- Sencha Touch 之初接触
1.Sencha Touch开发与普通web开发有什么区别? Sencha Touch(为方便起见,本文后面一律简写为ST)页面的开发跟普通html页面相比,总体来说没有本质上的区别,只是引入了对ht ...
- Sencha Touch 2.2 Store Proxy 异常监控
移动端到服务端通信往往会发生很多莫名的异常情况,如何有效的监控proxy异常,给用户友好的用户体验呢? Proxy给我提供了异常exception的监听事件,只需要监控该项目即可. Sencha To ...
- Flume 实战(1) -- 初体验
前言: Flume-ng是数据收集/聚合/传输的组件, Flume-ng抛弃了Flume OG原本繁重的zookeeper和Master, Collector, 其整体的架构更加的简洁和明了. 其基础 ...
- 动端逐渐出了许多的移动端的框架，比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点，不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点：
移动前端工作的那些事---前端制作之微信小技巧篇 (2013-11-15 15:20) 转载▼ 标签: it css3/javascript html5 webapp 手机网站搭建 分类: 前端制 ...
- 【翻译】探究Ext JS 5和Sencha Touch的布局系统
原文:Exploring the Layout System in Ext JS 5 and Sencha Touch 布局系统是Sencha框架中最强大和最有特色的一个部分. 布局要处理应用程序中每 ...
- 选择移动web开发框架研究——有mui、frozenui以及Sencha Touch等
纯粹的总结一下移动web开发框架,移动 web开发框架有jQuery Mobile .Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家 ...
- cucumber java从入门到精通（1）初体验
cucumber java从入门到精通(1)初体验 cucumber在ruby环境下表现让人惊叹,作为BDD框架的先驱,cucumber后来被移植到了多平台,有cucumber-js以及我们今天要介绍 ...
- ARKit从入门到精通（1）-ARKit初体验
ARKit从入门到精通(1)-ARKit初体验 转载自:http://blog.csdn.net/u013263917/article/details/72903174 该系列文章共十篇,笔者将由易到 ...
- sencha touch 常见问题解答(1-25)
欢迎留言补充,持续更新中... 1.sencha touch 是什么? 答:Sencha touch框架是世界上第一个基于HTML 5的移动应用框架.它可以让你的Web应用看起来像网络应用.美丽的用户 ...
随机推荐
- 【USACO09FEB】 庙会班车 Fair Shuttle 贪心+线段树
Although Farmer John has no problems walking around the fair to collect prizes or see the shows, his ...
- [PDOException] SQLSTATE[HY000] [2002] No such file or directory
编译安装PHP7之后,在安装mysql之后,用pdo操作数据库的时候,出现了此错误[PDOException] SQLSTATE[HY000] [2002] No such file or direc ...
- 九度oj 题目1363：欢乐斗地主
题目描述: 如果大家玩过欢乐斗地主这个游戏,就一定知道有一个具有“提示”功能的按钮.如果你不知道你现在手里的牌有没有比上家大的牌,并且你也懒得去一张一张地看你手中的牌.这时候你就可以点“提示”按钮,系 ...
- poj 3532 Resistance
---恢复内容开始--- Resistance Time Limit: 1000MS Memory Limit: 131072K Total Submissions: 1289 Accepte ...
- 【NOIP2016练习】T3 质数 （分块）
题意:共有N盏灯,标号为1到N,有M个标有不同质数的开关,开关可以控制所有标号为其标号倍数的灯,按一次开关,所有其控制的灭着的灯都点亮,所有其控制的亮着的灯将熄灭.现在,宿管可以无限的按所有开关,所有 ...
- javascript 函数重载另一种实现办法
最近在读javascript忍者 感受下jquery作者 john Resig对于js的独到见解. 先上代码: function addMethod(object,name,fn){ var old ...
- 42深入理解C指针之---指针与队列
一.借助第40指针与链表的相关内容,稍微修改即可: 1.定义头文件queue.h代码如下: #include <stdlib.h> #include <stdio.h> #if ...
- Lua中闭包详解 来自RingOfTheC[ring.of.the.c@gmail.com]
这些东西是平时遇到的, 觉得有一定的价值, 所以记录下来, 以后遇到类似的问题可以查阅, 同时分享出来也能方便需要的人, 转载请注明来自RingOfTheC[ring.of.the.c@gmail.c ...
- build android on macOS
http://blog.csdn.net/loften_93663469/article/details/51503293 @import url(http://i.cnblogs.com/Load. ...
- hdu 4514(树的直径+并查集)
湫湫系列故事——设计风景线 Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others)Tot ...