Sencha Touch 2 入门心得

涉足了一下sencha touch ，它也属于ExtJs框架的一种，看了很多天，糊里糊涂的，虽然有API，可是不懂它的机制还是没啥用……

后来看了很多博文，才略懂一二啊

或者步骤可以这样说：

1、下载sencha touch 的开发文档，里面包括了example ，2.1.0版本及低版本的还包含API，新版本的连到了官网。
2、下载Sencha Cmd 工具，利用DOC命令，可以直接build一个app初版。
3、sencha touch 开发工具配置代码提示，具体方法可以网上再搜。

4、了解sencha touch 的机制：
网上看了很多入门代码，稍微总结一些心得，不知道是否正确，请大牛指教

（1）用DOC命令build出来的app初版里面包含以下

• app – 放着模型(Models)，视图(Views)，控制器(Controllers)和存储(Stores)的目录。
• app.js – 主Javascript入口，在这里开始编辑js。
• app.json – 配置文件，用来创建你的应用的缩小(minified)版本。
• index.html – 你的应用的HTML文件。
• packager.json – 配置文件，用来打包成iOS和Android应用。
• resources – CSS和图片。
• sdk(touch) – Sencha Touch SDK的拷贝。你不应该修改这个文件夹中的内容。

（2） Ext.application()和Ext.setup()
一个app一开始，主函数是这两个的其中一个 。
Ext.setup() 是微型的，用于移动设备页面级别的构建；
而Ext.application() 可以实现Ext.Setup 的所有功能，并且创建应用对象，可以充分利用sencha创建的各种应用和功能。
从使用角度来看 Ext.application 适用于MVC框架（比较大型的项目），Ext.setup 则不适用。
Ext.applications 提供深度的应用的连接和访问历史的支持，通过路由引擎技术，可以实现页面的刷新及历史页面的回退等等功能。
Ext.applications()搭配 launch:function(){}

Ext.application({ name: 'Sencha', launch: function() {} })

Ext.setup()搭配onReady:function(){}

 Ext.setup({ name: 'Sencha', onReady: function() {} })

（3）Ext.define(string,object)
Ext.define(string,object)是自定义添加类（组件），也很常用，不多解释，发链接好了
http://extjs.org.cn/node/544 （还有其他五篇，也可以看一下）
主要要注意的是，string 是类（组件）的名字，object是对象{}，里面包含各种自定义的属性和方法
自定义出来的类（组件），使用前必须用Ext.creat() new一下

（4）xtype和xclass ，声明类型
每当使用xtype，就要牵扯一些东西，应该说是前提吧

Ext.Loader.setPath({
'Ext': 'touch/src'   //这里用"Ext"代替组件的路径，在源文件那里可以找到组件的文件夹群，一般是在src下，而且一般app.js是跟touch同级
 });

Ext.application({
name: 'myapp',    //app的名字
requires: [             //xtype，要new对象(组件)，要先requires它们
'Ext.MessageBox',    //这里是引用sencha touch自带的组件，Ext代表刚才设置的路径，后面的MessageBox等代表引用哪个组件
'Ext.Video',
'Ext.TitleBar'
],
launch:function(){}
})

当上面requires了组件之后，下面xtype就可以这样使用了

xtype: 'titlebar' //一般用在items下面的组件的属性

即

items : [{
 xtype : 'titlebar',
 docked : 'top',
 title : '预约看房',
 items : []
}]

==============================华丽丽的分割线==============================
xtype是xclass的简称
举例
先Ext.define()一个类

Ext.define({
 'AddressBook.view.Main',
{
......
}
})

然后创建并添加到viewport

Ext.Viewport.add({
 xclass: 'AddressBook.view.Main'
})

或者创建并添加到某容器里面

items : [{
 xclass : "AddressBook.view.Main"  //这样就整个组件了
}]

xclass 就等于 Ext.create(name)
即

Ext.Viewport.add( Ext.create( 'AddressBook.view.Main' ) )

注意：大括号没了

（5）xtype : ‘button’ 对应事件函数 handler : function(){}

暂时学到这点东西，如果有后续，会加上

作者:Hedgehog
原文:http://hedgehogking.com/?p=578