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应用看起来像网络应用.美丽的用户 ...
随机推荐
- 让boostrap的图片轮播支持滑动效果
因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果. 然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 carousel.js 插件并没有 ...
- 【java基础 16】抽象类和接口的区别
导读:前两天闲着没事儿,看了本书,然后写了点代码,在接口里面写了默认方法实现,因为书上说这个特性是从java8开始的,我还特地给测了一下java7. 没过几天,就有一个技术分享会,刚好也是讲java8 ...
- Hibernate的简单封装Session(方便调用)
因为每次用增删改查时都需要用到hibernate的配置来生成session工厂进而生成session,比较麻烦,所以我们直接封装一个可以调用的类,需要的时候只需要调用即可. 新建一个Hibernate ...
- HDU-1528/1962 Card Game Cheater
两组牌中两张牌相比能赢的就连,后求最大匹配. #include <cmath> #include <cstdlib> #include <cstdio> #incl ...
- 常用快捷键以及linux命令整理
关于快捷键的使用,网上有很多.自己在使用过程中不断整理用到的知识点.一个项目完成了就把涉及用到的快捷键和命令介绍给大家,都是一些比较基础的,常用的命令.希望大家有好的知识点,命令可以及时交流整理. 一 ...
- 使用UltraEdit 替换解决---文字中含有逗号的文件，如何把逗号自动转换成为：回车换行呢？
实际工作中有时经常遇到一个问题: 一行文字中含有逗号,如何把逗号自动转换成为:回车换行呢? 普遍存在的问题,用Ultredit中^r^n(回车换行)也可以完成.提供大家参考. 王乐,李宏宇,张志鹏,刘 ...
- 应用css3制作loading效果
参考秒味课堂 代码发出来备忘 html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- 以iphone6plus 为标准单位是px的页面 在运行时转换为rem
在页面中引入以下代码,把样式中带px单位的样式放到本页面中的<style>标签中 /** * Created by Administrator on 2017-03-14. */ /*** ...
- 25深入理解C指针之---传递数组
一.传递数组:将数组作为参数传入函数,或将数组作为数据当成是函数的返回值 1.定义:可以传入和传出数组 2.特征: 1).将数组作为参数传递给函数的本质是传递数组的地址,这种传递无需复制数组元素,所以 ...
- 手機 停充的種類 與 量測 power consumption 功率 使用 bq25896 bq25890
Precondition : 配有 power path 功能的 BQ2589 手機. 接上 pc usb port. Origin : 今天有同事問我, 手機是否可以在接上 pc usb port ...