1、Sencha Touch开发与普通web开发有什么区别？

Sencha Touch（为方便起见，本文后面一律简写为ST）页面的开发跟普通html页面相比，总体来说没有本质上的区别，只是引入了对html5和CSS3的支持，然后提供了对移动设备（iPad/iPhone/Android Mobile/Android Tablet/BlackBerry等）的特殊优化。事实上也正是因为html5和CSS3才使得ST可以实现如此美妙以至于可以媲美Native应用程序的交互效果。

2、特殊的Document标记

ST页面的Document标记比较特殊，在html标签之前，使用如下标签来声明此文档是html5格式：

  1. <!DOCTYPE html>

　　

3、使用ST首先要在html代码的<head>区引入必须的公共CSS和JS文件：

  1.     <link rel="stylesheet" href="sencha-touch.css" type="text/css">
  2.     <script type="text/javascript" src="sencha-touch.js"></script>

需要注意的是，除sencha-touch.css外，ST提供了android.css/apple.css/bb6.css等三个css文件，分别对应android风格/apple风格/黑莓6三种不同的Theme，引用不同的css文件即可实现页面Theme的切换。

4、一个ST应用的通常模样

引入公共文件之后，当然就要编写自己应用程序的脚本了，如我们在大多数ST应用的例子中所见，通常情况下，应用程序脚本是写在单独的js文件中进行调用的（好处可以参见.net编程中code-behind和code-beside的对比），因此，一个常见的ST文档往往大致是这个模样：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Hello World</title>
  5.         <script src="sencha-touch.js" type="text/javascript"></script>
  6.         <script src="app.js" type="text/javascript"></script>
  7.         <link href="sencha-touch.css" rel="stylesheet" type="text/css" />
  8.     </head>
  9.     <body></body>
  10. </html>

　　

5、现在，我们关注的焦点将会转移到app.js这个文件了，因为它才是ST页面开发的核心。

通过我们对官网SDK中的Examples和同样出自官网的quick start代码进行分析，发现ST应用首页的js脚本（可以理解为启动程序）常用编写方式有两种：

A、Examples中采用的 —— Ext.setup方式

  1. //使用setup来启动主程序
  2. Ext.setup({
  3.     tabletStartupScreen: 'tablet_startup.png', //tablet设备时主屏中间出现的背景图片
  4.     phoneStartupScreen: 'phone_startup.png', //phone设备时主屏中间出现的背景图片
  5.     icon: 'icon.png', glossOnIcon: false, //跟Extjs一样，主程序代码卸载onReady里面
  6.     onReady: function(options) {
  7.         //TODO
  8.     }
  9. });

B、quick start中采用的 —— Ext.Application方式

  1. new Ext.Application({
  2.     launch: function() {
  3.         //TODO
  4.     }
  5. });

由于这里我们只关注ST应用的启动代码，所以具体界面实现代码省略。对于上述两种方式的区别，鄙人暂时无力进行解读，欢迎高手指教。

6、ST如何判断终端设备类型？

我们知道，既然ST是专为移动设备而设计，那么在我们的应用第一次被访问的时候，判断客户端设备的类型是非常重要的，在ST中，我们可以这样判断：

  1.         if (Ext.is.Phone) {
  2.             //所有手机设备
  3.         }
  4.         if (Ext.is.Android) {
  5.             //所有Android设备
  6.         }
  7.         if (Ext.is.BlackBerry) {
  8.             //黑莓手机
  9.         }
  10.         if (Ext.is.iPad) {
  11.             //iPad平板电脑
  12.         }
  13.         ……

当然关于设备类型还有很多其他判断属性，你可以参照ST的文档说明http://docs.sencha.com/touch/1-1/#!/api/Ext.is

7、设计一个漂亮的Demo

好了，几个前提问题基本解决，现在我们尝试写一个比HelloWorld更复杂一些的启动页面，来找一找成就感。先看原型图：

非常简单的一个登陆界面，我们确定使用apple风格的theme，使之更贴近Native的感觉。注：此例只考虑界面的实现，因此使用Ext.Panel控件进行布局设计。

8、一步步实现这个Demo

下面对实现代码按照步步深入的方式进行一下分解说明：

第一步：

  1. //第一步：放置一个Ext.Panel，使之充满屏幕
  2. Ext.setup({
  3.     icon: 'icon.png',
  4.     tabletStartupScreen: 'tablet_startup.png',
  5.     phoneStartupScreen: 'phone_startup.png',
  6.     glossOnIcon: false,
  7.     onReady: function() {
  8.  
  9. 		//判断是否是手机设备，只有手机设备才使用此布局
  10. 		if (Ext.is.Phone) {
  11. 			new Ext.Panel({  //使用一个Panel来填满屏幕
  12. 				fullscreen: true,  //是否全屏，选择true则横竖屏切换时仍可以保证自动适应尺寸
  13. 				id: 'content',
  14. 				scroll: 'vertical',  //滚动方向
  15. 				html: '这里放置内容',  //Panel里面放置的内容
  16. 				layout: {type: 'vbox', align: 'center'},  //布局方式，vbox纵向布局，且每行内容居中
  17. 				items: [],  //这里放置容器内部的子元素
  18. 				dockedItems: []  //这里放置Panel本身所拥有的dock元素（你可以理解为自带工具栏）
  19. 			});
  20. 		}
  21. 	}
  22. });

现在只有一个空容器充满屏幕，里面显示了几个汉字，看演示效果（Android 2.3，下同）

第二步：

  1. //第二步：给Panel添加一个顶部工具栏，用来显示程序标题
  2. Ext.setup({
  3.     icon: 'icon.png',
  4.     tabletStartupScreen: 'tablet_startup.png',
  5.     phoneStartupScreen: 'phone_startup.png',
  6.     glossOnIcon: false,
  7.     onReady: function() {
  8.  
  9. 		//判断是否是手机设备，只有手机设备才使用此布局
  10. 		if (Ext.is.Phone) {
  11. 			new Ext.Panel({
  12. 				fullscreen: true,
  13. 				id: 'content',
  14. 				scroll: 'vertical',
  15. 				layout: {type: 'vbox', align: 'center'},
  16. 				html: '这里放置内容',
  17. 				items: [],
  18.  
  19.                                 //前面我们说过，Panel自带的工具栏要放置在dockedItems里面
  20.                                 //现在我们添加顶部的工具栏
  21. 				dockedItems: [
  22. 					{
  23. 						id: 'status',  //给他一个ID
  24. 						xtype: 'toolbar',  //xtype类型是toolbar，完整的xtype枚举见这里http://docs.sencha.com/touch/1-1/#!/api/Ext.Component
  25. 						ui: 'light',  //light表示浅色的背景图案
  26. 						dock: 'top',  //工具栏放置在最顶部
  27. 						title: "Sencha Touch Demo"  //工具栏的标题
  28. 					}
  29. 				]
  30.  
  31. 			});
  32. 		}
  33. 	}
  34. });

效果图显示，我们已经有了一个顶部工具栏，显示应用程序的名称

第三步：

  1. //第三步：给Panel添加底部工具栏
  2. Ext.setup({
  3.     icon: 'icon.png',
  4.     tabletStartupScreen: 'tablet_startup.png',
  5.     phoneStartupScreen: 'phone_startup.png',
  6.     glossOnIcon: false,
  7.     onReady: function() {
  8.  
  9. 		//判断是否是手机设备，只有手机设备才使用此布局
  10. 		if (Ext.is.Phone) {
  11. 			new Ext.Panel({
  12. 				fullscreen: true,
  13. 				id: 'content',
  14. 				scroll: 'vertical',
  15. 				layout: {type: 'vbox', align: 'center'},
  16. 				html: '这里放置内容',
  17. 				items: [],
  18. 				dockedItems: [
  19.                                         //这里是刚才的顶部工具栏
  20. 					{
  21. 						id: 'status',
  22. 						xtype: 'toolbar',
  23. 						ui: 'light',
  24. 						dock: 'top',
  25. 						title: "Sencha Touch Demo"
  26. 					},
  27.                                         //这里是新增加的底部工具栏
  28. 					{
  29. 						xtype: 'toolbar',
  30. 						dock: 'bottom',  //在这里声明工具栏附着在底部
  31. 						ui: 'dark',  //深色背景图案
  32.                                                 //又看到了items，显然ST的items是可以嵌套的，好吧，我们一口气把这个工具栏上的按钮也给加上
  33. 						items: [
  34. 							{
  35. 								xtype: 'button',  //左侧一个button
  36. 								ui: 'drastic',  //drastic是button的颜色和样式定义
  37. 								text: '忘记密码'  //不解释
  38. 							},
  39. 							{xtype: 'spacer'},  //这个需要解释一下，spacer会自动充满剩余空间
  40. 							{
  41. 								xtype: 'button',  //最右侧的button
  42. 								ui: 'action',  //action样式是蓝色
  43. 								text: '注册使用'
  44. 							}
  45. 						]
  46. 					}
  47. 				]
  48. 			});
  49. 		}
  50. 	}
  51. });

现在看起来更像样一些了，底部工具栏也已经齐备

第四步：

  1. //第四步：顶部底部工具栏都已经ok，现在我们要给Panel添加内容
  2. //回头看一下原型图，我们需要再Panel内部自上到下放置一个logo图片和一个表单
  3. //表单包含了账号和密码两个文本框，其中密码是掩码框，然后是一个登录按钮和一个链接
  4.  
  5. Ext.setup({
  6.     icon: 'icon.png',
  7.     tabletStartupScreen: 'tablet_startup.png',
  8.     phoneStartupScreen: 'phone_startup.png',
  9.     glossOnIcon: false,
  10.     onReady: function() {
  11.  
  12. 		//判断是否是手机设备，只有手机设备才使用此布局
  13. 		if (Ext.is.Phone) {
  14. 			new Ext.Panel({
  15. 				fullscreen: true,
  16. 				id: 'content',
  17. 				scroll: 'vertical',
  18. 				layout: {type: 'vbox', align: 'center'},
  19.                                 //由于使用items设计Panel的内部元素，所以把html属性注掉
  20.                                 //其实不注也不会出错，html的内容会被显示在最底部
  21. 				//html: '这里放置内容',
  22.  
  23. 				items: [
  24.                                         //从上往下第一个元素，logo图片
  25. 					{
  26. 						xtype: 'container',  //使用普通的Container容器即可
  27. 						height: 98,  //高度要跟图片尺寸相适应，由于我在下面html代码中给图片加了16px的margin-top，所以Container高度设置成图片高度+16，防止图片显示不完整
  28. 						width: 96,  //图片的宽度
  29. 						html: '<img src="logo.png" style="margin-top: 16px;" />'  //直接设定html代码来显示图片，注意有16像素的顶部margin
  30. 					},
  31.                                         //从上往下第二个元素，form表单
  32. 					{
  33. 						xtype: 'form',  //xtype为form
  34. 						id: 'loginForm',  //为便于操作form，给它一个id
  35.                                                 //表单内有不止一个元素，因此又要给它添加items
  36. 						items: [
  37. 						{
  38. 							xtype: 'fieldset',  //加一个fieldset，可以将两个文本框放在一个圆角域组里面，更美观
  39. 							margin: '-2 0 16 0',  //使用margin调整与上面元素和下面元素之间的空隙
  40.                                                         //fieldset里面包含两个文本框
  41. 							items: [
  42. 							{
  43. 								xtype: 'textfield',  //第一个文本框
  44. 								name: 'account',  //name用来获取值
  45. 								placeHolder: '您的账号',  //默认显示在文本框里的文字，点击和输入时它会消失
  46. 								required: true,  //必填字段
  47. 								useClearIcon: true  //输入内容后文本框后面会出现一个清空按钮
  48. 							},
  49. 							{
  50. 								xtype: 'passwordfield',  //密码文本框
  51. 								name: 'password',
  52. 								placeHolder: '您的密码',
  53. 								required: true,
  54. 								useClearIcon: true
  55. 							}
  56. 							]
  57. 						},
  58.                                                 //提交按钮，放在fieldset外面是为了使之与fieldset等宽
  59. 						{
  60. 							xtype: 'button',
  61. 							text: '登录STDEMO',
  62. 							ui: 'confirm'  //绿色按钮
  63. 						},
  64.                                                 //再用一个Container来放置链接文字
  65. 						{
  66. 							xtype: 'container',
  67. 							html: '<div style="width: 100%; text-align: center;"><a style="font-size: 14px; color: blue;">需要合作？请联系我们……</a></div>',
  68. 							margin: '16 0 0 0'
  69. 						}
  70. 						]
  71. 					}
  72. 				],
  73. 				dockedItems: [
  74. 					{
  75. 						id: 'status',
  76. 						xtype: 'toolbar',
  77. 						ui: 'light',
  78. 						dock: 'top',
  79. 						title: "Sencha Touch Demo"
  80. 					},
  81. 					{
  82. 						xtype: 'toolbar',
  83. 						dock: 'bottom',
  84. 						ui: 'dark',
  85. 						items: [
  86. 							{
  87. 								xtype: 'button',
  88. 								ui: 'drastic',
  89. 								text: '忘记密码'
  90. 							},
  91. 							{xtype: 'spacer'},
  92. 							{
  93. 								xtype: 'button',
  94. 								ui: 'action',
  95. 								text: '注册使用'
  96. 							}
  97. 						]
  98. 					}
  99. 				]
  100. 			});
  101. 		}
  102. 	}
  103. });

显然这是最复杂的一步，不过只要学得耐心点，一样不成问题

到目前为止，我们的设计意图已经实现，最下面的链接由于屏幕高度问题被盖住了，向上拖动即可显示出来。最后再来一个全屏的效果：

怎么样？还不错吧，是不是很有Native的感觉？如果你喜欢的话，我们还可以换换Theme来看看。

第五步：切换Theme

上面这个是Sencha Touch风格

这个是Android风格

这个是BlackBerry6风格。

Sencha Touch 之初接触的更多相关文章

  1. Sencha touch 初体验

    一.什么是Sencha Touch? Sencha Touch是一个应用手持移动设备的前端js框架,与extjs是同一个门派的,它继承了extjs的优点和缺点.功能很强大,效果很炫丽,效率不高. 二. ...

  2. 关于sencha touch 的JSONP跨域请求的学习研究

    此篇文章是对自己在研究学习sencha touch的过程中的点滴记录,主要是JSONP的跨域请求这方面,对于何为是跨域概念还有不熟悉的,可以自己问下度娘. 先上张图: 我要完成的功能就是表格下拉刷新, ...

  3. ExtJS初接触 —— 了解 Ext Core

    ExtJS初接触 —— 了解 Ext Core Ext Core是一款和jQuery媲美的轻型JS库,基于MIT许可.对于Dom的操作,我个人还是比较喜欢用jQuery.当然如果项目中用的是ExtJS ...

  4. 【翻译】使用Sencha Touch开发Google Glass应用程序

    原文:Developing for Google Glass with Sencha Touch 作者:Ross Gerbasi Ross Gerbasi is a Senior Engineer a ...

  5. sencha touch的开源插件和例子

    写了好久的sencha touch,没想到换工作竟然一年多没有搞了.因为项目的缘故收集了好多的组件,由于懒惰,没有整理,现在想想有点后悔了,再加上如果就这样丢弃,感觉有些遗憾,今天整理了一下放在git ...

  6. 亲手使用Sencha Touch + phonepag开发Web APP随笔 -- 第一个APP

    参考博文: [Phonegap+Sencha Touch] 移动开发1.准备工作 [Phonegap+Sencha Touch] 移动开发2.PhoneGap/Cordova初步使用   经过差不多1 ...

  7. 亲手使用Sencha Touch + phonepag开发Web APP随笔 -- 环境安装篇

    最近因为有个项目需要制作APP,考虑到需要兼容Android和IOS,所以想采用WebAPP的方式来开发.现在是从零开始学习之路,走起-   通过网上博客和论坛,开始安装了一堆软件: 1. Sench ...

  8. 初接触BurpLoader工具

    初接触burp工具 菜鸟一枚,现在在接触一段时间测试,我在测试功能性的时候,想着网站被黑案例那么多,我是不是也应该弄弄安全性测试了,所以就有了下边的第一次接触BurpLoader工具来测试手机的app ...

  9. sencha touch打包成安装程序

    为了更好地向大家演示如何打包一个sencha touch的项目,我们用sencha cmd创建一个演示项目,如果你的sencha cmd环境还没有配置,请参照 sencha touch 入门系列 (二 ...

随机推荐

  1. log4j.xml——java日志处理组件配置简介

    (从一篇好文开始)log4j(一)——为什么要用log4j? 三:看完栗子后的感想 (1)很明显我们在编写代码的时候有各种需要打印日志的需求,比如:我们调试代码的时候:我们的应用出现了问题,我们分析. ...

  2. bzoj3924 [Zjoi2015]幻想乡战略游戏 点分树，动态点分

    [BZOJ3924][Zjoi2015]幻想乡战略游戏 Description 傲娇少女幽香正在玩一个非常有趣的战略类游戏,本来这个游戏的地图其实还不算太大,幽香还能管得过来,但是不知道为什么现在的网 ...

  3. windows下 maven+selenium+testng项目搭建（七）

    Selenium2.47.1 + Maven3.3.9 + TestNG6.8.8 windows准备好以下环境 1. Jdk,环境变量配置 2. maven环境3. eclipse 开发工具 ,ec ...

  4. 超爽的Windows终端Cmder

    我们常常看到科研.军事.编程上用的计算机系统是"黑洞洞"的,没有桌面.相对我们现在使用的Windows系统,既方便又美观,那么他们怎么不用Windows一样的图形化界面呢? 告诉你 ...

  5. javaweb学习总结(十四)——JSP原理（转）

    一.什么是JSP? JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写h ...

  6. 【POJ2104】K-th Number（主席树）

    题意:有n个数组成的序列,要求维护数据结构支持在线的下列两种操作: 1:单点修改,将第x个数修改成y 2:区间查询,询问从第x个数到第y个之间第K大的数 n<=100000,a[i]<=1 ...

  7. 【NOIP2016】换教室（DP，期望）

    题意: 对于刚上大学的牛牛来说, 他面临的第一个问题是如何根据实际情况中情合适的课程. 在可以选择的课程中,有2n节课程安排在n个时间段上.在第 i ( 1≤ i≤n)个时同段上, 两节内容相同的课程 ...

  8. 为了防止detailsview中修改后，而girdview却没立即更新显示

    原文发布时间为:2008-07-30 -- 来源于本人的百度文章 [由搬家工具导入] 可以在detailsview的事件中添加如下语句，即增加一个头，让它在0秒的时候刷新： Response.AddH ...

  9. zoj 2760(网络流+floyed)

    How Many Shortest Path Time Limit: 10 Seconds      Memory Limit: 32768 KB Given a weighted directed ...

  10. git add 错误修改方法

    git add a.txt 报如下错误: fatal: Unable to create 'E:/git/.git/index.lock': File exists. Another git proc ...