&&&&&&&&&&&&&&&&&&
posts - 79,comments - 18,trackbacks - 0
想到哪里写到哪里，因为是学习过程，可能有不对的地方，以后会随时回头修改。本文面向的是Sencha Touch 1.1.1版本。
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格式：
&!DOCTYPE html&
3、使用ST首先要在html代码的&head&区引入必须的公共CSS和JS文件：
&link&rel="stylesheet"&href="sencha-touch.css"&type="text/css"&
&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文档往往大致是这个模样：
&!DOCTYPE html&
&&&&&head&
&&&&&&&&&title&Hello World&/title&
&&&&&&&&&script&src="sencha-touch.js"&type="text/javascript"&&/script&
&&&&&&&&&script&src="app.js"&type="text/javascript"&&/script&
&&&&&&&&&link&href="sencha-touch.css"&rel="stylesheet"&type="text/css"&/&
&&&&&/head&
&&&&&body&&/body&
5、现在，我们关注的焦点将会转移到app.js这个文件了，因为它才是ST页面开发的核心。
通过我们对官网SDK中的Examples和同样出自官网的代码进行分析，发现ST应用首页的js脚本（可以理解为启动程序）常用编写方式有两种：
A、Examples中采用的 && Ext.setup方式
Ext.setup({
&&&&tabletStartupScreen: 'tablet_startup.png',
&&&&phoneStartupScreen: 'phone_startup.png',
&&&&icon: 'icon.png', glossOnIcon: false,
&&&&onReady: function(options) {
B、quick start中采用的 && Ext.Application方式
new&Ext.Application({
&&&&launch: function() {
由于这里我们只关注ST应用的启动代码，所以具体界面实现代码省略。对于上述两种方式的区别，鄙人暂时无力进行解读，欢迎高手指教。
6、ST如何判断终端设备类型？
我们知道，既然ST是专为移动设备而设计，那么在我们的应用第一次被访问的时候，判断客户端设备的类型是非常重要的，在ST中，我们可以这样判断：
if (Ext.is.Phone) {
&&&&//所有手机设备
if (Ext.is.Android) {
&&&&//所有Android设备
if (Ext.is.BlackBerry) {
&&&&//黑莓手机
if (Ext.is.iPad) {
&&&&//iPad平板电脑
当然关于设备类型还有很多其他判断属性，你可以参照ST的文档说明/touch/1-1/#!/api/Ext.is
7、设计一个漂亮的Demo
好了，几个前提问题基本解决，现在我们尝试写一个比HelloWorld更复杂一些的启动页面，来找一找成就感。先看原型图：
非常简单的一个登陆界面，我们确定使用apple风格的theme，使之更贴近Native的感觉。注：此例只考虑界面的实现，因此使用Ext.Panel控件进行布局设计。
8、一步步实现这个Demo
下面对实现代码按照步步深入的方式进行一下分解说明：
Ext.setup({
&&&&icon: 'icon.png',
&&&&tabletStartupScreen: 'tablet_startup.png',
&&&&phoneStartupScreen: 'phone_startup.png',
&&&&glossOnIcon: false,
&&&&onReady: function() {
&&&&&&&&if&(Ext.is.Phone) {
&&&&&&&&&&&&new&Ext.Panel({&
&&&&&&&&&&&&&&&&fullscreen: true,&
&&&&&&&&&&&&&&&&id: 'content',
&&&&&&&&&&&&&&&&scroll: 'vertical',&
&&&&&&&&&&&&&&&&html: '这里放置内容',&
&&&&&&&&&&&&&&&&layout: {type: 'vbox', align: 'center'},&
&&&&&&&&&&&&&&&&items: [],&
&&&&&&&&&&&&&&&&dockedItems: []&
&&&&&&&&&&&&});
现在只有一个空容器充满屏幕，里面显示了几个汉字，看演示效果（Android 2.3，下同）
Ext.setup({
&&&&icon: 'icon.png',
&&&&tabletStartupScreen: 'tablet_startup.png',
&&&&phoneStartupScreen: 'phone_startup.png',
&&&&glossOnIcon: false,
&&&&onReady: function() {
&&&&&&&&if&(Ext.is.Phone) {
&&&&&&&&&&&&new&Ext.Panel({
&&&&&&&&&&&&&&&&fullscreen: true,
&&&&&&&&&&&&&&&&id: 'content',
&&&&&&&&&&&&&&&&scroll: 'vertical',
&&&&&&&&&&&&&&&&layout: {type: 'vbox', align: 'center'},
&&&&&&&&&&&&&&&&html: '这里放置内容',
&&&&&&&&&&&&&&&&items: [],
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&dockedItems: [
&&&&&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&&&&&id: 'status',&
&&&&&&&&&&&&&&&&&&&&&&&&xtype: 'toolbar',&
&&&&&&&&&&&&&&&&&&&&&&&&ui: 'light',&
&&&&&&&&&&&&&&&&&&&&&&&&dock: 'top',&
&&&&&&&&&&&&&&&&&&&&&&&&title: "Sencha Touch Demo"&&
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&]
&&&&&&&&&&&&});
效果图显示，我们已经有了一个顶部工具栏，显示应用程序的名称
Ext.setup({
&&&&icon: 'icon.png',
&&&&tabletStartupScreen: 'tablet_startup.png',
&&&&phoneStartupScreen: 'phone_startup.png',
&&&&glossOnIcon: false,
&&&&onReady: function() {
&&&&&&&&if&(Ext.is.Phone) {
&&&&&&&&&&&&new&Ext.Panel({
&&&&&&&&&&&&&&&&fullscreen: true,
&&&&&&&&&&&&&&&&id: 'content',
&&&&&&&&&&&&&&&&scroll: 'vertical',
&&&&&&&&&&&&&&&&layout: {type: 'vbox', align: 'center'},
&&&&&&&&&&&&&&&&html: '这里放置内容',
&&&&&&&&&&&&&&&&items: [],
&&&&&&&&&&&&&&&&dockedItems: [
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&&&&&id: 'status',
&&&&&&&&&&&&&&&&&&&&&&&&xtype: 'toolbar',
&&&&&&&&&&&&&&&&&&&&&&&&ui: 'light',
&&&&&&&&&&&&&&&&&&&&&&&&dock: 'top',
&&&&&&&&&&&&&&&&&&&&&&&&title: "Sencha Touch Demo"
&&&&&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&&&&&xtype: 'toolbar',
&&&&&&&&&&&&&&&&&&&&&&&&dock: 'bottom',&
&&&&&&&&&&&&&&&&&&&&&&&&ui: 'dark',&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&items: [
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&xtype: 'button',&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&ui: 'drastic',&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&text: '忘记密码'&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{xtype: 'spacer'},&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&xtype: 'button',&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&ui: 'action',&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&text: '注册使用'
&&&&&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&&&&&]
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&]
&&&&&&&&&&&&});
现在看起来更像样一些了，底部工具栏也已经齐备
Ext.setup({
&&&&icon: 'icon.png',
&&&&tabletStartupScreen: 'tablet_startup.png',
&&&&phoneStartupScreen: 'phone_startup.png',
&&&&glossOnIcon: false,
&&&&onReady: function() {
&&&&&&&&if&(Ext.is.Phone) {
&&&&&&&&&&&&new&Ext.Panel({
&&&&&&&&&&&&&&&&fullscreen: true,
&&&&&&&&&&&&&&&&id: 'content',
&&&&&&&&&&&&&&&&scroll: 'vertical',
&&&&&&&&&&&&&&&&layout: {type: 'vbox', align: 'center'},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&items: [
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&&&&&xtype: 'container',&
&&&&&&&&&&&&&&&&&&&&&&&&height: 98,&
&&&&&&&&&&&&&&&&&&&&&&&&width: 96,&
&&&&&&&&&&&&&&&&&&&&&&&&html: '&img src="logo.png" style="margin-top: 16" /&'&&
&&&&&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&&&&&xtype: 'form',&
&&&&&&&&&&&&&&&&&&&&&&&&id: 'loginForm',&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&items: [
&&&&&&&&&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&xtype: 'fieldset',&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&margin: '-2 0 16 0',&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&items: [
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&xtype: 'textfield',&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&name: 'account',&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&placeHolder: '您的账号',&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&required: true,&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&useClearIcon: true&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&xtype: 'passwordfield',&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&name: 'password',
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&placeHolder: '您的密码',
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&required: true,
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&useClearIcon: true
&&&&&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&&&&&&&&&]
&&&&&&&&&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&xtype: 'button',
&&&&&&&&&&&&&&&&&&&&&&&&&&&&text: '登录STDEMO',
&&&&&&&&&&&&&&&&&&&&&&&&&&&&ui: 'confirm'&&
&&&&&&&&&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&xtype: 'container',
&&&&&&&&&&&&&&&&&&&&&&&&&&&&html: '&div style="width: 100%; text-align:"&&a style="font-size: 14 color:"&需要合作？请联系我们&&&/a&&/div&',
&&&&&&&&&&&&&&&&&&&&&&&&&&&&margin: '16 0 0 0'
&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&&&&&]
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&],
&&&&&&&&&&&&&&&&dockedItems: [
&&&&&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&&&&&id: 'status',
&&&&&&&&&&&&&&&&&&&&&&&&xtype: 'toolbar',
&&&&&&&&&&&&&&&&&&&&&&&&ui: 'light',
&&&&&&&&&&&&&&&&&&&&&&&&dock: 'top',
&&&&&&&&&&&&&&&&&&&&&&&&title: "Sencha Touch Demo"
&&&&&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&&&&&xtype: 'toolbar',
&&&&&&&&&&&&&&&&&&&&&&&&dock: 'bottom',
&&&&&&&&&&&&&&&&&&&&&&&&ui: 'dark',
&&&&&&&&&&&&&&&&&&&&&&&&items: [
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&xtype: 'button',
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&ui: 'drastic',
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&text: '忘记密码'
&&&&&&&&&&&&&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{xtype: 'spacer'},
&&&&&&&&&&&&&&&&&&&&&&&&&&&&{
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&xtype: 'button',
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&ui: 'action',
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&text: '注册使用'
&&&&&&&&&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&&&&&&&&&]
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&&]
&&&&&&&&&&&&});
显然这是最复杂的一步，不过只要学得耐心点，一样不成问题
到目前为止，我们的设计意图已经实现，最下面的链接由于屏幕高度问题被盖住了，向上拖动即可显示出来。最后再来一个全屏的效果：
怎么样？还不错吧，是不是很有Native的感觉？如果你喜欢的话，我们还可以换换Theme来看看。
第五步：切换Theme
上面这个是Sencha Touch风格
这个是Android风格
这个是BlackBerry6风格。
Enjoy it！
阅读(...) 评论()转载网址：
前段时间不才翻译了关于Sencha Touch 2 MVC架构的一系列文章，大家的认可让我备受鼓舞，也坚定了继续分享自己学习Sencha Touch（下文简称ST）过程和经验的决心。
在跟大家交流的过程中，发现很多入门者反映，学习ST最大的障碍有两个：1、官方文档跟进速度不够；2、官方sample集成程度较高，典型性不足。
我认同大家的观点：由于前期ST2版本更新极快，一个多月的时间从Beta到RC再到正式版，这期间小变动相当多，开发组的疯狂精神固然值得钦佩，可是截至目前为止，仍有一些地方未作详尽说明，而这对于刚接触ST的朋友来讲的确很困难。关于官方提供的sample集成度过高的问题，我觉得对从未接触过Ext产品系的朋友来说，这一点也的确棘手。
所以这一阶段我的打算是通过demo的方式，为刚开始学习的朋友们提供一些更具有典型性的实例，同时也尝试对官方说明不够的地方进行一下讲解，希望对大家有帮助。
Sencha Touch&交流&QQ&群&&欢迎您的加入。
&本节目标：加载 ST2 到你的网页，搭建运行环境
这一节的内容其实刚好可以对应官方文档的《Getting Started with Sencha Touch 2》
为什么我前面一直没有翻译这一章节，原因也在这里，对于ST2来讲，官方的这篇文档显然缺乏诚意，虽然它可以指点你写出一个hello world，但是对ST2运行环境的搭建细节说明不够，刚好今天我可以用一个完整的Demo来做一个详细说明。
ST1的时候，搭建基于ST的网页运行环境的确非常简单，如官方这篇文档所述已经足够（这也是我认为诚意不够的原因，为嘛不紧跟ST2的步伐呢）。
但是从ST2 Beta版开始，开发组提供了sencha-touch-all.js和sencha-touch.js两个js文件，其目的是允许开发人员选择ST框架是采用&一次性加载全部&的方式（简称all方式）还是&首次运行只加载核心代码，随后按需加载&的方式（简称core方式），在ST2的最终发布版中，core方式只有91k，而all方式有568k，这还都是压缩后的大小，这样的尺寸对比在mobile设备上意味着用户体验可能出现巨大差别，因此根据自身需求来选择加载模式还是很有必要的。
其实ST2的正式版发布后，很多人就开始头疼，因为大家发现下载的sdk包解压缩后，里面的例子无法直接双击在Chrome里运行，这还不算完，ST官方网站上提供的sample源码竟然也变得失去了可读性，没有了css文件的引入，没有了app.js的引入，只是html页面中被加入了一段压缩混淆后的js代码，很多人想不通，其实我当时也想不通:-）。
事情的真相是，正式版使用的那段混淆脚本叫做microloader，它通过异步加载一个app.json文件（这个文件也是正式版才出现的）来读取对运行环境的初始化设定，然后根据app.json中的设定再去加载相应的css和js文件，甚至于设定app缓存等等（还有很多至今搞不清楚的设定），也就是说，采用此种方式，要调用的js和css文件被隐藏了，显而易见，这种方式非常有助于保护你的源码，当然也不是绝对安全的js源码保护方式，但至少还是比什么都不做要强得多。
于是，ST2的正式版最终得以支持两种模式下的四种手段来实现ST2框架文件的加载。而这也是本节的demo所要说明的。
&开发环境说明
ST的开发说到底还是web开发，因此它对开发环境和其实并不挑剔，小到notepad，中到notepad++/editplus，大到eclipse/visual studio都可以，当然如果考虑到方便性的话，最好还是有自动格式、关键字高亮、自动补齐功能，但无论怎样，目前似乎还没有可以像Aptana通过插件来支持jQuery那样完全支持ST的开发工具，我们期盼以后eclipse或者visual studio出现相应的插件吧。
对于普通而言，我推荐notepad++，轻便的同时功能还算强大，如果你不怕块头大，Aptana和eclipse也是不错的选择。不过我用的是Visual Studio 2010，因为电脑上就有，无需安装了。
&Demo代码完整结构
下面对上述结构做一详细说明：
最顶级是Demo和SenchaTouch两个文件夹，分别用来放置Demo程序代码和ST框架代码：
SenchaTouch文件夹下面的2.0.0文件夹表明当前ST框架的版本号，再下面就是ST2框架的所有相关资源文件；
以sencha-touch开头的4个js文件分别是ST2框架的all版和core版及其各自的debug版；
css里面放置了ST2的几套皮肤样式文件；
src文件夹下是ST2的所有源文件代码，该文件夹内文件主要供core加载方式调用；
还有一个microloader文件夹，里面提供了刚才我们前面提到过的ST2正式版所采用最新加载方式所需js文件。
Demo文件夹下就是我们此次编写的全部代码文件：
1.LoadSenchaTouchDirectly文件夹下面有两个html页面和各自匹配的js文件，分别对ST传统的主页面直接嵌入js和css模式下，如何采用all和core两种手段载入框架文件进行了示范；
2.LoadSenchaTouchWithMicroloader文件夹下有两个html页面、一个app.js外加一个app.json文件，演示了如何在html页面中通过inline或者code-behind方式引用microloader实现ST的设定和加载。
&Demo所实现的效果：文本框与Picker结合实例
虽然本文目的是分别演示不同模式不同手段来加载ST2所需框架，但页面上若只写一个干巴巴的Hello World还是有些对不起观众，所以这里我实现了一个比较有实际使用价值的效果，那就是一个不可编辑文本框，该文本框的值只能通过一个Picker来选择。效果图如下：
下面开始一一介绍四种加载方式：
&A.直接加载完整框架文件（all方式）
这种加载方式跟ST1开始的方式是一样的，即在html页面中明确引入sencha-touch的完整框架js文件、css文件以及应用程序代码。
sencha-touch-all.html代码:
晕死！博客园将我的相对路径都自动转成了站内绝对路径，请自行将后面所有代码中的"/"改成"。。/。。/"（。换成.）
DOCTYPE html&&html&&head&
&title&Hello Mobiletitle&
&link rel="stylesheet" href="/SenchaTouch/2.0.0/css/sencha-touch.css" type="text/css"&
&script type="text/javascript" src="/SenchaTouch/2.0.0/sencha-touch-all-debug.js"&script&
&script type="text/javascript" src="app-all.js"&script&head&&body&body&html&
app-all.js代码（代码逻辑很简单，看注释即可）：
Ext.application({
name: 'Demo',
viewport: {
autoMaximize: true // 该属性可以设置页面自动最大化（隐藏地址栏）
launch: function () {
Ext.create("Ext.Panel", {
fullscreen: true,
xtype: 'fieldset',
margin: 10,
title: '文本框与Picker结合实例',
xtype: 'textfield',
name: 'aTextField',
id: 'aTextField',
readOnly: true,
// 把文本框设为只读，禁止输入
label: '取值结果',
clearIcon: true,
listeners: {
// 侦听文本框的focus事件，获取到焦点时触发
focus: function () {
this.disable();
// 先禁用文本框，防止系统调出软键盘
Ext.getCmp('aPicker').show();
// 然后显示用来选择内容的Picker
// 定义一个Picker供文本框联动
aPicker = Ext.create('Ext.Picker', {
name: 'aPicker',
id: 'aPicker',
hidden: true,
listeners: {
// 侦听change事件，Picker的值改变同时也设定文本框的值
change: function () {
Ext.getCmp('aTextField').setValue(aPicker.getValue().question);
// 侦听hide事件，当Picker消失时将文本框状态恢复为enable
hide: function () {
Ext.getCmp('aTextField').enable();
name: 'question',
text: '无',
text: '最喜欢的颜色',
value: 'color'
text: '最喜欢的运动',
value: 'sport'
text: '最喜欢的明星',
value: 'star'
// 前面定义的Picker控件必须显式加入Viewport，否则无法被调用显示
// Ext.Viewport是Sencha Touch自动创建的一个顶级容器
Ext.Viewport.add(aPicker);
&B.先加载核心框架文件，然后按需加载其他组件（core方式）
此种加载方式是ST2新增的，他为我们提供了更多地选择，避免每个app都要加载巨大的sencha-touch-all.js。
不过具体使用的时候你会发现，这种core方式虽然相比all方式需要下载的文件小了，但同样存在一些弊端：
单页面加载文件的个数大大增加，这毫无疑问会加大服务器的并发压力；
按需加载方式还将导致页面渲染时间（指页面所需文件下载完成到页面渲染完成中间这段页面显示白屏的时长）变长，用户体验未见明显提升。
所以最终选择哪中方式，还要经过你自己仔细测算和评估自身需求而定。
sencha-touch-core.html代码（相比A所采用的all方式，仅仅改变了对应用程序代码文件（app-core.js取代了app-all.js）和框架js文件（sencha-touch-debug.js文件取代sencha-touch-all-debug.js文件）的引用：
DOCTYPE html&&html&&head&
&title&Hello Mobiletitle&
&link rel="stylesheet" href="/SenchaTouch/2.0.0/css/sencha-touch.css" type="text/css"&
&script type="text/javascript" src="/SenchaTouch/2.0.0/sencha-touch-all-debug.js"&script&
&script type="text/javascript" src="app-core.js"&script&head&&body&body&html&
app-core.js代码（着重观察开始的部分，后面的代码与all方式没有区别）：
// 第一件事就是给src这个源文件目录指定一个命名空间（具体参见官方文档翻译中的External Dependencies，即外部依赖）Ext.Loader.setPath({
'Ext': '/SenchaTouch/2.0.0/src'});// 然后根据application用到的控件来添加对以下组件的引用（有人说Ext.TitleBar没用到啊，其实用到了，在Picker里面）// 大家请注意，其实这里的Ext命名空间指的就是上面Ext.Loader.setPath方法中指定的外部依赖命名空间Ext.require(['Ext.form.FieldSet', 'Ext.picker.Picker', 'Ext.TitleBar']);// 下面的代码部分跟all方式完全保持了一致，故省略&&Ext.application({
name: 'Demo',
注意：A和B两种方式由于对js和css文件采用了相对路径的直接引用，所以直接在资源管理器双击运行就可以看到效果。
&C.通过Microloader加载ST框架（Code-behind方式）
前文说过，Microloader是ST2正式版加入的新功能，通过这种模式加载ST2框架的话，在Chrome浏览器里无法直接查看效果，Safari可以。
采用Microloader模式又可以细分为Code-Inline和Code-behind两种方式，Code-inline指的是把js脚本直接写在html页面里，Code-behind指的是链接外部js文件来实现。先看第一种（这也是官方sdk例子当中采用的方式）：
JsCodeBehind.html代码（简单的不能再简单了，只引用了microloader文件夹下的development.js文件，经测试，其他两个文件均无效，注意这里给script加了一个id）：
DOCTYPE HTML&&html&&head&
&meta charset="UTF-8"&
&title&Microloadertitle&
&script id="microloader" type="text/javascript" src="/SenchaTouch/2.0.0/microloader/development.js"&script&head&&body&body&html&
我们知道这个microloader的功能是加载并读取app.json文件里的设置，那么当然有必要看一下app.json代码：
"name": "Demo",
// app名称
"path": "/SenchaTouch/2.0.0/sencha-touch-all-debug.js"
// 引用的ST框架文件，这里我们选用all模式
"path": "app.js",
// 引用的应用程序代码文件
"update": "delta"
"path": "/SenchaTouch/2.0.0/css/sencha-touch.css",
// 引用的css文件
"update": "delta"
"appCache": {
"cache": [
"JsCodeBehind.html",
"JsCodeInline.html"
"network": [
"fallback": []
"extras": [
"archivePath": "archive",
"buildPaths": {
"testing": "/deploy/testing/Demo",
"production": "/deploy/production/Demo",
"package": "/deploy/package/Demo",
"native": "/deploy/native/Demo"
"buildOptions": {
"product": "touch",
"minVersion": 3,
"debug": false,
"logger": "no"
"id": "3aa-11e1-a90e-bb"}
由于官方尚未对app.json文件中的其他配置做详细说明，因此我们在这里只关注前面3个配置，这些已经足够我们正常运行ST应用程序了。为了方便起见，该文件中指定了调用的ST框架文件是sencha-touch-all-debug.js（all方式），应用程序代码文件是app.js，它的代码跟A中的没有任何区别，这里就不再贴了。
&D.通过Microloader加载ST框架（Code-inline方式）
Code-inline方式，顾名思义，把js代码直接写在html文件里，这是目前ST官网实例中所采用的方式（您可能已经注意到了，官方的例子与提供下载的sdk包中同一个例子所采取的方式并不相同）！
我们先随便找一个官网部署的例子来看一下它的代码（这里选择的是正式版新增的例子TouchStyle）：
DOCTYPE HTML&&html manifest="cache.manifest" lang="en-US"&&head&
&meta charset="UTF-8"&
&title&TouchStyletitle&
&script type="text/javascript"&(function(n){function r(a){function b(a,j){var c=a.length,b,e;for(b=0;b&c;b++){e=a[b];var d=a,J=b,k=void 0;"string"==typeof e&&(e={path:e});e.shared?(e.version=e.shared,k=e.shared+e.path):(y.href=e.path,k=y.href);e.uri=k;e.key=g+"-"+k;f[k]=e;d[J]=e;e.type=j;e.index=b;e.collection=a;e.ready=!1;e.evaluated=!1}return a}var"string"==typeof a?(c=a,a=z(c)):c=JSON.stringify(a);var g=a.id,d=g+"-"+A+o,f={};this.key=d;this.css=b(a.css,"css");this.js=b(a.js,"js");this.assets=this.css.concat(this.js);this.getAsset=function(a){return f[a]};this.store=function(){s(d,c)}}function v(a,b){i.write(''+a+'" content="'+b+'"&')}function p(a,b,c){var g=new XMLHttpRequest,d,c=c||B;try{g.open("GET",a,!0),g.onreadystatechange=function(){4==g.readyState&&(d=g.status,200==d||304==d||0==d?b(g.responseText):c())},g.send(null)}catch(f){c()}}function K(a,b){var c=i.createElement("iframe");m.push({iframe:c,callback:b});c.src=a+".html";c.style.cssText="width:0;height:0;border:0;position:z-index:-999;visibility:hidden";i.body.appendChild(c)}function C(a,b,c){var g=!!a.if(!g)var d=b,f=a.version,h,b=function(j){h=j.substring(0,f.length+4);h!=="/*"+f+"*/"?confirm("Requested: '"+a.uri+"' with checksum: "+f+" but received: "+h.substring(2,f.length)+"instead. Attemp to refresh the application?")&&L():d(j)};(g?K:p)(a.uri,b,c)}function D(a){var b=a.data,a=a.source.window,c,g,d,f;for(c=0,g=m.c&g;c++)if(d=m[c],f=d.iframe,f.contentWindow===a){d.callback(b);i.body.removeChild(f);m.splice(c,1);break}}function E(a){"undefined"!=typeof console&&(console.error||console.log).call(console,a)}function s(a,b){try{l.setItem(a,b)}catch(c){if(c.code==c.QUOTA_EXCEEDED_ERR){var g=t.assets.map(function(a){return a.key}),d=0,f=l.length,h=!1,j;for(g.push(t.key);d&=f-1;)j=l.key(d),-1==g.indexOf(j)?(l.removeItem(j),h=!0,f--):d++;h&&s(a,b)}}}function u(a){try{return l.getItem(a)}catch(b){return null}}function L(){F||(F=!0,p(o,function(a){(new r(a)).store();n.location.reload()}))}function G(a){function b(a,b){var d=a.collection,e=a.index,g=d.length,f;a.ready=!0;a.content=b;for(f=e-1;0&=f;f--)if(a=d[f],!a.ready||!a.evaluated)return;for(f=e;f&g;f++)if(a=d[f],a.ready)a.evaluated||c(a);else break}function c(a){a.evaluated=!0;if("js"==
阅读(...) 评论()