我写的基于ExtJs的CURD页面

1，查询列表页

/** * 接口用户管理列表页面 *  * @class UserInfoView * @extend Ext.Panel */UserInfoView = Ext.extend(Ext.Panel, {// 条件搜索PanelsearchPanel : null,// 数据展示PanelgridPanel : null,// GridPanel的数据Storestore : 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 clickthis.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, {//内嵌FormPanelformPanel : 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();};