Extjs4.1MVC详解

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数据集
    }
});

效果图：