关于Ext中EditorGridPanel数据校验

 

      用了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没有校验的问题啦~