如何在ExtJS6中创建警告表单字段验证器？

Question

我试图做一个“警告字段验证程序”，其行为与常规字段验证程序类似，但不会使表单失效，只是在字段旁边显示带有工具提示的警告图标。

我应该重写哪些方法？我可能只是用一个字段旁边的图标打一个div，但是这样做会干净利落，所以使用它作为一个常规验证器很方便？

Answer 1

我们可以通过覆盖Ext.form.field.Base的validateValue来实现。

Ext.define('MyApp.overrides.form.field.Base', { 
    override: 'Ext.form.field.Base', 

    validateValue: function(value) { 
     // let validations run as usual. 
     var isValid = this.callParent(arguments); 

     // warnings related code begin here 
     // once the field is valid, then we check for warnings 
     if(isValid) { 
      var warnings = me.getWarnings(), 
       hasWarnings = Ext.isEmpty(warnings); 
      if(hasWarnings) { 
       me.showWarnings(warnings); 
      } 
      else { 
       me.clearWarnings(); 
      } 
     } 

     return isValid; 
    }, 

    getWarnings: function(value) { 
     // do all validations related to warnings. 
     // infact we can use the existing vtypes for doing this. 
     // i just altered this to support two types of configurations 
     // wtype or warnator (Function to Warnate) 

     value = arguments.length ? (value == null ? '' : value) : this.processRawValue(this.getRawValue()); 

     var me = this, 
      warnings = [], 
      warnator = me.warnator, // yeah sounds funnny right :D 
      wtype = me.wtype, 
      vtypes = Ext.form.field.VTypes 

     if (Ext.isFunction(warnator)) { 
      msg = warnator.call(me, value); 
      if (msg !== true) { 
       warnings.push(msg); 
      } 
     } 

     if (wtype) { 
      if (!vtypes[wtype](value, me)) { 
       warnings.push(me.wtypeText || vtypes[wtype +'Text']); 
      } 
     } 

     return warnings; 
    }, 

    showWarnings: functions(warnings) { 
     // show the warnings (similar to markInvalid function) 
     this.setActiveWarnings(Ext.Array.from(warnings)); 
    }, 

    clearWarnings: function() { 
     // clear the warnings (similar to clearInvalid function) 
     this.unsetActiveWarning(); 
    } 
} 

并覆盖Labelable以显示警告。

Ext.define('MyApp.overrides.form.Labelable', { 
    override: 'Ext.form.Labelable', 

    setActiveWarnings: function(warnings) { 
     // similar to setActiveErrors 
    }, 

    unsetActiveWarning: function() { 
     // similar to unsetActiveError 
    } 
}); 

还有其他的一些usecases的需要像启用和字段的禁用要处理，你可能需要重写onEnable和禁止接通根据您的需要。

更新

这里是显示警告小提琴。 验证：姓氏为必填项。 警告：姓氏必须包含至少3个字符。

https://fiddle.sencha.com/#fiddle/17da

Answer 2

我将延长Ext.form.Basic这样的：

Ext.define('MyApp.form.Basic',{ 
    extend:'Ext.form.Basic', 
    isValid: function() { 
     var me = this, 
      invalid; 
     Ext.suspendLayouts(); 
     invalid = me.getFields().filterBy(function(field) { 
      return !field.validate() && !field.mayBeInvalid; 
     }); 
     Ext.resumeLayouts(true); 
     return invalid.length < 1; 
    } 
}); 
Ext.define('MyApp.form.Panel',{ 
    extend:'Ext.form.Panel', 
    xtype:'myformpanel', 
    createForm: function() { 
     var cfg = {}, 
      props = this.basicFormConfigs, 
      len = props.length, 
      i = 0, 
      prop; 

     for (; i < len; ++i) { 
      prop = props[i]; 
      cfg[prop] = this[prop]; 
     } 
     return new MyApp.form.Basic(this, cfg); 
    } 
}); 

这样你就可以注释这样的字段：

xtype:'myformpanel', 
items:[{ 
    xtype:'textfield', 
    // this field should be validated. 
},{ 
    xtype:'textfield', 
    mayBeInvalid:true // our own extension property 
    // this field should not block the form submission 
}] 

，然后提交如常。

完全未经测试，但你会为我做的，我猜:)

的选择，如果你真的只需要它在一个单一的submit()喊单的形式，是手工做同样的事情提交之前：

var invalidFields = formpanel.getForm().getFields().filterBy(function(field) { 
    return !field.validate() && !field.mayBeInvalid; 
}); 
if(invalidFields.length < 1) form.submit({ 
    clientValidation: false, // do not validate anymore 
    ... 
}) 

Answer 3

亚历山大给出了一个很好的例子来实现这一点。根据你的答案我犯了一个拨弄着一些基本的东西，你怎么能直接实现某种柔软的警告到文本框：https://fiddle.sencha.com/#fiddle/16rk

Ext.define('Ext.form.field.MyText', { 
    extend:'Ext.form.field.Text', 
    listeners: { 
     blur: function() { 
      if (this.softWarning && this.softWarning == true) { 
       this.softValidate(); 
      } 
     } 
    }, 
    softValidate: function() { 
     var el = this.inputEl; 
     if (el) { 
      if (this.getValue().length < 5) { 
       el.dom.style.backgroundColor = 'red'; 
       el.dom.style.color = 'white'; 
      } else { 
       el.dom.style.backgroundColor = ''; 
       el.dom.style.color = ''; 
      } 
     } 

    } 
}); 

要知道，这是一种可能的方式。我会建议你的需求结合两个答案。