ext editorGridpanel 验证

对深入浅出提供表格验证方法出现的bug进行改进。

 

//验证表格数据是否合法       思路：检查modified中每个record 根据每个属性的editor对record中的属性进行验证。
    

var records = store.getModifiedRecords();
    if(records.length<1){
     return ;
    }
    for(var j=0;j<records.length;j++){
     var record = records[j];//得到一个record
     var fields = record.fields.keys;//fields里面是record的属性数组
     for(var i = 0 ;i<fields.length;i++){/ /检测record的每个字段值是否合法   //根据fields里面的属性 检测每一个record
      var name = fields[i];
      var value = record.data[name];//根据record得到属性值
      var cm = grid.getColumnModel();
      var colIndex = cm.findColumnIndex(name);//根据名称找到它在grid所在的列
      if(colIndex == -1)continue;//如果不在grid列里面进行下一次循环
      var rowIndex = store.indexOfId(record.id);//得到当前验证属性的行
      if(null!=cm.getCellEditor(colIndex)){
       cm.getCellEditor(colIndex).field.reset();//因为field中还保存着数据 只是没有显示出来，
                                                                     //当验证record的时候field会把record中属性的空值替换成field的值 那么allowblank=false验证失败
       var editor = cm.getCellEditor(colIndex).field;//得到每一个editor的Ext.form.field对象。利用field进行验证
       if(!editor.validateValue(value)){
        Ext.Msg.alert("提示","数据不完整",function(){
         grid.startEditing(rowIndex,colIndex);
        });
        return false;
       }
      }
     }
    }

 

 

 深入浅出提供表格验证方法出现的bug：（它的方法就不贴出来了）

cm.getCellEditor(colIndex).field.reset();//

当我在editorGridpanel 新增一条数据的时候 原方法能验证出record的错误 我就把数据编辑完整保存

新增第二条数据的时候  验证结果跟逻辑不符了

于是就用火狐debug

发现 textfield组件的getErrors方法（textfield用它来验证数据的）

第37770 value = value || this.processValue(this.getRawValue());

当value为空时就会执行this.processValue(this.getRawValue());  得到textfield的当前值

虽然textfield编辑完后被隐藏 但是textfield上面的值还是没有被清空，所以value就被换成上一次编辑遗留下来的数据，allowBlank：false验证失败

所以必须在对数据验证之前将其清空了 所以

cm.getCellEditor(colIndex).field.reset();//

 

 

37767 getErrors: function(value) {

37768 var errors = Ext.form.TextField.superclass.getErrors.apply(this, arguments);

37769

37770 value = value || this.processValue(this.getRawValue());

37771

37772 if (Ext.isFunction(this.validator)) {

37773 var msg = this.validator(value);

37774 if (msg !== true) {

37775 errors.push(msg);

37776 }

37777 }

37778

37779 if (value.length < 1 || value === this.emptyText) {

37780 if (this.allowBlank) {

37781

37782 return errors;

37783 } else {

37784 errors.push(this.blankText);

37785 }

37786 }

37787

37788 if (!this.allowBlank && (value.length < 1 || value === this.emptyText)) {

37789 errors.push(this.blankText);

37790 }

37791

37792 if (value.length < this.minLength) {

37793 errors.push(String.format(this.minLengthText, this.minLength));

37794 }

37795

37796 if (value.length > this.maxLength) {

37797 errors.push(String.format(this.maxLengthText, this.maxLength));

37798 }

37799

37800 if (this.vtype) {

37801 var vt = Ext.form.VTypes;

37802 if(!vt[this.vtype](value, this)){

37803 errors.push(this.vtypeText || vt[this.vtype +'Text']);

37804 }

37805 }

37806

37807 if (this.regex && !this.regex.test(value)) {

37808 errors.push(this.regexText);

37809 }

37810

37811 return errors;

37812 },

评论

1 楼 liuhjxuell 2013-08-29  

太给力了，只是这个校验还有一点，对于数字类型的校验allowBlank：false验证都是失败，即使页面上有填写的数据。最后将数字修改为字符串校验正常editor.validateValue(value+"")