首页 > 代码库 > Extjs4.1MVC详解

Extjs4.1MVC详解

2024-07-10 13:56:03   222人阅读

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. });  
效果图：


联系
我们