ExtJS4的MVC模式实例

MVC模式， 想必大家都很清楚。  Model  -  View - Controller。

ExtJS在4.0以后也开始引入了MVC模式， 程序的结构也就变得规范。

开发者可以利用MVC的设计模式规划了开发流程。

下面的一个MVC模式的小例子。

在demo文件夹里就是ExtJS的MVC架构。

先来看界面。

demo.html是我们要登陆的界面，只需在demo.html中引入app.js文件即可。

app.js定义这个MVC模式的内容。 app文件夹是又controller , model, store, view文件夹。

app.js

[javascript]  view plain copy

1. Ext.onReady(function() {  
2.       
3.     Ext.QuickTips.init();  
4.       
5.     Ext.Loader.setConfig({  
6.         enabled : true  
7.     });  
8.       
9.     Ext.application({  
10.         name: 'app',  
11.         appFolder: 'app',  
12.         launch: function() {  
13.             Ext.create('Ext.container.Viewport', {  
14.                 items: {  
15.                     xtype : 'mainLayout'  
16.                 }  
17.             });  
18.         },  
19.         controllers : [  
20.             'demoController'  
21.         ]  
22.     });  
23.       
24. });  

定义mvc模式的文件夹为app。 应用程序的名字也是app。

demoModel.js

[javascript]  view plain copy

1. Ext.define('app.model.demoModel',{  
2.     extend : 'Ext.data.Model',  
3.     fields : [  
4.         {name : 'id' , type : 'int'},  
5.         {name : 'name' , type : 'string'},  
6.         {name : 'phoneNumber' , type : 'string'}  
7.     ]  
8. })  

demoStore.js

[javascript]  view plain copy

1. var data = {  
2.     users: [  
3.         {  
4.             id: 1,  
5.             name: 'Ed Spencer',  
6.             phoneNumber: '555 1234'  
7.         },  
8.         {  
9.             id: 2,  
10.             name: 'Abe Elias',  
11.             phoneNumber: '666 1234'  
12.         }  
13.     ]  
14. };  
15.   
16. Ext.define('app.store.demoStore',{  
17.     extend : 'Ext.data.Store',  
18.     autoLoad: true,  
19.     model : 'app.model.demoModel',  
20.     data : data,  
21.     proxy: {  
22.         type: 'memory',  
23.         reader: {  
24.             type: 'json',  
25.             root: 'users'  
26.         }  
27.     }  
28. })  

这里由于是演示。我们使用了内存代理。 

deptList.js

[javascript]  view plain copy

1. Ext.define('app.view.deptList', {  
2.     extend : 'Ext.grid.Panel',  
3.     alias : 'widget.deptList',  
4.     frame : true,  
5.     store : 'demoStore',  
6.     frame : true,  
7.     multiSelect : true,  
8.       
9.     columns : [  
10.         {header : '编号', dataIndex : 'id', width : 100},  
11.         {header : '姓名', dataIndex : 'name', width : 100},  
12.         {header : '电话', dataIndex : 'phoneNumber', width : 200}  
13.     ],  

[javascript]  view plain copy

1.   

[javascript]  view plain copy

1. <span style="white-space:pre">  </span>tbar:[{  
2. <span style="white-space:pre">      </span>xtype: 'button', text: '添加'  
3. <span style="white-space:pre">  </span>},{  
4. <span style="white-space:pre">      </span>xtype: 'button', text: '删除'  
5. <span style="white-space:pre">  </span>},{  
6. <span style="white-space:pre">      </span>xtype: 'button', text: '修改'  
7. <span style="white-space:pre">  </span>}],  
8.       
9.       
10.     selModel : {  
11.         selType : 'checkboxmodel'  
12.     }  
13.       
14.       
15. });  

demoView.js只是一个普通的panel。 里面放这个grid。

注意上面的这个文件定义的时候必须以app开头。 因为我们在app.js里定义了应用程序的名字为app。

view文件夹以app.view.*开始。  model文件夹以app.model.*开始。 以此类推。

最后让我们来看下demoController.js

[javascript]  view plain copy

1. Ext.define('app.controller.demoController', {  
2.     extend: 'Ext.app.Controller',  
3.     init: function() {  
4.         this.control( {  
5.               
6.             'deptList button[text=添加]': {  
7.                 click: function(b) {  
8.                     alert('添加');  
9.                 }  
10.             },  
11.               
12.             'deptList button[text=删除]': {  
13.                 click: function(b) {  
14.                     alert('删除');  
15.                 }  
16.             },  
17.               
18.             'deptList button[text=修改]': {  
19.                 click: function(b) {  
20.                     alert('修改');  
21.                 }  
22.             }  
23.               
24.         }  
25.     )},  
26.     models : ['demoModel'],  
27.     stores : ['demoStore'],  
28.     views : ['demoView','deptList']  
29. });  

有三个属性:

models， stores， views。  分别代表三个文件夹中自己定义的控件，model和store

我们在三个按钮的逻辑处理放到了controller中处理。 这样就很好的实现了代码分离。

最后附上源代码。。