ExtJS6.2开发-用户管理(二)
程序员文章站
2024-02-26 19:06:46
...
一、创建控制文件
1)在app目录下找到main\core\user\controller目录创建maCrUserController.js
2)maCrUserController.js文件代码如下：
Ext.define('appcenter.main.core.user.controller.maCrUserController', {
extend: 'Ext.app.ViewController',
alias: 'controller.maCrUserController'
});
二、创建详情页视图文件
1)在app目录下找到main\core\user\view目录创建maCrUserData.js
2)maCrUserData.js文件代码如下：
Ext.define('appcenter.main.core.user.view.maCrUserData', {
extend: 'Ext.window.Window',
alias : 'widget.maCrUserData',
id: 'maCrUserData',
controller : 'maCrUserController',
requires : [
'appcenter.main.core.user.controller.maCrUserController',
'appcenter.main.core.user.component.maCrUserDataForm'
],
layout: 'fit',
fullscreen :true,
draggable:false,//拖动
resizable:false, //变大小
width:'100%',
height:'100%',
minWidth:document.body.clientWidth ,
minHeight:document.body.clientHeight ,
frame:false,
modal: true,
closable:false,
closeAction:'destroy',
autoShow : false,
title:'用户管理--新增',
items:[{
layout:'form',
items:[{
xtype:'fieldset',
align:'center',
items:[{
xtype:'maCrUserDataForm'
}]
}],
tools:[{
type:'close',
tooltip:'关闭',
listeners:{
click:function(){
this.up("window").close();
}
}
}],
buttons :['->', {
xtype: 'button',
id: 'editButton',
iconCls:'fa fa-pencil',
handler: function () {
},
text:'编辑'
},{
xtype: 'button',
id : 'saveButton',
iconCls:'fa fa-save',
handler: 'saveData',
text:'保存'
},{
xtype: "button",
iconCls:'fa fa-close',
handler: function () {
this.up("window").close();
},
text : '关闭'
}, '->'],
initComponent: function () {
this.callParent(arguments);
},
renderTo:Ext.getBody()
});
三、创建窗体组件文件
1)在app目录下找到main\core\user\component目录创建maCrUserDataForm.js
2)maCrUserDataForm.js文件代码如下：
Ext.define('appcenter.main.core.user.component.maCrUserDataForm', {
extend: 'Ext.form.Panel',
alias : 'widget.maCrUserDataForm',
id: 'maCrUserDataForm',
reader: Ext.create('Ext.data.reader.Json', {
rootProperty : '',//数据的根属性，如果只是纯数据对象，没有什么root，那写""（空串）或者空着就行
model : 'appcenter.main.core.user.model.maCrUserModel'//使用的model
}),
layout:'vbox',
fieldDefaults: {
labelAlign: 'right',
labelWidth : 75,
margin:'0 0 5 0',
msgTarget: 'side'
},
items:[{
width:'100%',
xtype:'fieldset',
title: '基本信息',
margin:'0 5 5 0',
collapsible:true,
autoHeight:true,
items:[{
layout:'column',
items:[{
columnWidth:.8,
layout:'column' ,
defaults:{
columnWidth:.326
},
items:[{
xtype : 'textfield',
name : 'dr',
hidden: true,
fieldLabel : '是否删除'
},{
xtype : 'textfield',
name : 'ts',
hidden: true,
fieldLabel : '乐观锁'
},{
xtype : 'textfield',
name : 'pkUser',
hidden: true,
fieldLabel : '主键'
},{
xtype : 'textfield',
allowBlank:false,
name : 'userCode',
fieldLabel : '用户编码'
},{
xtype : 'textfield',
allowBlank:false,
name : 'userName',
fieldLabel : '用户名称'
},{
xtype : 'textfield',
allowBlank:false,
name : 'userAccount',
fieldLabel : '用户帐号'
},{
xtype : 'textfield',
allowBlank:false,
name : 'phone',
fieldLabel : '手机'
},{
xtype : 'textfield',
name : 'email',
fieldLabel : '邮箱'
},{
xtype : 'combo',
allowBlank:false,
store : '',
displayField : 'label',
valueField : 'value',
editable : false,
labelAlign : 'right',
fieldLabel : '是否锁定',
name : 'isLock',
value: '2',
queryMode: 'local'
},{
xtype:'textareafield',
columnWidth: .98,
fieldLabel: '备注',
name: 'note'
}]
},{
columnWidth:.18,
xtype : 'container',
border : true,
items:[{
xtype : 'box',
id : 'sphoto',
width: 160,
height: 160,
align:'center',
style:'left:15%',
autoEl : {
tag : 'img',
type : 'image',
src : './resources/img/default.gif',
complete : 'off',
name : 'sphoto'
}
},{
xtype : 'filefield',
style:'margin:15px;margin-left:35px;margin-top:10px',
align:'right',
buttonText:'上传图片',
buttonOnly: true,
hideLabel: true,
buttonConfig: {
iconCls: 'fa fa-image'
}
}]
}]
}]
},{
width:'100%',
xtype:'fieldset',
title: '创建信息',
margin:'0 5 5 0',
collapsible: true,
collapsed: true,
autoHeight: true,
layout:'column',
items:[{
xtype : 'textfield',
columnWidth:.245,
name : 'createUserId',
hidden: true,
fieldLabel : '创建人ID'
},{
xtype : 'textfield',
columnWidth:.245,
name : 'createUser',
readOnly: true,
fieldLabel : '创建人'
},{
xtype : 'textfield',
columnWidth:.245,
name : 'createTime',
readOnly: true,
fieldLabel : '创建时间'
},{
xtype : 'textfield',
columnWidth:.245,
name : 'modifyUserId',
hidden: true,
fieldLabel : '修改人ID'
},{
xtype : 'textfield',
columnWidth:.245,
name : 'modifyUser',
readOnly: true,
fieldLabel : '修改人'
},{
xtype : 'textfield',
columnWidth:.245,
name : 'modifyTime',
readOnly: true,
fieldLabel : '修改时间'
}]
}]
});
四、修改maCrUserController，修改后代码如下：
Ext.define('appcenter.main.core.user.controller.maCrUserController', {
extend: 'Ext.app.ViewController',
alias: 'controller.maCrUserController',
openData: function(me) {
var maCrUserData = Ext.getCmp("maCrUserData");
if(!maCrUserData){
if(me.name=='add'){
maCrUserData =Ext.create('appcenter.main.core.user.view.maCrUserData',{
title:'用户管理--新增'
});
Ext.getCmp('editButton').setVisible(false);
}else if(me.name=='edit'){
var maCrUserQueryTable = Ext.getCmp("maCrUserQueryTable");
var records = maCrUserQueryTable.getSelectionModel().getSelection();
if(records.length>0){
var pkUser = records[0].get('pkUser');
maCrUserData =Ext.create('appcenter.main.core.user.view.maCrUserData',{
title:'用户管理--编辑'
});
Ext.getCmp('editButton').setVisible(false);
}else{
Ext.MessageBox.alert('友情提示', '请选择要编辑的数据！');
}
}else if(me.name=='read'){
var maCrUserQueryTable = Ext.getCmp("maCrUserQueryTable");
var records = maCrUserQueryTable.getSelectionModel().getSelection();
if(records.length>0){
var pkUser = records[0].get('pkUser');
maCrUserData =Ext.create('appcenter.main.core.user.view.maCrUserData',{
title:'用户管理--查阅'
});
Ext.getCmp('saveButton').setVisible(false);
}else{
Ext.MessageBox.alert('友情提示', '请选择要查阅的数据！');
}
}
}
maCrUserData.show();
},
});
五、修改maCrUser视图文件，修改后代码如下：
Ext.define('appcenter.main.core.user.view.maCrUser',{
extend: "Ext.Panel",
id: 'maCrUser',
layout:'fit',
controller : 'maCrUserController',
requires : [
'appcenter.main.core.user.controller.maCrUserController',
'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'
}]
}]
});
六、运行结果如下：
七、至此，整个用户管理的详细页已经开发完毕，还有很多细节需要调整，后续的过程中我会逐步增加。
上一篇： java堆排序原理与实现方法分析