从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
[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