Extjs4.1MVC详解

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

app.js

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

控制层：

UserController.js

 Ext.define('AM.controller.UserController',{
     extend:'Ext.app.Controller',//继承Ext.app.Controller类
     init:function(){
         this.control({   //控制事件处理
             'userlist button[id=add]':{
                 click:function(){
                       //do something
                 }
             }
         });
     },
     views:[
          'UserList',   //放在MainLayout之前加载
          'DeptList',
          'MainLayout'
     ],
     stores:[
          'UserStore',
          'DeptStore'
     ],
     models:[
          'UserModel'
     ]
 });

Model层：

UserModel.js

 Ext.define('AM.model.UserModel',{
      extend:'Ext.data.Model',  //用来绑定到grid表字段
      fields:[
          {name:'id',type:'string'},
          {name:'name',type:'auto'},
      {name:'password',type:'string'},
      {name:'birth',type:'auto'},
          {name:'email',type:'auto'},
          {name:'intro',type:'string'}
     ]
 });

Store层：

UserStore.js

 Ext.define('AM.store.UserStore',{
     extend:'Ext.data.Store',
     model:'AM.model.UserModel',
     proxy:{
        type:'ajax',
        url:'/ExtjsTest/test/readuser',
        reader:{
             type:'json',
             root:'userinfo'
        },
        writer:{
            type:'json'
        }
     },
     autoLoad:true
 });

DeptStore.js

 Ext.define('AM.store.DeptStore',{
     extend:'Ext.data.TreeStore',
     defautRootId:'root',
     proxy:{
        type:'ajax',
        url:'/ExtjsTest/test/showuser',
        reader:{
             type:'json'
        },
        writer:{
            type:'json'
        }
     },
     autoLoad:true
 });

视图层：

UserList.js

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

DeptList.js

 Ext.define('AM.view.DeptList',{
     extend:'Ext.tree.Panel',  //TreePanel组件
     alias:'widget.deptlist',
     //  title:'树',
     width:300,
     height:500,
         rootVisible:false,
         dockedItems:[{
            xtype:'toolbar',
            dock:'left',
            items:[
              {xtype:'button',text:'add',id:'add'},
              {xtype:'button',text:'delete',id:'del'},
              {xtype:'button',text:'copy',id:'copy'}
         ]
       },
       store:'DeptStore',  //绑定DeptStore数据集
     }
 });

效果图：