用了2年的Ext 渐渐对Ext熟络起来,经常去看下源码,自己瞎琢磨些功能,最近做了个EditorGridPanel数据校验,原理不难,不过绝对原创,有点意思,发下和大家分享~
原理:通过EditorGridPanel中ColumnModel中的editor绑定的控件,利用控件自身的校验达到对EditorGridPanel列的校验,目前想到的校验如空,非法值啥的可以配置到Ext.form.Field里的都可以,利用Ext.form.Field中的setValue与
validate方法判断该列输入是否符合校验
核心代码:
给EditorGridPanel增加一个通用的校验方法
Ext.apply(Ext.grid.EditorGridPanel.prototype,{
//增加EditorGridPanel的通用校验方法
isVa : 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) {
if (!cm.columns[colindex].editor.field.fieldLabel){
cm.columns[colindex].editor.field.fieldLabel = cm.columns[colindex].header;
}
cm.columns[colindex].editor.field.setValue(o[n]);//给可编辑控件设值
var flag = cm.columns[colindex].editor.field.validate();//设值后校验
f = f && flag;
if (!flag) {
Ext.get(this.getView().getCell(rowindex,
colindex))
.addClass('x-form-invalid');//给不通过校验的具体空格增加错误css样式(Ext中form的样式)
}
} else {
continue;
}
}
}
return f;
}
})
列定义:
new Ext.grid.ColumnModel({ defaultSortable : true, columns : [new Ext.grid.RowNumberer(), sm4, { header : "困难与求助", width : 200, dataIndex : 'content', editor : new Tps.TTextArea({ allowBlank : false//设置该列不可空时,该列自动校验 }) }] });
调用:
var vRecords = grid.getStore().data.items; // 获取需要校验的数据数据 grid.isVa(vRecords)//执行校验,简单吧~~
效果截图:
搞掂,这样就解决了Ext中EditGridPanel没有校验的问题啦~