jQuery MiniUI,Ajax Web开发

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