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:{
                  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:'用户信息',
        500,
        height:500,
        store:'UserStore',  //绑定UserStore数据集
        selModel:{
           selType:'checkboxmodel'
        },
        tbar:[{text:"加入",id:'add'},{text:'删除',id:'del'},{text:'保存',id:'save'}],  //button事件在控制层写
        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:'树',
    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数据集
    }
});

效果图：

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