一、什么是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: });
 
4、部署到服务器访问就行了

Sencha touch 初体验的更多相关文章

  1. Sencha Touch 之初接触

    1.Sencha Touch开发与普通web开发有什么区别? Sencha Touch(为方便起见,本文后面一律简写为ST)页面的开发跟普通html页面相比,总体来说没有本质上的区别,只是引入了对ht ...

  2. Sencha Touch 2.2 Store Proxy 异常监控

    移动端到服务端通信往往会发生很多莫名的异常情况,如何有效的监控proxy异常,给用户友好的用户体验呢? Proxy给我提供了异常exception的监听事件,只需要监控该项目即可. Sencha To ...

  3. Flume 实战(1) -- 初体验

    前言: Flume-ng是数据收集/聚合/传输的组件, Flume-ng抛弃了Flume OG原本繁重的zookeeper和Master, Collector, 其整体的架构更加的简洁和明了. 其基础 ...

  4. 动端逐渐出了许多的移动端的框架，比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点，不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点：

    移动前端工作的那些事---前端制作之微信小技巧篇   (2013-11-15 15:20) 转载▼ 标签: it css3/javascript html5 webapp 手机网站搭建 分类: 前端制 ...

  5. 【翻译】探究Ext JS 5和Sencha Touch的布局系统

    原文:Exploring the Layout System in Ext JS 5 and Sencha Touch 布局系统是Sencha框架中最强大和最有特色的一个部分. 布局要处理应用程序中每 ...

  6. 选择移动web开发框架研究——有mui、frozenui以及Sencha Touch等

    纯粹的总结一下移动web开发框架,移动 web开发框架有jQuery Mobile .Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家 ...

  7. cucumber java从入门到精通（1）初体验

    cucumber java从入门到精通(1)初体验 cucumber在ruby环境下表现让人惊叹,作为BDD框架的先驱,cucumber后来被移植到了多平台,有cucumber-js以及我们今天要介绍 ...

  8. ARKit从入门到精通（1）-ARKit初体验

    ARKit从入门到精通(1)-ARKit初体验 转载自:http://blog.csdn.net/u013263917/article/details/72903174 该系列文章共十篇,笔者将由易到 ...

  9. sencha touch 常见问题解答(1-25)

    欢迎留言补充,持续更新中... 1.sencha touch 是什么? 答:Sencha touch框架是世界上第一个基于HTML 5的移动应用框架.它可以让你的Web应用看起来像网络应用.美丽的用户 ...

随机推荐

  1. Python3 的异常处理

    Python3 的异常处理,在官方文档的 tutorial 中有说明. 这里把常用的异常处理方法都列出来,方便平时查找. 捕获异常基类 Python3 要求我们的异常必须继承 Exception 类. ...

  2. C# 时间与时间戳互转 13位|13位時間戳与日期换转

    这里直接上代码 懂C# 的程序猿 一看便知道如何使用的... /// <summary> /// 将Unix时间戳转换为DateTime类型时间 /// </summary> ...

  3. linux工作笔记

    1. Linux基础 1.1. Unix 1965年,AT&T贝尔电话实验室.通用电气公司.麻省理工学院MAC课题组一起联合开发一个称为Multics的新操作系统.该项目目的是让大型主机可以同 ...

  4. 模拟tap事件和longTap事件

    移动端模拟tap和longTap事件,基本原理就是在touchstart和touchend事件中,计算触摸的位移和时间差,位移在一定范围内(轻微滑动),时间小于150ms为tap事件,时间大于300m ...

  5. 如何用1个小时了解JSON

    W3school ↑↑↑学这个,1个小时够了.下面是节选: 代码例子1: <html> <body> <h2>在 JavaScript 中创建 JSON 对象< ...

  6. [NOIP2017] 逛公园 (最短路,动态规划&记忆化搜索)

    题目链接 Solution 我只会60分暴力... 正解是 DP. 状态定义: \(f[i][j]\) 代表 \(1\) 到 \(i\) 比最短路长 \(j\) 的方案数. 那么很显然最后答案也就是 ...

  7. java面试题之谈谈你对java的理解

    平台无关性:一处编译到处运行 GC:不用像c++那样手动释放堆内容 语言特性:泛型.反射.lamda表达式 面向对象:封装.继承.多态 类库:集合.并发库.网络库.IO库 异常处理

  8. 【BZOJ2243】染色（树链剖分）

    题意: 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点b路径上所有点都染成颜色c: 2.询问节点a到节点b路径上的颜色段数量(连续相同颜色被认为是同一段),如“112221”由 ...

  9. hdu3947 给一些已知（需费用）路径去覆盖一些边 //预先加灌法费用流

    River Problem 题意:一个有向树(河流),只有一个汇点1,每条边只有一个出度.有些河道有污染指数xi,必需要治理,有m段路径,可以去覆盖这些,每被覆盖一次,xi降低响应值. :即 给出一些 ...

  10. jquery 焦点轮播图控制每张图片停留不同时间

    轮播代码是代签博客园一位前辈写的代码,这里作了点小修改,实现了每张图片停留不同时间 *{ padding:0px; border:0px; margin:0px; } ul { list-style: ...