Extjs-Extjs入门三层架构搭建

阅读更多

Ext MVC 三层详解：
// 程序入口 --  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  
});  

// 视图层
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}}],  
       ]  
});