日期:2014-05-16  浏览次数:20482 次

ExtJS3.2 TextField允许为空失效的问题

升级到ExtJS3.2之后vtype=email或者其他的TextField在allowBlank : true的情况下提示“邮件格式错误”,查看源代码发现:

3.2中代码片段

getErrors: function(value) {
    var errors = Ext.form.TextField.superclass.getErrors.apply(this, arguments);
    
    value = value || this.processValue(this.getRawValue());        
    
    if(Ext.isFunction(this.validator)){
        var msg = this.validator(value);
        if (msg !== true) {
            errors.push(msg);
        }
    }
    
    if (!this.allowBlank && (value.length < 1 || value === this.emptyText)) { // if it's blank
        errors.push(this.blankText);
    }
    
    if (value.length < this.minLength) {
        errors.push(String.format(this.minLengthText, this.minLength));
    }
    
    if (value.length > this.maxLength) {
        errors.push(String.format(this.maxLengthText, this.maxLength));
    }
    if (this.vtype) {
        var vt = Ext.form.VTypes;
    alert(vt[this.vtype](value, this));
        if(!vt[this.vtype](value, this)){
            errors.push(this.vtypeText || vt[this.vtype +'Text']);
        }
    }

    if (this.regex && !this.regex.test(value)) {
        errors.push(this.regexText);
    }
    
    return errors;
},

?对比3.1中代码片段

validateValue : function(value){
    if(Ext.isFunction(this.validator)){
        var msg = this.validator(value);
        if(msg !== true){
            this.markInvalid(msg);
            return false;
        }
    }
    if(value.length < 1 || value === this.emptyText){ 
         if(this.allowBlank){
             this.clearInvalid();
             return true;
         }else{
             this.markInvalid(this.blankText);
             return false;
         }
    }
    if(value.length < this.minLength){
        this.markInvalid(String.format(this.minLengthText, this.minLength));
        return false;
    }
    if(value.length > this.maxLength){
        this.markInvalid(String.format(this.maxLengthText, this.maxLength));
        return false;
    } 
    if(this.vtype){
        var vt = Ext.form.VTypes;
        if(!vt[this.vtype](value, this)){
            this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
            return false;
        }
    }
    if(this.regex && !this.regex.test(value)){
        this.markInvalid(this.regexText);
        return false;
    }
    return true;
},

?可见3.2中对代码效率和错误处理作了一些调整,不过这个改动也确实太大了一些,不知道是不是考虑到效率对比发现了问题的所在:

//3.2中的代码 显然这里在allowBlank之后并没有返回true而是放任下面的代码继续 貌似这个不符合逻辑
?if (!this.allowBlank && (value.length < 1 || value === this.emptyText)) {
? ? ? ? errors.push(this.blankText);
    }
//3.1中的代码
    if(value.length < 1 || value === this.emptyText){ 
         if(this.allowBlank){
             this.clearInvalid();
             return true;
         }else{
             this.markInvalid(this.blankText);
             return false;
         }
    }

修复Bug代码:

// 修复ExtJS3.2中TextField allowBlank : true 失效的Bug
Ext.override(Ext.form.TextField, {
      getErrors : function(value) {
        var errors = Ext.form.TextField.superclass.getErrors.apply(this, arguments);

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

        if (Ext.isFunction(this.validator)) {
          var msg = this.validator(value);
          if (msg !== true) {
            errors.push(msg);
          }
        }

        if (value.length < 1 || value === this.emptyText) {
          if (this.allowBlank) {
            this.clearInvalid();
            return true;
          } else {
            errors.push(this.blankText);
          }
        }

        if (value.length < this.minLength) {
          errors.push(String.format(this.minLengthText, this.minLength));
        }

        if (value.length > this.maxLength) {
          errors.push(String.format(this.maxLengthText, this.maxLength));
        }