Sencha Touch 开发的 应用
同样做为MVC结构，ExtJS和Touch有很多东西是一样的，总体的思路是相同的
在Sencha Touch 里，我们会处理到以下类
Ext.app.Application 这是应用程序类
Ext.app.Controller 这是控制器类
Ｅxt.Container, Ext.Component 这些类及其子类用于提供 视图
Ext.data.Model 用于构造一个model, Ext.data.Store可以识别的
Ext.data.Store 这个类可以包含多个Ext.data.Model,即集合。用于展示列表。
文件夹结构
打到我们在第一章创建的SenchaArchitectureBook项目， 并创建一个touchapp目录
增加以下文件和目录
app 这是主程序目录。 其中包含model, view,controller, store 目录
data 这个目录放JSON 数据文件
sencha-touch-2.0.0 ExtJS 框架文件
app.js 这个应用的单点入口文件
index.html 应用的入口html文件
这是完成后的目录结构图
Model
我们将创建以下模型
User
Department
User 在app\model\User.js 中输入以下代码
Ext.define('AM.model.User',{
extend:'Ext.data.Model',
config:{
fields:['id','name','email','department']
}
});
我们用以上代码定义 User模型
Department
在app\model\Department.js 中输入以下代码
Ext.define('AM.model.Department',{
extend:'Ext.data.Model',
config:{
fields:['code','name','location']
}
});
我们定义了Department 模型
Store
在这个应用中我们将有以下的集合
Users
Departments
Users
在app\store\Users.js中输入以下代码
1 Ext.defind('AM.store.Users',{
2 extend:'Ext.data.Store',
3 config:{
4 autoLoad:true,
5 model:'AM.model.User',
6 storeId:'Users',
7 proxy:{
8 type:'ajax',
9 api:{
10 read:'data/users.json'
11 },
12 reader:{
13 type:'json',
14 rootProperty:'users'
15 }
16 }
17 },
18 filterUsersByDepartment:function(deptCode) {
19 this.clearFilter();
20 this.filter([{
21 property:'department',
22 value:deptCode
23 }]);
24 },
25 refresh:function(){
26 this.clearFilter();
27 }
28 });
这个是user 模型的集合
Departments
1 Ext.define('AM.store.Departments',{
2 extend:'Ext.data.Store',
3 model: 'AM.model.Department',
4 config:{
5 autoLoad:true,
6 model:'AM.model.Department',
7 storeId:'Departments',
8 proxy:{
9 type:'ajax',
10 api:{
11 read:'data/departments.json'
12 },
13 reader:{
14 type:'json',
15 rootProperty:'departments'
16 }
17 }
18 }
19 });
包含Departments模型
View
这个应用有以下视图
User 列表
编辑User
Department 列表
User 列表
在/view/user/List.js输入以下代码
1 Ext.define('AM.view.user.List' ,{
2 extend: 'Ext.Container',
3 alias : 'widget.userlist',
4 config: {
5 ui: 'light',
6 layout: {
7 type: 'fit'
8 },
9 items: [
10 {
11 xtype: 'toolbar',
12 docked: 'top',
13 title: 'All Users',
14 defaults: {
15 iconMask: true
16 },
17 items: [{
18 xtype: 'spacer'
19 },
20 {
21 iconCls: 'refresh',
22 ui: 'confirm',
23 handler: function(){
24 this.up('userlist').down('list').getStore().refresh();
25 this.up('toolbar').setTitle('All Users');
26 }
27 }]
28 },
29 {
30 xtype: 'list',
31 height: '100%',
32 ui: 'round',
33 itemTpl: [
34 '<div style="float:left;">{name}</div>',
35 '<div style="float:left;position:absolut
36 e;padding-left:150px;">{email}</div>'
37 ],
38 store: 'Users',
39 onItemDisclosure: true
40 }
41 ]
42 }
43 });
代码定义了User List 视图 ，是通过扩展Container类。
它展示了users 列表，并使用了disclosure 选项(查看更多说明，请看Sencha Touch API文档 Ext.dataview.List)和一个有标题和刷新按钮的导航栏。 列表使用Users集合来加载数据 类似于ExtJS-开发的应用， 刷新按钮的动作是作为本视图的逻辑放在view里做的
userlist 将以xtype来标这个视图
User Edit
在app\view\user\Edit.js里输入以下代码
1 Ext.define('AM.view.user.Edit',{
2 extend:'Ext.form.Panel',
3 alias:'widget.useredit',
4 config:{
5 ui:'light',
6 items:[
7 {
8 xtype:'titlebar',
9 docked:'top',
10 title:'Edit User'
11 },
12 {
13 xtype:'textfield',
14 label:'Name',
15 name:'name',
16 labelWidth:'50%',
17 required:true
18 },
19 {
20 xtype:'textfield',
21 label:'Email',
22 name:'emial',
23 labelWidth:'50%',
24 required:true
25 },
26 {
27 xtype:'toolbar',
28 docked:'bottom',
29 items:[{
30 xtype:'button',
31 margin:10,
32 align:'left',
33 ui:'confirm',
34 action:'save',
35 text:'Save'
36 },
37 {
38 xtype:'spacer'
39 },
40 {
41 xtype:'button',
42 margin:10,
43 align:'right',
44 ui:'decline',
45 action:'cancel',
46 text:'Cancel'
47 }
48 ]
49 }
50 ]
51 }
52 });
通过扩展form panel 我们定义了Edit User视图
它包含两个text 元素和一个包含保存和退出按钮的底部工具栏
useredit alias 将作为xtype在视图中使用
Department List
在app\view\department\List.js文件里输入以下代码
1 Ext.define('AM.view.department.List',{
2 extend:'Ext.Container',
3 alias:'widget.departmentlist',
4 config:{
5 ui:'light',
6 layout:{
7 type:'fit'
8 }
9 items:[
10 {
11 xtype:'titlebar',
12 docked:'top',
13 title:'Departments'
14 },
15 {
16 xtype:'list',
17 height:'100%',
18 ui:'round',
19 itemTpl:[
20 '<div style="float:left;">{name}</div>',
21 '<div style="float:left;position:absolute;padding-left:150px;">{location}</div>'
22 ],
23 store:'Departments',
24 onItemDisclosure:false
25 }
26 ]
27 }
28 });
Department List 视图 扩展了Container 类， 它没有使用disclosure 选项来展示departments列表
列表使用Departments 集合来加载数据。
Controller 控制器
在这个应用程序中，我们有以下控制器
Users
Departments
Users 在app\controller\User.js 文件中输入以下代码
1 Ext.define('AM.controller.Users',{
2 extend:'Ext.app.Controller',
3 config:{
4 stores:['Users'],
5 models:['User'],
6 views:['user.Edit','user.List'],
7 refs:{
8 usersPanel:'userlist'
9 }
10 },
11 init:function(app) {
12 this.control({
13 'userlist list':{
14 disclose:thid.editUser
15 },
16 'useredit button[action=save]':{
17 tap:this.updateUser
18 },
19 'useredit button[action=cancel]':{
20 tap:this.cancelEditUser
21 }
22 })
23
24 app.on('departmentSelected', function(app,model){
25 this.getUsersStore().filterUsersByDepartment(model.get('code'));
26 this.getUsersPanel().down('toolbar').setTitle(model.get('name') + ' Users';
27
28 )
29 },this);
30 },
31
32 editUser: function(view, model, t,index,e,eOpts) {
33 var edit = Ext.create('AM.view.user.Edit');
34 Ext.Viewport.add(edit);
35 edit.setRecord(model);
36 Ext.Viewport.setActiveItem(edit);
37 } ,
38 updateUser:function(button,e,eOpts) {
39 var form = button.up('formpanel');
40 var record = form.getRecord(),
41 values = form.getValues();
42 record.set(values);
43 this.getUsersStore().sync();
44 Ext.Viewport.setActiveItem(0);
45
46 },
47 cancelEditUser:function(button,e,eOpts) {
48 Ext.Viewport.setActiveItem(0);
49 }
50 ,
51 showUsersList:function(){
52 var list = Ext.create('AM.view.user.List');
53 Ext.Viewport.add(list);
54 },
55 getUsersStore:function() {
56 return this.getUsersPanel().down('list').getStore();
57 }
58
59
60 });
我们用以上代码来定义Users controller
Departments
在app\controller\Departments.js 文件中输入以下代码
1 Ext.define('AM.controller.Departments',{
2 extend:'Ext.app.Controller',
3 config:{
4 stores:['Departments'],
5 models:['Department'],
6 views:['department.List']
7 },
8 init: function(){
9 this.control({
10 'departmentlist list':{
11 itemtap:this.showDepartmentUser
12 }
13 });
14 },
15 showDepartmentUser:function(view,idx,t,model,e,eOpts) {
16 var app = this.initialConfig.application;
17 app.fireEvent('departmentselected',app,model);
18 }
19 })
以上代码定义了Departments 控制器
Application
在app.js文件中输入以下代码
1 Ext.application({
2 name:'AM',
3 controllers:['Users','Departments'],
4 launch:function(){
5 var config={
6 layout:'fit',
7 items:[{
8 xtype:'departmentlist',
9 docked:'left',
10 400
11 },{
12 xtype:'userlist'
13 }]
14 };
15 Ext.Viewport.add(config);
16 }
17 });
在最后一行， 我们新增加了面板， 将department list 和user list 加入到viewport里。
因为viewport概念对于触摸类设备来说不太直接， 框架使用了一些静态方法封装了这些区别，来供我们使用。例如add方法，让我们把内容加入到页面