关于Ext.grid.EditorGridPanel使用中遇到的问题

最近做的一个项目使用到了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+'"> </div>';
},
width: 60
});

最后做出来的效果：

通过CheckColumn的onMouseDown做了个功能，当选中的时候，纸质（份）默认为1，取消的时候为0，代码：

record.set("paperCount",!record.data[this.dataIndex]?1:0);

还有个东西没调好，就是主材料不应该有份数的，接着想了。

关于Ext.grid.EditorGridPanel使用中遇到的问题相关推荐

Ext.grid.EditorGridPanel的使用、修改记录的获取及提交
<HTML> <HEAD> <TITLE>可编辑表格面板EditorGridPanel</TITLE> <metahttp-equi ...
Ext.grid.EditorGridPanel viewConfig 设置表格 UniDBGrid
extjs命令必须在UniFormCreate事件里写 //可以复制单元格文字 UniDBGrid1.JSInterface.JSConfigObject('viewConfig', 'enable ...
ext Grid（三）
想让用户体验更高就应该让用户可以在自己刚刚查询出来的数据表格上进行数据编辑,可以进行增删改查.可编辑的表格就在在想要能编辑的列里注册一个TextField组件,这个组件需要使用Ext.grid.Gri ...
关于Ext中EditorGridPanel数据校验
用了2年的Ext 渐渐对Ext熟络起来,经常去看下源码,自己瞎琢磨些功能,最近做了个EditorGridPanel数据校验,原理不难,不过绝对原创,有点意思,发下和大家分享~ 原理:通过EditorG ...
Ext.grid.ColumnModel设置
Ext.grid.ColumnModel 用于定义Grid的列用例 var colModel = new Ext.grid.ColumnModel([ {header: "Ticker&q ...
ext Ext.grid.ColumnModel自适应宽度去除右边空白
列自适应玩了以后发现右边有一列空白,加上scrollOffset: 0//去除最右边空白 grid = new Ext.grid.EditorGridPanel({ region:"cent ...
[转]Ext Grid控件的配置与方法
http://www.blogjava.net/wangdetian168/archive/2011/04/12/348651.html 1.Ext.grid.GridPanel 主要配置项: sto ...
ExtJs之Ext.grid.GridPanel（部分未完）
今天在家休息,年假不用就作费啊. 看了几部香港老电影,陪爸爸看了勇士占奇才, 然后,测试了一下EXTJS未完的内容, 在京东上订了七本历史普及书,近两百块..:) 搞定. ? 1 2 3 4 5 6 ...
Ext.grid.Panel表格分页
Ext.grid.Panel表格分页示例代码: cshtml @{Layout = null; } <!DOCTYPE html> <html> <head>&l ...
使用Dynamic LINQ实现Ext Grid的远程排序
要实现Ext Grid的远程排序其实很简单,只要修改查询语句的排序关键字就可以了,但是,如果你的项目是使用Linq进行开发的,会发现动态修改排序关键字并不是那么容易的事,解决办法就是使用LINQ Dy ...

关于Ext.grid.EditorGridPanel使用中遇到的问题

关于Ext.grid.EditorGridPanel使用中遇到的问题相关推荐

最新文章

热门文章