1,查询列表页
/**
* 接口用户管理列表页面
*
* @class UserInfoView
* @extend Ext.Panel
*/
UserInfoView = Ext.extend(Ext.Panel, {
// 条件搜索Panel
searchPanel : null,
// 数据展示Panel
gridPanel : null,
// GridPanel的数据Store
store : null,
// 头部工具栏
topbar : null,
// 构造函数
constructor : function(_cfg) {
Ext.applyIf(this, _cfg);
this.initDataSource();
this.initUIComponents();
// 调用父类构造
UserInfoView.superclass.constructor.call(this, {
id : 'UserInfoView',
title : '接口用户管理',
region : 'center',
layout : 'border',
items : [ this.searchPanel, this.gridPanel ]
});
},
// 初始化组件
initUIComponents : function() {
this.initSearchPanel();
this.initToolbarUI();
this.initGridUI();
}
});
/**
* 初始化条件搜索Panel
*/
UserInfoView.prototype.initSearchPanel = function() {
this.searchPanel = new Ext.FormPanel({
layout : 'hbox',
height : 35,
region : 'north',
bodyStyle : 'padding:6px 10px 6px 10px',
border : false,
defaults : {
xtype : 'label',
border : false,
margins : {
top : 0,
left : 0,
bottom : 0,
right : 30
}
},
items : [ {
text : '用户名',
margins : {
top : 3,
left : 0,
bottom : 0,
right : 10
}
}, {
name : 'Q_userName_S_LK',
xtype : 'textfield'
}, {
text : '行政区划代码',
margins : {
top : 3,
left : 0,
bottom : 0,
right : 10
}
}, {
name : 'Q_xzqh_S_LK',
xtype : 'textfield'
}, {
text : '状态',
margins : {
top : 3,
left : 0,
bottom : 0,
right : 10
}
}, {
hiddenName : 'Q_userStatus_N_EQ',
xtype : 'combo',
store : new Ext.data.SimpleStore({
fields : [ 'value', 'text' ],
data : [ [ '', '-请选择-' ], [ '0', '已启用' ], [ '1', '已禁用' ] ]
}),
displayField : 'text',
valueField : 'value',
triggerAction : 'all',
mode : 'local',
width : 100,
editable : false,
value : ''
}, {
xtype : 'button',
text : '查询',
iconCls : 'search',
handler : this.search.createCallback(this)
} ]
});
};
/**
* 初始化工具栏UI
*/
UserInfoView.prototype.initToolbarUI = function() {
this.topbar = new Ext.Toolbar({
height : 30,
bodyStyle : 'text-align:left',
items : [ {
iconCls : 'btn-add',
text : '新增用户',
xtype : 'button',
handler : this.createRecord
}, {
iconCls : 'btn-del',
text : '删除用户',
xtype : 'button',
handler : this.delRecords,
scope : this
} ]
});
};
/**
* 初始化Grid列表UI
*/
UserInfoView.prototype.initGridUI = function() {
// 操作列
this.rowActions = new Ext.ux.grid.RowActions({
header : '操作',
width : 80,
actions : [ {
iconCls : 'btn-del',
qtip : '删除',
style : 'margin:0 3px 0 3px'
}, {
iconCls : 'btn-edit',
qtip : '编辑',
style : 'margin:0 3px 0 3px'
} ]
});
this.rowActions.on('action', this.onRowAction, this);
// 选择列
var sm = new Ext.grid.CheckboxSelectionModel();
// 普通的展现列
var cm = new Ext.grid.ColumnModel({
columns : [ sm, new Ext.grid.RowNumberer(), {
header : 'useid',
dataIndex : 'useid',
hidden : true
}, {
header : '用户名',
dataIndex : 'userName'
}, {
header : '接入编号',
dataIndex : 'wsCode'
}, {
header : '状态',
dataIndex : 'userStatus'
}, this.rowActions ],
defaults : {
sortable : true,
menuDisabled : false,
width : 100
}
});
//Grid面板
this.gridPanel = new Ext.grid.GridPanel({
id : 'UserInfoGrid',
region : 'center',
stripeRows : true,
tbar : this.topbar,
store : this.store,
trackMouseOver : true,
disableSelection : false,
loadMask : true,
autoHeight : true,
cm : cm,
sm : sm,
plugins : this.rowActions,
viewConfig : {
forceFit : true,
autoFill : true
},
bbar : new Ext.PagingToolbar({
pageSize : 25,
store : this.store,
displayInfo : true,
displayMsg : '当前页记录索引{0}-{1}, 共{2}条记录',
emptyMsg : "当前没有记录"
})
});
// 监听行双击事件,row double click
this.gridPanel.addListener('rowdblclick', function(grid, rowindex, e) {
grid.getSelectionModel().each(function(rec) {
new UserInfoForm({
useid : rec.data.useid,
displayType : true
}).show();
});
});
};
/**
* 初始化数据源
*/
UserInfoView.prototype.initDataSource = function() {
// 配置数据源
this.store = new Ext.data.JsonStore({
url : __ctxPath + "/ws/listUserInfo.do",
root : 'result',
totalProperty : 'totalCounts',
remoteSort : true,
fields : [ {
name : 'useid',
type : 'int'
}, 'userName', 'wsCode', 'userKey', 'xzqh', 'userStatus', 'timeA',
'timeM', 'activeTime' ],
listeners : {
load : function(store, records, option) {
store.each(function(record) {
switch (record.get('userStatus')) {
case 0:
record.set('userStatus', '已启用');
break;
case 1:
record.set('userStatus', '已禁用');
break;
}
;
});
}
}
});
this.store.setDefaultSort('useid', 'desc');
// 加载数据
this.store.load({
params : {
start : 0,
limit : 25
}
});
};
/**
* 新增用户
*/
UserInfoView.prototype.createRecord = function() {
new UserInfoForm().show();
};
/**
* 操作列处理函数
* @param gridPanel
* @param record
* @param action
* @param row
* @param col
*/
UserInfoView.prototype.onRowAction = function(gridPanel, record, action, row, col) {
switch (action) {
case 'btn-del': //删除
this.delByIds(record.data.useid);
break;
case 'btn-edit': //编辑
this.editRecord(record);
break;
default:
break;
}
};
/**
* 编辑
* @param record
*/
UserInfoView.prototype.editRecord = function(record){
new UserInfoForm({
useid : record.data.useid
}).show();
};
/**
* 批量删除
* @param record
*/
UserInfoView.prototype.delByIds = function(ids) {
Ext.Msg.confirm('信息确认', '您确认要删除所选记录吗?', function(btn) {
if (btn == 'yes') {
Ext.Ajax.request({
url : __ctxPath + '/ws/multiDelUserInfo.do',
params : {
ids : ids
},
method : 'POST',
success : function(response, options) {
Ext.ux.Toast.msg('操作信息', '成功删除接口用户');
Ext.getCmp('UserInfoGrid').getStore().reload();
},
failure : function(response, options) {
Ext.ux.Toast.msg('操作信息', '操作出错,请联系管理员!');
}
});
}
});
};
/**
* 工具栏 - 批量删除
*/
UserInfoView.prototype.delRecords = function() {
var gridPanel = Ext.getCmp('UserInfoGrid');
var selectRecords = gridPanel.getSelectionModel().getSelections();
if (selectRecords.length == 0) {
Ext.ux.Toast.msg("信息", "请选择要删除的记录!");
return;
}
var ids = Array();
for ( var i = 0; i < selectRecords.length; i++) {
ids.push(selectRecords[i].data.useid);
}
this.delByIds(ids);
};
/**
* 搜索面板——查询函数
* @param self
*/
UserInfoView.prototype.search = function(self) {
if (self.searchPanel.getForm().isValid()) { // Form表单验证
self.searchPanel.getForm().submit({
waitMsg : '正在提交查询',
url : __ctxPath + '/ws/listUserInfo.do',
success : function(formPanel, action) {
var result = Ext.util.JSON.decode(action.response.responseText);
self.gridPanel.getStore().loadData(result);
}
});
}
};
2,新增,修改,查看页
/**
* 接口用户管理——新增,修改,详情页面
*
* @param useid 接口用户ID,无则显示新增面板
* @param displayType 是否为查看模式,true则显示查看面板,否则显示编辑面板
* @class UserInfoForm
* @extend Ext.Window
*/
UserInfoForm = Ext.extend(Ext.Window, {
//内嵌FormPanel
formPanel : null,
//接口用户名称
userName : '',
//构造函数
constructor : function(_cfg) {
Ext.applyIf(this, _cfg);
this.initUIComponents();
UserInfoForm.superclass.constructor.call(this, {
id : 'UserInfoFormWin',
layout : 'fit',
resizable : false,
draggable : false,
closable : false,
maximizable : false,
items : this.formPanel,
modal : true,
autoHeight : true,
width : 400,
title : this.useid ? (this.displayType ? '查看接口用户 ': '编辑接口用户') : '新增接口用户',
buttonAlign : 'center',
buttons : this.buttons
});
},
// 初始化组件
initUIComponents : function() {
this.initFormPanelUI();
this.initButtons();
// 编辑和查看时,加载表单对应的数据
if (this.useid != null && this.useid != 'undefined') {
this.formPanel.getForm().load({
url : __ctxPath + '/ws/getUserInfo.do?useid=' + this.useid
});
}
},
});
/**
* 初始化表单面板UI
*/
UserInfoForm.prototype.initFormPanelUI = function() {
this.formPanel = new Ext.FormPanel({
layout : 'form',
bodyStyle : 'padding:10px 10px 10px 10px',
border : false,
url : __ctxPath + '/ws/saveUserInfo.do',
id : 'UserInfoForm',
autoHeight : true,
defaults : {
anchor : '98%,98%'
},
defaultType : 'textfield',
items : [ {
fieldLabel : 'ID',
name : 'userInfo.useid',
id : 'useid',
readOnly : true,
xtype : this.useid ? 'textfield' : 'hidden'
}, {
fieldLabel : '用户名',
name : 'userInfo.userName',
id : 'userName',
readOnly : this.displayType,
allowBlank : false,
blankText : '用户名不能为空',
maxLength : 50,
maxLengthText : '用户名不超过50个字符'
}, {
fieldLabel : '接入编号',
name : 'userInfo.wsCode',
id : 'wsCode',
readOnly : this.displayType,
allowBlank : false,
blankText : '接入编号不能为空',
maxLength : 20,
maxLengthText : '接入编号不超过20个字符'
}, {
fieldLabel : '密钥',
name : 'userInfo.userKey',
id : 'userKey',
readOnly : this.displayType,
allowBlank : false,
blankText : '接入编号不能为空',
maxLength : 200,
maxLengthText : '接入编号不超过200个字符'
}, {
fieldLabel : '行政区域代码',
name : 'userInfo.xzqh',
id : 'xzqh',
readOnly : this.displayType,
allowBlank : false,
blankText : '接入编号不能为空',
regex : /\w{6}/,
regexText : '行政区域代码为6个字符'
}, {
fieldLabel : '状态',
xtype : 'combo',
hiddenName : 'userInfo.userStatus',
id : 'userStatus',
store : [ [ '0', '启用' ], [ '1', '禁用' ] ],
editable : false,
triggerAction : 'all',
value : '0',
readOnly : this.displayType
}, {
fieldLabel : '有效日期至',
name : 'userInfo.activeTime',
id : 'activeTime',
xtype : 'datefield',
editable : false,
minValue : new Date(),
format : 'Y年m月d日',
readOnly : this.displayType,
allowBlank : false,
blankText : '有效日期不能为空'
}, {
fieldLabel : '创建时间',
name : 'userInfo.timeA',
id : 'timeA',
readOnly : true,
xtype : this.useid ? 'textfield' : 'hidden'
}, {
fieldLabel : '最后修改时间',
name : 'userInfo.timeM',
id : 'timeM',
readOnly : true,
xtype : this.useid ? 'textfield' : 'hidden'
}]
});
};
/**
* 初始化按钮
*/
UserInfoForm.prototype.initButtons = function() {
this.buttons = [ {
text : '保存',
iconCls : 'btn-save',
handler : this.save.createCallback(this.formPanel, this),
hidden : this.displayType
}, {
text : '重置',
iconCls : 'btn-reset',
handler : this.reset.createCallback(this.formPanel),
hidden : this.displayType
}, {
text : '取消',
iconCls : 'btn-cancel',
handler : this.cancel.createCallback(this)
} ];
};
/**
* 保存表单
*/
UserInfoForm.prototype.save = function(formPanel, window) {
if (formPanel.getForm().isValid()) { //执行表单验证
formPanel.getForm().submit({
method : 'POST',
waitMsg : '正在提交数据...',
success : function(fp, action) {
Ext.ux.Toast.msg('操作信息', '成功保存信息!');
var gridPanel = Ext.getCmp('UserInfoGrid');
if (gridPanel != null) {
gridPanel.getStore().reload();
}
window.close();
},
failure : function(fp, action) {
Ext.MessageBox.show({
title : '操作信息',
msg : '信息保存出错,请联系管理员!',
buttons : Ext.MessageBox.OK,
icon : Ext.MessageBox.ERROR
});
window.close();
}
});
}
};
/**
* 重置表单
*/
UserInfoForm.prototype.reset = function(formPanel) {
formPanel.getForm().reset();
};
/**
* 取消表单
*/
UserInfoForm.prototype.cancel = function(window) {
window.close();
};