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数据集
}
});
效果图：
