Extjs4.1MVC详解

更多信息请移步：http://xiebaochun.github.io/

app.js

[javascript] view
plaincopyprint?

1. Ext.onReady(function(){  
2.    Ext.QuickTips.init();  
3.    Ext.Loader.setConfig({  //开启自动加载功能  
4.        enabled:true  
5.    });  
6.    Ext.application({    
7.       name:'AM',      //自定义命名空间，通常都定义为AM  
8.       appFolder:'app',  //配置Ext框架所在的文件目录  
9.       launch:function(){   //在所有资源都载入成功后运行  
10.           Ext.create('Ext.container.Viewport',{    
11.               items:{  
12.                   width:1500,  
13.                   height:500,  
14.                   xtype:'mainlayout' //这里引用了自定义的组件mainlayout(视图层的MainLayout的别称)  
15.               }  
16.           });  
17.       },  
18.       controllers:[  //加载所有的控制器  
19.           'UserController'  
20.       ]  
21.    });  
22. });  

控制层：

UserController.js

[javascript] view
plaincopyprint?

1. Ext.define('AM.controller.UserController',{  
2.     extend:'Ext.app.Controller',//继承Ext.app.Controller类  
3.     init:function(){  
4.         this.control({   //控制事件处理  
5.             'userlist button[id=add]':{    
6.                 click:function(){  
7.                       //do something  
8.                 }  
9.             }               
10.         });  
11.     },  
12.     views:[  
13.          'UserList',   //放在MainLayout之前加载  
14.          'DeptList',  
15.          'MainLayout'       
16.     ],  
17.     stores:[  
18.          'UserStore',  
19.          'DeptStore'  
20.     ],  
21.     models:[  
22.          'UserModel'  
23.     ]  
24. });  

Model层：

UserModel.js

[javascript] view
plaincopyprint?

1. Ext.define('AM.model.UserModel',{  
2.      extend:'Ext.data.Model',  //用来绑定到grid表字段  
3.      fields:[  
4.          {name:'id',type:'string'},  
5.          {name:'name',type:'auto'},    
6.      {name:'password',type:'string'},  
7.      {name:'birth',type:'auto'},  
8.          {name:'email',type:'auto'},  
9.          {name:'intro',type:'string'}  
10.     ]  
11. });  

Store层：

UserStore.js

[javascript] view
plaincopyprint?

1. Ext.define('AM.store.UserStore',{  
2.     extend:'Ext.data.Store',  
3.     model:'AM.model.UserModel',  
4.     proxy:{  
5.        type:'ajax',  
6.        url:'/ExtjsTest/test/readuser',  
7.        reader:{  
8.             type:'json',  
9.             root:'userinfo'  
10.        },  
11.        writer:{  
12.            type:'json'  
13.        }  
14.     },  
15.     autoLoad:true  
16. });  

DeptStore.js

[javascript] view
plaincopyprint?

1. Ext.define('AM.store.DeptStore',{  
2.     extend:'Ext.data.TreeStore',  
3.     defautRootId:'root',    
4.     proxy:{  
5.        type:'ajax',  
6.        url:'/ExtjsTest/test/showuser',  
7.        reader:{  
8.             type:'json'  
9.        },  
10.        writer:{  
11.            type:'json'  
12.        }  
13.     },  
14.     autoLoad:true  
15. });  

视图层：

UserList.js

[javascript] view
plaincopyprint?

1. Ext.define('AM.view.UserList',{  
2.         extend:'Ext.grid.Panel', //GridPanel组件  
3.         alias:'widget.userlist', //别名  
4.     //  title:'用户信息',  
5.         width:500,  
6.         height:500,  
7.         store:'UserStore',  //绑定UserStore数据集  
8.         selModel:{  
9.            selType:'checkboxmodel'  
10.         },  
11.         tbar:[{text:"添加",id:'add'},{text:'删除',id:'del'},{text:'保存',id:'save'}],  //按钮事件在控制层写  
12.         columns:[{header:'编号',dataIndex:'id',field:{xtype:'textfield',allowBlank:false}},    
13.              {header:'姓名',dataIndex:'name',field:{xtype:'textfield',allowBlank:false}},  
14.              {header:'密码',dataIndex:'password',field:{xtype:'textfield',allowBlank:false}},  
15.              {header:'生日',dataIndex:'birth',field:{xtype:'datefield',allowBlank:false}},  
16.              {header:'邮件',dataIndex:'email',field:{xtype:'textfield',allowBlank:false}},  
17.              {header:'简介',dataIndex:'intro',field:{xtype:'textfield',allowBlank:false}}],  
18.        ]  
19. });  

DeptList.js

[javascript] view
plaincopyprint?

1. Ext.define('AM.view.DeptList',{  
2.     extend:'Ext.tree.Panel',  //TreePanel组件  
3.     alias:'widget.deptlist',  
4.     //  title:'树',  
5.     width:300,  
6.     height:500,  
7.         rootVisible:false,   
8.         dockedItems:[{  
9.            xtype:'toolbar',  
10.            dock:'left',  
11.            items:[  
12.              {xtype:'button',text:'add',id:'add'},     
13.              {xtype:'button',text:'delete',id:'del'},  
14.              {xtype:'button',text:'copy',id:'copy'}  
15.         ]  
16.       },  
17.       store:'DeptStore',  //绑定DeptStore数据集  
18.     }  
19. });  

效果图：