我写的基于ExtJs的CURD页面

关注

原创最新推荐文章于 2026-02-20 00:22:25 发布 3.2k 阅读 AI 写同款· GEO 优化 ›

Extjs5手动搭建MVVM项目demo Extjs5手动搭建MVVM项目demo，具体请看我博客立即下载

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();
};

收录于