Sencha touch2详细资料整理二快速入门.docx
《Sencha touch2详细资料整理二快速入门.docx》由会员分享，可在线阅读，更多相关《Sencha touch2详细资料整理二快速入门.docx（13页珍藏版）》请在冰点文库上搜索。
Senchatouch2详细资料整理二快速入门
Senchatouch2详细资料整理二
Byyjjat2012-03-31
一.调试入门
a）Senchatouch2的系统例子，必须要在最新的GoogleChrome浏览器上运行的
b）Senchatouch2的系统例子有些会运行白屏,那是因为他调用了服务器端程序，你要架设iis或apache进行系统支待.我在这里架设的是WampServer.同时要打开apache的mime-magic-module模块.打开方法.点击右下角
图标=>apache=>apache模块，选中mime-magic-module模块.将例子放到对应的路径下并修改好路径就可以执行.
c）支持多种平台，但是不会自动识别,只能显示成phone界面，在平板上就显示不全，如Senchatouch2自带例程中的KitchenSink例子.
解决办法:
打开例程的.
在这个目录, 将tablet.js
isActive:
function（） {
return true;
},
phone.js改成
isActive:
function（） {
return false; // || Ext.os.is.Desktop;
},
要起让系统支持哪个.就反过来改一下.
参考的文件（附件1《在应用程序中使用设备配置》）:
网友提供.
d）.做好例子后,在平板上调试不能在普通浏览器上打开，因为平板上的webkit不一定是最新的webkit.不支持演html5和css3的渲染.所以需要安装以下软件RexseeEmulator.
运行原理.在GoogleChrome浏览器中运行的程序是调用核心的库.而rexseeEmulator也是调用安卓系统的核心功能库.是一致的。
前言：
实话实说，之前我是有些小瞧了SenchaTouch中的DeviceProfile的作用，所以在翻译顺序上才把它放在了比较靠后的位置。
细读此文之后才发现自己实在是大错特错，DeviceProfile简直堪称SenchaTouchMVC中的最大亮点之一。
除非你甘愿放弃SenchaTouch那不可思议的跨设备能力，否则你都必须学透DeviceProfile这一功能。
在应用程序中使用设备配置
注：
为方便起见，文中所有出现SenchaTouch的地方均以ST简写替代。
今日之移动web应用程序开发要求我们必须考虑尽可能广泛的设备适用性，从最小的智能手机，到最大的平板电脑，不一而足。
这些设备分辨率跨度很大而且使用方式千奇百怪。
通常人们不在家的时候会使用手机应用来快速获取信息或者做些别的什么，不过使用时间基本上都控制在一分钟以内（译者注：
应该是每次一分钟以内吧）。
平板电脑的使用时间显然就更长一些，而且一般使用场合是在家里或者在其他能够长久安坐的什么地方。
凡此总总意味着人们在不同的设备上期望的是不同的体验，但事实上，尽管体验不同，可应用程序的绝大部分逻辑和资源还是可以共享的。
为每个平台编写一个独立的app不仅浪费时间、容易出错，而且还超级无聊。
谢天谢地，设备配置（这一功能）给我们提供了一种简单的方式，使得我们能够共享尽可能多的代码，同时又能轻松地为每种设备定制行为、外观和工作流。
配置内容
设备配置存在于应用程序的上下文环境之中，例如要创建一个带有phone和tablet配置的emal应用，我们可以像下面这样来定义app.js（如果对此不熟悉的话请参考 IntrotoAppsguide ）
Ext.application（{
name:
'Mail',
profiles:
['Phone','Tablet']
}）;
我们没有给应用程序写上launch方法，所以现在它唯一能做的就是加载这两个Profiles。
按照惯例，他们的存放路径是app/profile/Phone.js和app/profile/Tablet.js，看看Phone配置文件长得什么样子吧：
Ext.define（'Mail.profile.Phone',{
extend:
'Ext.app.Profile',
config:
{
name:
'Phone',
views:
['Main']
},
isActive:
function（）{
returnExt.os.is.Phone;
}
}）;
Tablet的配置也是一样的格式。
这个Phone配置里面我们只提供了3条信息：
Profile名称，一组需要额外加载的视图（该项属于可选的），还有一个isActive函数。
isActive这个函数将决定该profile在当前设备下是否被启用。
到目前为止，最常用的区分就是使用内置的Ext.os.is.Phone和Ext.os.is.Tablet属性，分别创建Phone和Tablet的profile。
你可以在isActive函数里面写任何代码，只要他最终能够为当前设备返回一个true或者false即可。
决定当前活动配置
一旦Profile文件加载成功，它们的isActive函数会一次被调用。
而应用程序将适配第一个返回true的profile来启动，该Profile随即被设置成为应用程序的currentProfile，然后应用程序开始加载它所有的依赖项，包含数据模型、视图、控制器和其他组成应用程序的一些类文件。
看例子，我们改进一下刚才的应用程序，让他加载一些数据模型和试图进来：
Ext.application（{
name:
'Mail',
profiles:
['Phone','Tablet'],
models:
['User'],
views:
['Navigation','Login']
}）;
现在我们在手机上运行一下，Phone配置被激活，应用程序将加载如下文件：
app/model/User.js
app/view/Navigation.js
app/view/Login.js
app/view/phone/Main.js
前三项（User数据模型以及Navigation和Login视图）是应用程序自己定义的（也就是公共资源），第四项是Phone配置定义的。
按照惯例，Profile定义的类将被放置在Profile同名的目录下。
比如，Phone配置定义的Main这个视图就应该放在app/view/phone/Main.js文件中，如果Main是在应用程序中定义的话，就该放在app/view/Main.js中。
以上原则对Profile中加载的所有数据模型、视图、控制器、数据存储都适用。
这样做非常重要，因为这样就能使得我们轻易地在不同设备之间共享行为、视图、逻辑以及更多资源了，后面的章节你可以看到定制视图和控制器的例子。
如果想加载没按照常规位置存放的类，你就得指定完整路径了。
Ext.define（'Mail.profile.Phone',{
extend:
'Ext.app.Profile',
config:
{
name:
'Phone',
views:
['Main','Mail.view.SpecialView'],
models:
['Mail.model.Message']
},
isActive:
function（）{
returnExt.os.is.Phone;
}
}）;
一个典型的Profilelaunch方法通常是这样的：
Ext.define（'Mail.profile.Phone',{
extend:
'Ext.app.Profile',
config:
{
name:
'Phone',
views:
['Main']
},
isActive:
function（）{
returnExt.os.is.Phone;
},
launch:
function（）{
Ext.create（'Mail.view.phone.Main'）;
}
}）;
注意Profile和Application的launch方法都是可选的，如果你没定义它们，就不会被调用。
SpecializingViews
专用视图
Profile大部分的专用设置都发生在视图和控制器上。
先看视图，假定我们有一个如下的Tablet配置：
Ext.define（'Mail.profile.Tablet',{
extend:
'Ext.app.Profile',
config:
{
views:
['Main']
},
launch:
function（）{
Ext.create（'Mail.view.tablet.Main'）;
}
}）;
当我们在平板电脑上启动这个应用程序时，app/views/tablet/Main.js这个文件将被加载，其内容如下：
Ext.define（'Mail.view.tablet.Main',{
extend:
'Mail.view.Main',
config:
{
title:
'Tablet-specificversion'
}
}）;
通常我们定义一个视图的时候都会扩展某一个ST内置的视图，但是这个例子当众，我们扩展的是Mail.view.Main这个我们自己创建的视图，代码如下：
Ext.define（'Mail.view.Main',{
extend:
'Ext.Panel',
config:
{
title:
'Genericversion',
html:
'Thisisthemainscreen'
}
}）;
这样我们就有了一个父类（Mail.view.Main）和一个Profile指定的子类（Main.view.tablet.Main），在子类中我们可以定制任何内容。
这个例子里我们在子类中把它的标题从Genericversion改成Tablet-specificversion，当应用运行起来的时候你就会看到了。
由于这都是些常规的类，所以我们通过伸缩性极强的config系统可以很容易定制子类中的任何部分。
假设我们这个应用还有一个phone版本，我们将会在其中（app/view/phone/Main.js）像这样来定制他的版本。
Ext.define（'Mail.view.phone.Main',{
extend:
'Mail.view.Main',
config:
{
title:
'Phone-specificversion',
items:
[
{
xtype:
'button',
text:
'Thisisaphone...'
}
]
}
}）;
共享子视图
上面的例子很有用，不过更常见的是共享视图中的特定部分并在不同的profile中以不同的形式把它们拼合在一起。
例如一个email应用，在平板电脑上的界面应该是左右分屏左侧放置邮件列表右侧显示当前加载邮件的内容，而手机版本同样是一个邮件列表和类似的内容视图，但这次他们只能通过card布局来摆放（这就意味着显示一个，隐藏另一个），因为显然手机上没有足够的屏幕空间来同时显示两者。
要实现这一设想我们得先创建两个共享子视图：
一个邮件列表和一个内容浏览器，下面例子里我们将省略类的config：
Ext.define（'Main.view.MessageList',{
extend:
'Ext.List',
xtype:
'messagelist',
//configgoeshere...
}）;
下面是内容浏览器：
Ext.define（'Main.view.MessageViewer',{
extend:
'Ext.Panel',
xtype:
'messageviewer',
//configgoeshere...
}）;
然后要达到目的我们得在tablet的main视图里我们要这样布局：
Ext.define（'Main.view.tablet.Main',{
extend:
'Ext.Container',
config:
{
layout:
'fit',
items:
[
{
xtype:
'messagelist',
width:
200,
docked:
'left'
},
{
xtype:
'messageviewer'
}
]
}
}）;
以上代码将在屏幕左侧创建一个200像素宽的邮件列表，然后把内容浏览器放在屏幕剩余的区域，下面我们要实现手机布局了：
Ext.define（'Main.view.phone.Main',{
extend:
'Ext.Container',
config:
{
layout:
'card',
items:
[
{
xtype:
'messagelist'
},
{
xtype:
'messageviewer'
}
]
}
}）;
这种情况下我们只需要使用一个card布局（每次只显示其子项中的一个），然后把列表视图和内容浏览视图放置其中。
我们还需要加入一些逻辑代码来告诉容器当列表中的某一项被点击时应该如何去显示内容浏览视图，但是我们已经非常轻易地在不同Profile的不同配置中复用了两个子视图。
像前面所做的那样，我们同样可以选择分别为每个Profile定制共享视图，比如创建Mail.view.phone.MessageViewer和Mail.view.tablet.MessageViewer两个子类，他们都继承自Mail.view.MessageViewer这个父类。
这样使得我们可以再次共享很多视图代码。
定制控制器
跟视图一样，很多应用程序同样有很多控制器逻辑可以跨配置共享。
他们最大的区别通常是操作流不一致，例如一个应用程序的平板profile可以允许你在一个页面上完成工作，而相同的内容在手机profile中得通过多页式的的向导来进行展现。
这里有一个简单的手机profile，它加载了一个叫做Main的视图和一个叫做Messages的控制器。
显然，这将加载pp/view/phone/Main.js和app/controller/phone/Messages.js两个文件：
Ext.define（'Mail.profile.Phone',{
extend:
'Ext.app.Profile',
config:
{
views:
['Main'],
controllers:
['Messages']
},
launch:
function（）{
Ext.create（'Mail.view.phone.Main'）;
}
}）;
现在我们知道手机和平板电脑上的控制器大部分功能都是一样的，所以我们在app/controller/Messages.js文件中先创建一个控制器的父类：
Ext.define（'Mail.controller.Messages',{
extend:
'Ext.app.Controller',
config:
{
refs:
{
viewer:
'messageviewer',
messageList:
'messagelist'
},
control:
{
messageList:
{
itemtap:
'loadMessage'
}
}
},
loadMessage:
function（item）{
this.getViewer（）.load（item）;
}
}）;
这个控制器做了三件事：
设置了视图上我们需要使用到的refs
侦听列表上的itemtap事件，当事件被触发时调用loadMessage方法
当loadMessage被调用时，加载被选中的消息到内容浏览器
现在我们很容易创建手机的专用控制器：
Ext.define（'Mail.controller.phone.Messages',{
extend:
'Mail.controller.Messages',
config:
{
refs:
{
main:
'#mainPanel'
}
},
loadMessage:
function（item）{
this.callParent（arguments）;
this.getMain（）.setActiveItem
（1）;
}
}）;
这里扩展了Messages父类控制器并增加了两个小功能：
为手机界面的主面板增加了一个ref
我们扩展了loadMessage功能，首先执行父类既有的逻辑然后把内容浏览器视图设为active。
所有父类中的配置都会被子类继承。
所以像refs这种在config中重复出现的配置属性，它们会被合并，也就是说手机的Messages控制器就会有3个refs（main、viewer、messageList）。
就像其它的继承一样，我们通过callParent来扩展一个父类中已经存在的函数。
记住Mail.controller.Messages这个父类既不需要在Application中进行依赖声明，也无需在Profile中声明，它会自动被加载，因为Mail.controller.phone.Messages控制器继承了它。
共享什么
前面例子当众我们能够共享一部分refs（但不是全部），我们也能够共享一个在控制器的control中设置了侦听的事件。
总的来说，应用程序不同Profile之间的区别越大，能共享的refs和control的config也就越少。
有一个应该被不同profile共享的控制器config是route，这些url被映射到控制器动作并被允许支持后退按钮和深度链接。
在父类中定义route是很重要的，因为不论在哪个设备上，同样的url总应该被映射到同样的内容。
例如，你的朋友使用了应用程序的phone版本，然后发送给你一个他正在看的页面链接，当你在平板电脑上点击了这个链接之后，你看到的内容也应该是一样的，只不过是tablet专用的视图展示形式而已。
确保所有的route都在父类里使得你可以保证url架构的一致性并无需关注是在什么设备上。
专用的数据模型
每个Profile定制不同的数据模型这种情况比定制控制器和视图出现的要少，所以一般不需要用子类，在这里我们仅仅指定完整的类名称就可以了。
Ext.define（'Mail.profile.Tablet',{
extend:
'Ext.app.Profile',
config:
{
models:
['Mail.model.Group']
}
}）;
升级会员 