sencha touch mvc

从helloword开始，效果图如下：
[img][/img]
[img]http://dl2.iteye.com/upload/attachment/0105/1693/c898808f-14db-3aa8-a0a7-3c9cec8c90c0.png[/img]

Sencha-Touch2.3.1学习——MVC示例
[img][/img]
[img]http://dl2.iteye.com/upload/attachment/0105/1705/b796966d-1644-3b72-9236-c70ac999a0a4.jpg[/img]


MVC示例目录结构，如下：
[img][/img]
[img]http://dl2.iteye.com/upload/attachment/0105/1711/27c5fd73-3b1f-36d9-a2e6-717be612c7d9.png[/img]

Sencha-Touch2.3.1学习——MVC示例
集成开发环境——sencha architect3
Sencha-Touch2.3.1学习——MVC示例

源码解析，如下：
// 控制器：MyController.js
Ext.define('mvc.controller.MyController', { // 定义一个类mvc.controller.MyController（参考：ClassManager.js）
extend: 'Ext.app.Controller', // 继承自Ext.app.Controlle

config: { // 配置信息（每个类都可以指定一个config配置信息）
refs: { // 定义视图的引用信息（是一个键值对）可以使用getXXX方式访问；
// 值会使用ComponentQuery选择器匹配；也可以使用{selector: 'xxx', xtype: 'xxx'}来选择；
detailPanel: 'mainview #detailPanel'
},

control: { // 配置信息
"mainview #runButton": {
tap: 'runAction' // 指定按钮单击事件的回调函数
}
}
},

runAction: function(target) { // 回调函数定义

// Create new model
var model = Ext.create('mvc.model.MyModel', { // 创建类mvc.model.MyModel
id: 123,
text: 'Hello World'
});

// Bind model to view
this.getDetailPanel().setRecord(model); // 获取上面定义的面板detailPanel，然后将模型设置到该视图上；

}

});

说明
1 控制器继承自Ext.app.Controller；
2 定义视图的引用，使用config/refs；
3 绑定视图的事件，使用control；可以直接使用refs定义的key或者使用ComponentQuery的表达式来指定control的key，value指向一个回调函数；回调函数内可以使用getXXX访问refs定义的视图；
4 定义URL访问路径，使用roues定义URL与Controller的映射（参考API说明）；
5 config/init可以指定初始化回调函数；
6 config/launch可以指定启动回调函数；


// 视图：MainView.js
Ext.define('mvc.view.MainView', { // 定义类mvc.view.MainView
extend: 'Ext.Panel', // 继承自Ext.Panel
alias: 'widget.mainview', // 取别名为widget.mainview

requires: [ // 组件依赖声明
'Ext.Button',
'Ext.Panel',
'Ext.XTemplate'
],

config: { // 配置信息
itemId: 'mainView', // 视图容器内的唯一标识
padding: 10, // CSS padding:10px;
items: [ // 子项定义
{
xtype: 'button', // 按钮
itemId: 'runButton',
text: 'Run Action'
},
{
xtype: 'panel', // 面板
itemId: 'detailPanel',
padding: 10,
tpl: [ // 组件使用了Ext.XTemplate模板，可以指定一个字符串或者是字符串数组来显示内容；
'',
'
ID: {id}
', // 使用{xxx}来访问模型数据
'
Text: {text}
'
]
}
]
}

});

// 数据模型：MyModel.js
Ext.define('mvc.model.MyModel', { // 定义一个类mvc.model.MyModel
extend: 'Ext.data.Model', // 继承自Ext.data.Model

requires: [ // 组件依赖声明
'Ext.data.Field'
],

config: { // 配置信息
fields: [ // 字段定义
{
name: 'id', // 字段名称
type: 'int' // 字段类型
},
{
name: 'text',
type: 'string'
}
]
}
});

// 数据仓库：MyStore.js
Ext.define('mvc.store.MyStore', { // 定义类mvc.store.MyStore
extend: 'Ext.data.Store', // 继承自Ext.data.Store

requires: [ // 组件依赖声明
'mvc.model.MyModel'
],

config: { // 配置信息
model: 'mvc.model.MyModel', // 指定数据模型
storeId: 'MyStore' // 指定一个ID
}
});

// 应用程序入口：app.js
Ext.Loader.setConfig({ // 设置加载需要的配置信息

});

Ext.application({ // 运行一个应用程序
models: [ // 指定模型
'MyModel'
],
views: [ // 指定视图
'MainView'
],
controllers: [ // 指定控制器
'MyController'
],
name: 'mvc', // 名字

launch: function() { // 启动方法

Ext.create('mvc.view.MainView', {fullscreen: true}); // 创建MainView视图并全屏显示
}

});

说明
launch方法执行顺序如下：
1. Controller#init functions called
2. Profile#launch function called
3. Application#launch function called
4. Controller#launch functions called
参考：Ext.app.Application