來源：http://www.17ext.com/showtopic-489.aspx

?

只要new一個新對象后新增修改等表單將根據(jù)定義的信息 自動生成提高開發(fā)效率

調(diào)用例子：

Ext.onReady(function() { Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; var gridStructure = [// grid的數(shù)據(jù)結(jié)構(gòu) ? { ? ? header : '事件編號', ? ? name : 'SJID', ? ? hidden : "true", ? ? type:'label' ? }, { ? ? header : '研究項(xiàng)目號', ? ? name : 'YJXMBH', ? ? width : 200, ? ? type:'combo', ? ? //綁定數(shù)據(jù)庫 ? ? fobj:'YL_YJXM', ? ? text:'XMMC', ? ? value:'YJXMBH' ? ? //綁定數(shù)組 ? ? //fobj:[[1,'是'],[2,'否']] ? }, { ? ? header : '時間點(diǎn)', ? ? name : 'SJD', ? ? align : 'center', ? ? width : 100, ? ? type:'number' ? ? //rendererunction(v){return v=='4.0'?'是':'否'} ? }, { ? ? header : '時間點(diǎn)描述', ? ? name : 'SJDMS', ? ? align : 'center', ? ? width : 100 ? }, { ? ? header : '事件', ? ? name : 'SJ', ? ? align : 'center', ? ? width : 100 ? }, { ? ? header : '檢查項(xiàng)目編號', ? ? name : 'JCXMBH', ? ? align : 'center', ? ? width : 100 ? }]; var myUxGrid = new Ext.ux.grid.MyGrid({// 創(chuàng)建封裝的MyGrid對象 ? id : 'dept-center-stat-grid', ? url : 'http://localhost080/YLXT/servlet/DealDataJsonServlet.do', ? selectType : 'check', ? // dataObject : myGridData, // defaultSortField : 'stat_sn', ? // keyField : 'basicUnitNo', ? structure : gridStructure, ? autoScroll : true, ? autoWidth : true, ? frame : true, ? bodyStyle : 'width:100%', ? layout : 'fit', ? height : 600, ? findField:'YJXMBH', //指定搜索字段 ? keyField:'SJID', //指定主鍵字段 ? loadMask : { ? msg : label.wait ? }, ? title : '研究步驟維護(hù)', ? renderTo : Ext.getBody(), ? tablename : 'YL_YJBZ' }); });

?

以下封裝的源代碼：

/** 封裝的綜合的Grid控件，繼承新增、修改、刪除、檢索、分頁功能。* blog：[url]www.chendw.cn[/url] * code by cdw*/ Ext.namespace("Ext.ux.grid"); Ext.ux.grid.MyGrid = Ext.extend(Ext.grid.GridPanel, {// 儲存表格結(jié)構(gòu)structure : '',// 表格綁定的表tablename : '',// 指定加載的列 默認(rèn)為讀取表上所有列數(shù)據(jù)fields : '',// 每頁顯示條數(shù)pageSize : '15',// 表單里控件的默認(rèn)寬fieldwidth : 200,// reader類型如果當(dāng)為json的時候那么url不能空，當(dāng)為array的時候dataObject不能為空readType : 'json',// 獲取數(shù)據(jù)的URLurl : '',// 數(shù)據(jù)對象dataObject : null,// 表格主鍵keyField : '',// 綁定查詢的列findField : null,// 是否需要分組，默認(rèn)為false，如果設(shè)置為true須再設(shè)置兩個參數(shù)一個為myGroupField和myGroupTextTplneedGroup : false,// 分組的字段名稱myGroupField : '',// 分組顯示的模板，eg：{text} ({[values.rs.length]} {[values.rs.length > 1 ?// "Items" : "Item"]})myGroupTextTpl : '',// 列模式的選擇模式,默認(rèn)為rowselectModel，如果相設(shè)置成check模式，就設(shè)置為checkselectType : '',// 默認(rèn)排序字段defaultSortField : 'ID',// 是否需要分頁工具欄，默認(rèn)為trueneedPage : true,frame : false,// 是否帶展開按鈕，默認(rèn)為falsecollapsible : false,animCollapse : true,loadMask : true,viewConfig : {forceFit : true},// 存儲表頭信息col : null,// privateinitComponent : function() {if (this.structure != '') {this.initStructure();}Ext.ux.grid.MyGrid.superclass.initComponent.call(this);},// privateinitEvents : function() {Ext.ux.grid.MyGrid.superclass.initEvents.call(this);/** this.getStore().load( { params : { start : 0, limit : 30 } });* */if (this.loadMask) {// Ext.MessageBox.wait('sssssss')this.loadMask = new Ext.LoadMask(this.bwrap, Ext.apply( {store : this.store}, this.loadMask)); } }, // privateinitStructure : function() {var oDs = null;var oCM = new Array(); // 列模式數(shù)組var oRecord = new Array(); // 容器對數(shù)組// 構(gòu)成grid的兩個必須組件: column和record，根據(jù)structure將這兩個組件創(chuàng)建出來// 判斷表格的選擇模式if (this.selectType == 'check') {var sm = new Ext.grid.CheckboxSelectionModel();oCM[oCM.length] = sm;// 在列模式數(shù)組中添加checkbox模式按鈕this.selModel = sm;// 并將selModel設(shè)置為check模式}var len = this.structure.length;// 得到結(jié)構(gòu)的長度for ( var i = 0; i < len; i++) {var c = this.structure[i];// alert( c.hidden ? c.width: this.fieldwidth)// 如果字段為hidden，則不生成filters和columnMode// 默認(rèn)格式化日期列if (c.type == 'date' && !c.renderer) {c.renderer = this.formatDate;}oCM[oCM.length] = {header : c.header,dataIndex : c.name,hidden : c.hidden || false,width : !c.hidden ? c.width : this.fieldwidth,// 類型為數(shù)字則右對齊align : c.type == 'numeric' ? 'right' : 'left',// 結(jié)構(gòu)的渲染函數(shù)renderer : c.renderer};oRecord[oRecord.length] = {name : c.name,// 如果類型不是date型則全部為string型type : c.type == 'date' ? 'date' : 'string',dateFormat : 'Y-m-d'};}this.col = oCM;// 生成columnModelthis.cm = new Ext.grid.ColumnModel(oCM);// this.colModel = this.cm;// 默認(rèn)可排序this.cm.defaultSortable = true;// 生成表格數(shù)據(jù)容器var record = Ext.data.Record.create(oRecord);// 判斷讀取類別，目前只實(shí)現(xiàn)了，jsonreader和arrayReadervar reader;var tablename = this.tablename;var pageSize = this.pageSize;var fields = this.fields;switch (this.readType) {case 'json':reader = new Ext.data.JsonReader( {totalProperty : "Count",root : "List",id : this.keyField// 關(guān)鍵字段}, record);this.ds = new Ext.data.GroupingStore( {proxy : new Ext.data.HttpProxy( {url : this.url}),reader : reader,sortInfo : {field : this.defaultSortField,direction : 'ASC'},remoteSort : true,groupField : this.myGroupField,listeners : {'reload' : function() {alert('reload')}}});break;case 'array':reader = new Ext.data.ArrayReader( {}, record);this.ds = new Ext.data.GroupingStore( {reader : reader,data : this.dataObject,sortInfo : {field : this.defaultSortField,direction : 'ASC'},groupField : this.myGroupField});break;default:break;}// 判斷是否需要分組if (this.needGroup) {this.view = new Ext.grid.GroupingView( {forceFit : true,groupTextTpl : this.myGroupTextTpl})}this.store = this.ds;// 生成分頁工具欄if (this.needPage) {var pagingToolbar = new Ext.PagingToolbar( {displayInfo : true,displayMsg : '當(dāng)前記錄數(shù):{0} - {1} 總記錄數(shù): {2}',emptyMsg : '沒有符合條件的記錄',store : this.store});pagingToolbar.pageSize = this.pageSize;this.bbar = pagingToolbar;this.bottomToolbar = this.bbar;var oSearch = new Ext.form.TextField( {id : 'search',xtype : 'textfield',align : 'right'})var ogrid = this;var keyField = this.keyField;// 生成頂部工具條var topToolbar = new Ext.Toolbar( {items : [ {iconCls : 'add',text : "新增",handler : function() {ogrid.doEdit();}}, {iconCls : 'edit',text : "修改",handler : function() {var record = ogrid.getSelectionModel().getSelected();if (record == null) {Ext.Msg.alert('提示', '請先選擇你要編輯的數(shù)據(jù)');return;}var id = record.get(keyField);ogrid.doEdit(id);}}, {iconCls : 'remove',text : "刪除",handler : function() {ogrid.doDelete();}}, {iconCls : 'x-btn-text x-tbar-loading',text : "刷新",handler : function() {ogrid.getStore().reload();},scope : this}, '->', '項(xiàng)目名稱：', oSearch, {iconCls : 'search',text : "搜索",handler : function() {ogrid.getStore().reload();}}]})}this.tbar = topToolbar;this.topToolbar = this.tbar;// 將filter加入grid// this.plugins = filters;var findField = this.findField;this.store.on('beforeload', function() {var scondition = "";if (oSearch.getValue()) {scondition = findField + " like '%" + oSearch.getValue() + "%'";}var para = {action : 'show',pageSize : pageSize,name : tablename,// fields : fields,condition : scondition,tmpId : '',tmpName : ''};Ext.apply(this.baseParams, para);});this.store.load( {params : {start : 0,limit : 10}}); } , /** @功能：編輯用戶選中的數(shù)據(jù) @參數(shù)：id 為空則為新增數(shù)據(jù) 不為空則為修改數(shù)據(jù)* */ doEdit : function(id) {var tablename = this.tablename;var keyField = this.keyField;var url = this.url;var ogrid = this;var oField = new Array();var len = this.structure.length;var action = "";// 判斷id是否為空 是：新增 否：修改action = id ? 'edit' : 'new';// ========== 初始化字段信息 開始==============for ( var i = 0; i < len; i++) {var c = this.structure[i];var type;var ds;c.type = c.type || 'string'; // 默認(rèn)類型為stringswitch (c.type) {case 'string':oField[oField.length] = {xtype : 'textfield',id : tablename + '_' + c.name,fieldLabel : c.header,anchor : '90%',allowBlank : c.required ? false : true}break;case 'number':oField[oField.length] = {xtype : 'numberfield',id : tablename + '_' + c.name,fieldLabel : c.header,anchor : '90%',allowBlank : c.required ? false : true}break;case 'date':oField[oField.length] = {xtype : 'datefield',id : tablename + '_' + c.name,fieldLabel : c.header,format : 'Y-m-d',anchor : '90%',allowBlank : c.required ? false : true}break;case 'combo':// 初始化下拉列表數(shù)據(jù)c.value = c.value || 'value';c.text = c.text || 'text';ds = this.initCombo(c);oField[oField.length] = {xtype : 'combo',hiddenName : tablename + '_' + c.name,fieldLabel : c.header,anchor : '90%',store : ds,displayField : c.text,valueField : c.value,typeAhead : true,triggerAction : 'all',selectOnFocus : true,mode : 'local',allowBlank : c.required ? false : true,listeners : {'blur' : function() {(this.setValue(this.getValue()))}}}break;case 'label':oField[oField.length] = {xtype : 'textfield',disabled : true,id : tablename + '_' + c.name,fieldLabel : c.header,anchor : '90%',value : '系統(tǒng)將自動生成'}}}// ------------- 初始化字段信息 結(jié)束------------// 初始化表單結(jié)構(gòu)var editForm = new Ext.form.FormPanel( {labelWidth : 80,frame : true,border : false,hideBorders : true,autoHeight : true,items : oField,buttons : [ {text : '保存',handler : function() {doSubmitFrom()}}, {text : '關(guān)閉',handler : function() {addWin.hide();addWin.destroy();}} ]})var addWin = new Ext.Window( {title : '研究項(xiàng)目維護(hù)',labelWidth : 100,frame : true,autoHeight : true,height : 400,width : 650,items : editForm})addWin.show()// 從服務(wù)器初始化表單數(shù)據(jù)if (id != null && id != '') {Ext.MessageBox.wait('正在數(shù)據(jù)加載,請稍后......', '請稍后')editForm.form.load( {url : url,params : {action : 'load',name : tablename,fieldkey : keyField,condition : keyField + "='" + id + "'",id : id},method : 'post',success : function(action, form) {Ext.MessageBox.hide();},failure : ogrid.doFailure});}// 保存表單數(shù)據(jù)function doSubmitFrom() {if (editForm.form.isValid()) {editForm.form.url = url + '?action=' + action + '&name='+ tablename + '&fieldkey=' + keyField + '&id=' + id;editForm.form.submit( {waitTitle : "請稍候",waitMsg : "正在提交表單數(shù)據(jù)，請稍候。。。。。。",success : function() {ogrid.getStore().reload();Ext.Msg.alert('提示', '操作成功');},failure : ogrid.doFailure});}} }, /** @功能：刪除所有選中記錄支持批量刪除* */ doDelete : function() {var sSelId = "";var ogrid = this;var tablename = this.tablename;var keyField = this.keyField;var url = this.url;var aId = new Array();// 從GRID對象中獲得Valuevar record = this.getSelectionModel().getSelected();if (!record) {Ext.Msg.alert("提示", "請先選擇要刪除的數(shù)據(jù)!");return;} else {for ( var i = 0, j = this.store.getCount(); i < j; i++) {if (this.getSelectionModel().isSelected(i)) {sSelId += "'" + this.store.getAt(i).get(keyField) + "',";aId[aId.length] = this.store.getAt(i)}}if (sSelId.length > 0) {sSelId = sSelId.substr(0, sSelId.length - 1);}}Ext.MessageBox.confirm('確認(rèn)刪除', '你真的要刪除所選數(shù)據(jù)嗎?', function(btn) {if (btn == 'yes') {// 選中了是按鈕Ext.MessageBox.wait("正在刪除數(shù)據(jù)，請稍候。。。。。。", "請稍后");Ext.Ajax.request( {url : url,success : function() {Ext.Msg.alert('提示', '操作成功');for ( var i = 0; i < aId.length; i++) {ogrid.store.remove(aId[i]);}},failure : ogrid.doFailure,params : {action : 'delete',name : tablename,fieldkey : keyField,id : sSelId}});}}); }, /** @功能：初始化combo控件數(shù)據(jù)* */ initCombo : function(o) {var url = this.url;var fields = o.value + ',' + o.text;var ds = null;if (typeof o.fobj != 'object') {var reader = new Ext.data.JsonReader( {totalProperty : 'Count',root : 'List'}, [ {name : o.value}, {name : o.text} ]);ds = new Ext.data.Store( {proxy : new Ext.data.HttpProxy( {url : url}),reader : reader});ds.on('beforeload', function() {// Ext.MessageBox.wait('正在加載數(shù)據(jù)請稍后。。。。。。','請稍后')var para = {action : 'show',pagesize : '999',name : o.fobj,fields : fields};Ext.apply(ds.baseParams, para);});} else {ds = new Ext.data.Store( {proxy : new Ext.data.MemoryProxy(o.fobj),reader : new Ext.data.ArrayReader( {}, [ {name : 'value'}, {name : 'text'} ]),autoLoad : true});}ds.load( {params : {start : 0,limit : 10}});return ds; }, /** @功能：請求成功顯示信息*/ doSuccess : function(action, form) {var ogrid = this;Ext.Msg.alert('提示', '操作成功');ogrid.getStore().reload(); }, /** @功能：請求失敗顯示信息*/ doFailure : function(action, form) {Ext.Msg.alert('請求錯誤', '服務(wù)器未響應(yīng)，請稍后再試'); }, /** @功能:默認(rèn)的格式化日期函數(shù) @返回格式：2008-09-21*/ formatDate : function(v) {return v ? v.dateFormat('Y-m-d') : '' } });

總結(jié)

以上是生活随笔為你收集整理的封装的ExtGrid 实现增、删、改、查等功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。