最近做的一个项目使用到了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;// 行id
for (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);
还有个东西没调好,就是主材料不应该有份数的,接着想了。