最近做的一個項目使用到了Ext.grid.EditorGridPanel（使用的ext使用的版本是3.3.1的），根據需求，在做的過程中，遇到了這么幾個問題：

1、怎么把grid中的數據通過FormPanel提交，也就是要獲取grid中的數據，獲取數據前的數據驗證問題

2、grid中怎么放入checkColumn

3、grid中滿足條件的單元格不可編輯問題

好了，說說這幾個問題怎么解決的（自己覺得還有更簡單的解決方法）：

1、怎么把grid中的數據通過FormPanel提交，也就是要獲取grid中的數據，獲取數據前的數據驗證問題

解決大概思路：獲取grid中的數據→轉換為json格式的字符串→將此字符串放入表單域中

（1）獲取grid中的數據：

a.獲取grid中的store對象（似乎js里面沒有對象的概念，但是習慣了叫對象）

b.獲取每一行的數據，主要運用到的方法有：getCount()、store.getRange()方法，如果只想獲取改變了的記錄的話，可以用getModifiedRecords()；

getCount()函數主要放回的是store中的記錄數，也就是有多少行數據；

getRange()函數連續獲得多個record，需要指定開始和結束位置的索引值，開始參數設為0，結束位置設為store記錄數就可以全部拿出來了；

getModifiedRecords()函數主要是獲取store中有修改的記錄，只要你對其中一條數據進行了修改，在改回原來的數據，都認為這條數據被修改過了；

c.將獲取的數據轉換為json格式，這里我使用的方法是通過遍歷把每一行的數據放在一個數組里面，然后把這個數組轉換成json格式，ext中有Ext.encode()方法可以轉換

d.將此字符串放入表單域中只要XXX.setValue()即可

總的代碼如下：

var store=this.getLspApplyItemCL().getStore();var count=store.getCount();//獲取總的記錄數var records;var dataArr=new Array();var dataString="[]";records=store.getRange(0,count);for(var i=0;i<count;i++){dataArr[i]=records[i].data;}dataString=Ext.encode(dataArr);//將數組轉換成json格式的字符串this.getLspApplyItem().getField("data").setValue(dataString);（2）grid中的數據驗證，在獲取數據之前就應該對數據進行驗證的：

這個方法是對網上的一段代碼進行修改的，拿過來用的時候可能是版本原因還是什么，原來的代碼地址是：http://scnults.iteye.com/blog/1487637

拿過來后修改了紅色部分代碼，代碼如下：

Ext.apply(Ext.grid.EditorGridPanel.prototype,{//增加EditorGridPanel的通用校驗方法isValid : function(records){var cm = this.cm || this.colModel;var f = true;var column = {};for (var i = 0; i < cm.columns.length; i++) {var dataIndex = cm.getDataIndex(i);column[dataIndex] = i;}for (var i = 0; i < records.length; i++) {var o = records[i].data;var rowindex = i;// 行idfor (var n in o) {var colindex = column[n];if (!!colindex && !!cm.columns[colindex].editor) { Ext.getCmp(cm.columns[colindex].editor.id).setValue(o[n]);//給可編輯控件設值var flag = Ext.getCmp(cm.columns[colindex].editor.id).validate();//設值后校驗f = f && flag;if (!flag) {Ext.get(this.getView().getCell(rowindex,colindex)).addClass('x-form-invalid');//給不通過校驗的具體空格增加錯誤css樣式（Ext中form的樣式）}} else {continue;}}}return f;} })使用： this.getLspApplyItemCL().isValid(store.data.items)
2.Ext.grid.EditorGridPanel中放入checkColumn

看了官方示例和網上搜索的方法，在使用的時候都會出現問題，于是只能在ColumnModel直接new Ext.grid.CheckColumn，new出來后還需要在Ext.grid.EditorGridPanel中加上this.plugins = this.colModel.checkColumn;這里出現了個小問題，我的界面里有兩行需要用到CheckColumn，所有用了個數組，還是直接看代碼：

columnModel = Ext.extend(Ext.grid.ColumnModel, {checkColumn:[],constructor : function(config){this.checkColumn[0] = new Ext.grid.CheckColumn({header: "紙質材料",dataIndex: "paper",width: 60,renderer:this.checkColumnRender,onMouseDown:function(e, t){if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){e.stopEvent();var index = this.grid.getView().findRowIndex(t);var record = this.grid.store.getAt(index);record.set("paperCount",!record.data[this.dataIndex]?1:0);record.set(this.dataIndex, !record.data[this.dataIndex]);}}});this.checkColumn[1] = new Ext.grid.CheckColumn({header: "電子材料",dataIndex: "papeCount",renderer:this.checkColumnRender,width: 60});var cfg=config || {columns:[new Ext.grid.RowNumberer(),{xtype: "gridcolumn", scope:this, width: 460,id: "zlText", dataIndex: "zlText",header: "材料名稱",editor: new Ext.form.TextField({allowBlank: false}),align: "left", hidden: false, sortable: true,renderer:this.zlTextRender},{scope:this, width: 100,id: "zlStyle", dataIndex: "zlStyle",header: "材料類型",align: "center", hidden: false, sortable: true,editor: new Ext.form.ComboBox({store : new Ext.data.SimpleStore({fields : ['zlStyle', 'zlStyleText'],data : [["0","原件"],["1","復印件"],["2","原件及復印件"]]}), //數據源displayField : 'zlStyleText', //顯示下拉列表數據值valueField : 'zlStyle', //提交時下拉列表框的數據值typeAhead : true,triggerAction : 'all',allowBlank : false,forceSelection : true,mode : 'local'})},this.checkColumn[0],{xtype: "gridcolumn", scope:this, width: 60,id: "paperCount", dataIndex: "paperCount",header: "紙質(份)",editor: new Ext.form.NumberField({allowBlank: false,allowDecimals:false}),align: "right", hidden: false, sortable: true},this.checkColumn[1]]};columnModel.superclass.constructor.call(this,cfg);},zlTextRender:function(data,cell,record,row,col,store){if(record.get("infoId")==record.get("zlGroup")){return record.get("zlText");}else{return String.format("<span style='color:#08298A'>{0}</span><br>{1}",record.get("parentZlText"),record.get("zlText"));}},rend:function(value){for(var i=0;i<ZLSTYLE_DATA.length;i++){if(value==ZLSTYLE_DATA[i][0]){return ZLSTYLE_DATA[i][1];}}},checkColumnRender:function(v, p, record){if(record.get("isUserDefined")!=1&&record.get("infoId")==record.get("zlGroup")){return "";}p.css += ' x-grid3-check-col-td'; return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">?</div>';} });3、設值單元格不可編輯

感覺這個解決方案沒有從根本上解決問題，但是可以用，通過設值Ext.grid.EditorGridPanel的beforeedit事件完成：

this.on("beforeedit",function(obj) {if(條件){return true;}else{return false;}});在你點擊編輯框的時候會調用這個方法，true表示可以編輯，反之，主要是obj這個參數，beforeedit只傳入了這個參數，這個參數可以獲取到的數據有：

grid – 表格本身
record – 你要編輯的那一行記錄
field – 你編輯的列名
value – 你編輯的值
row – 行號
column – 列號

如果你想獲取當前列的名字，只要obj.field就可以獲取到了，但是beforeedit事件對checkColumn沒效果，如果想禁用掉checkColumn就不知道怎么辦了，我這里直接把checkColumn給隱藏掉了，調用重寫renderer方法就可以了：

new Ext.grid.CheckColumn({header: "電子材料",dataIndex: "papeCount",renderer:function(v, p, record){if(可編輯的條件){return "";}p.css += ' x-grid3-check-col-td';?return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">&#160;</div>';},width: 60});

最后做出來的效果：

通過CheckColumn的onMouseDown做了個功能，當選中的時候，紙質（份）默認為1，取消的時候為0，代碼：

record.set("paperCount",!record.data[this.dataIndex]?1:0);還有個東西沒調好，就是主材料不應該有份數的，接著想了。

總結

以上是生活随笔為你收集整理的关于Ext.grid.EditorGridPanel使用中遇到的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。