Sencha touch2详细资料整理一.docxVIP

Senchatouch2详细资料整理一By yjj at 2012-03-23几大特性基于最新的WEB标准 – HTML5，CSS3，Java。整个库在压缩和gzip后大约80KB，通过禁用一些组件还会使它更小。 支持世界上最好的设备。Beta版兼容Android和iOS，Android上的开发人员还可以使用一个专为Android定制的主题。 增强的触摸事件。在touchstart等标准事件基础上，增加了一组自定义事件数据集成，如tap、swipe、pinch、rotate等。 数据集成。提供了强大的数据包，通过Ajax、JSONp、YQL等方式绑定到组件模板，写入本地离线存储。Ext.Application vs Ext.Setup的区别用Ext.Application可以作mvc的开发. 而ext.setup就不行.A、Examples中采用的 —— Ext.setup方式??//使用setup来启动主程序 Ext.setup({ ????tabletStartupScreen: tablet_startup.png, //tablet设备时主屏中间出现的背景图片 ????phoneStartupScreen: phone_startup.png, //phone设备时主屏中间出现的背景图片 ????icon: icon.png, glossOnIcon: false, //跟Extjs一样，主程序代码卸载onReady里面 ????onReady: function(options) { ????????//TODO ????} });B、quick start中采用的 —— Ext.Application方式?newExt.Application({ ????launch: function() { ????????//TODO ????} });Hello world我采用的调试工具:Aptana Studio 3.0.9搭配Google Chrome 浏览器. 配置过程就不说了. 我的目录结构如下:在Aptana Studio新建项目完成后. 从浏览器拖到Aptana左面的框里，选择copy file. 文件就会将文件自动的复制你的项目目录. 说明:src目录为sencha-touch文件夹里的src供sencha-touch-debug.js调用的源文件.然后：在index.html内容如下:!DOCTYPE htmlhtmlheadmeta http-equiv=Content-Type content=text/html; charset=UTF-8titlehello world/titlelink rel=stylesheet type=text/css href=css/sencha-touch.css /style type=text/css#loggerb{color:#555;}#loggerpre{margin:5px;}#loggerp{margin:0;}/stylescript type=text/javascript src=js/sencha-touch-debug.js/scriptscript type=text/javascript src=js/app.js/script/headbody/body/htmlApp.js文件内容如下:Ext.application({ name: Sencha, launch: function() { Ext.create(Ext.Panel, { fullscreen: true, html: Hello World });}});Index.html里的css/sencha-touch.css文件为sencha-touch目录里resources/css调用的源文件.Mvc目录结构Mvc结构是通常用的数据结构. 做起应用来也比较标准M数据模型：在应用程序中表示一种数据模型，比如一个电子商务应用程序可能会有用户、产品、订单等不同的数据模型V视图：负责将数据展示给用户，并扩充 Sencha Touch 的内置组件。（译者注：你可以理解为用户界面的一个个组成部分）C控制器：处理应用程序的交互，侦听用户的轻触、猛击（译者注：真实意思是长按？）等事件并做出相应的响应?S数据存储器：负责把数据加载到你的应用并以列表（List）或者数据视图（DataView）等形式表现出来P设备配置：可以使你为平板电脑和手机等不同设备，轻易定制应用程序用户界面，并尽可能多的共享代码?Sencha touch2的mvc图示如下:对象通常是你开发一个ST应用时需要定义的第一个东西，类似下面