一、创建主页目录
1)在app目录下创建main\core\user目录
2)在user目录下分别创建view、model、store、controller、component目录
建立好的文件目录如下图：
二、创建模型文件
１.model\maCrUserModel.js文件代码如下：
Ext.define('appcenter.main.core.user.model.maCrUserModel', {
extend: "Ext.data.Model",
fields: [
{ name: 'pkUser', type: 'string' },
{ name: 'userCode', type: 'string' },
{ name: 'userName', type: 'string' },
{ name: 'userAccount', type: 'string' },
{ name: 'phone', type: 'string' },
{ name: 'email', type: 'string' },
{ name: 'fkOrg', type: 'string' },
{ name: 'remark', type: 'string' },
{ name: 'isLock', type: 'int' },
{ name: 'dr', type: 'int' },
{ name: 'ts', type: 'auto' },
{ name: 'createUserId', type: 'string' },
{ name: 'createUser', type: 'string' },
{ name: 'createTime', type: 'string' },
{ name: 'modifyUserId', type: 'string' },
{ name: 'modifyUser', type: 'string' },
{ name: 'modifyTime', type: 'string' }
]
});
二、创建数据文件
１.store\maCrUserStore.js文件代码如下：
Ext.define('appcenter.main.core.user.store.maCrUserStore', {
extend: 'Ext.data.Store',
alias: 'store.maCrUserStore',
storeId:'maCrUserStore' ,
model: 'appcenter.main.core.user.model.maCrUserModel',
pageSize: 50,
proxy: {
type: "rest",
actionMethods:{
read : 'GET'
},
api: {
read : '/appcenter-main/macruserweb/pagelist'
},
reader: {
type: 'json',
rootProperty: 'data', //rootProperty 属性告诉 store 从 JSON 文件中哪个地方查找记录
totalProperty: 'totalSize'//让 store 知道从哪里读取记录总数
}
},
constructor: function () {
var me = this;
me.callParent(arguments);
}
});
三、创建表格组件
１.component\maCrUserQueryTable.js文件代码如下：
Ext.define( 'appcenter.main.core.user.component.maCrUserQueryTable', {
extend: 'Ext.grid.Panel',
layout:'fit',
alias : 'widget.maCrUserQueryTable',
id: 'maCrUserQueryTable',
columnLines:true,
editor: {
allowBlank: false
},
selModel: {
injectCheckbox: 0,
mode: "MULTI",
checkOnly: false
},
selType: "checkboxmodel",
requires: [
'Ext.toolbar.Paging',
'Ext.grid.feature.Grouping'
],
viewConfig: {
trackOver: false,
stripeRows: true
},
columns: [{
text: '用户编码',
dataIndex: 'userCode',
width: 120
},{
text: '用户名称',
dataIndex: 'userName',
width: 180
},{
text: '用户帐号',
dataIndex: 'userAccount',
width: 180
},{
text: '手机',
dataIndex: 'phone',
width: 180
},{
text: '邮箱',
dataIndex: 'email',
width: 240
}],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
ptype: 'cellediting'
})
],
initComponent : function() {
var store = Ext.create('appcenter.main.core.user.store.maCrUserStore');
this.store=store;
this.dockedItems = [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
emptyMsg: "没有数据",
displayInfo: true
}];
store.load();
this.callParent(arguments);
}
});
四、创建视图文件
１.view\maCrUser.js文件代码如下：
Ext.define('appcenter.main.core.user.view.maCrUser',{
extend: "Ext.Panel",
id: 'maCrUser',
layout:'fit',
requires : [
'appcenter.main.core.user.component.maCrUserQueryTable'
],
items :[{
layout:'border',
items:[{
region:'north',
items:[{
xtype : 'container',
style:'margin:15px 0 10px 0;',
layout: {
type: 'table',
columns: 6,
tdAttrs: {style:'padding-left:10px;' }
},
items : [{
xtype: 'button',
scale: 'medium',
iconCls : 'fa fa-plus',
name : 'add',
handler: 'openData',
text : '新建'
},{
xtype: 'button',
scale: 'medium',
iconCls : 'fa fa-pencil',
name : 'edit',
handler: 'openData',
text : '编辑'
},{
xtype: 'button',
scale: 'medium',
iconCls : 'fa fa-close',
name : 'delete',
handler:'openData',
text : '删除'
},{
xtype: 'button',
scale: 'medium',
iconCls : 'fa fa-search',
name : 'read',
handler: 'openData',
text : '查阅'
}]
},{
xtype:'form',
layout:'form',
width : '100%',
id: 'maCrUserQueryForm',
labelWidth : 85,
fieldDefaults: {
labelAlign: 'right',
msgTarget: 'side'
},
items:[{
xtype:'fieldset',
align:'center',
collapsible:true,
title : '查询条件',
items:[{
layout:'column',
defaults:{
layout:'form' ,
style:{'margin-top':'5px'},
},
items:[{
xtype: "textfield",
fieldLabel: '用户账号',
name: 'userAccount',
columnWidth:.49
},{
xtype: "textfield",
fieldLabel: '用户名称',
name: 'userName',
columnWidth:.49
},{
columnWidth:1,
style:'padding-top:20px',
tbar:['->',{
text:'查询',
iconCls : 'fa fa-search-plus',
handler:'queryData'
},'-',{
text:'重置',
iconCls : 'fa fa-stop-circle-o',
handler:'clearQueryData'
},'->']
}]
}]
}]
}]
},{
region:'center',
xtype:'maCrUserQueryTable'
}]
}]
});
五、运行结果如下图：
