app.js
-
Ext.onReady(function(){
-
Ext.QuickTips.init();
-
Ext.Loader.setConfig({
-
enabled:true
-
});
-
Ext.application({
-
name:‘AM‘,
-
appFolder:‘app‘,
-
launch:function(){
-
Ext.create(‘Ext.container.Viewport‘,{
-
items:{
-
width:1500,
-
height:500,
-
xtype:‘mainlayout‘
-
}
-
});
-
},
-
controllers:[
-
‘UserController‘
-
]
-
});
-
});
控制层：
UserController.js
-
Ext.define(‘AM.controller.UserController‘,{
-
extend:‘Ext.app.Controller‘,
-
init:function(){
-
this.control({
-
‘userlist button[id=add]‘:{
-
click:function(){
-
-
}
-
}
-
});
-
},
-
views:[
-
‘UserList‘,
-
‘DeptList‘,
-
‘MainLayout‘
-
],
-
stores:[
-
‘UserStore‘,
-
‘DeptStore‘
-
],
-
models:[
-
‘UserModel‘
-
]
-
});
Model层：
UserModel.js
-
Ext.define(‘AM.model.UserModel‘,{
-
extend:‘Ext.data.Model‘,
-
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‘,
-
alias:‘widget.userlist‘,
-
-
width:500,
-
height:500,
-
store:‘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‘,
-
alias:‘widget.deptlist‘,
-
-
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‘,
-
}
-
});
效果图：
Extjs4.1MVC详解,布布扣,bubuko.com
Extjs4.1MVC详解
原文：http://blog.csdn.net/xiebaochun/article/details/36414587
