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

" style="color:rgb(160,160,160); text-decoration:none; border:none; padding:0px; margin:0px 10px 0px 0px; font-size:9px; background-color:inherit">?

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'}],  //button事件在控制层写
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

" style="color:rgb(160,160,160); text-decoration:none; border:none; padding:0px; margin:0px 10px 0px 0px; font-size:9px; background-color:inherit">?

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. });

效果图：

版权声明：本文博客原创文章，博客，未经同意，不得转载。