一、Extjs创建控制文件
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'});
二、Extjs创建详情页视图文件
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()});
三、Extjs创建窗体组件文件
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 : '修改时间'}]}]
});
四、Extjs修改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();},});
五、Extjs修改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'}]}]});
六、Extjs运行结果如下：
七、至此，整个用户管理的详细页已经开发完毕，还有很多细节需要调整，后续的过程中我会逐步增加。