ExtJs从属字段验证

Question

如何验证依赖于另一个字段的一个字段？

{ 
    xtype:   'textfield', 
    name:   'name2', 
    vtype:   'type',  // how to write the validation code for this if it 
           // depends on the value of another field? 
    allowBlank:  false 
} 

Answer 1

通过添加您自己的自定义验证程序并在其中执行验证。

var field_one = new Ext.form.TextField({ 
    name: 'field_one', 
    fieldLabel: 'Field one' 
}); 

var field_two = new Ext.form.TextField({ 
    name: 'field_two', 
    fieldLabel: 'Field two', 
    validator: function(value){ 
     if(field_one.getValue() != value) { 
      return 'Error! Value not identical to field one'; 
     } else { 
      return true; 
     } 
    } 
}); 

Answer 2

字段定义：

.... 
monitorValid:  true, 
.... 
}, { 
    xtype:   'textfield', 
    name:   'name1', 
    ref:   'name1', 

}, { 
    xtype:   'textfield', 
    name:   'name2', 
    ref:   'name2', 
    allowBlank:  false, 
.... 

下一个在initComponent（或监听器，如果你preffer）：

this.name2.on ('change', this._validate_name2, this); 

，并在FormPanel中定义的处理程序：

this._validate_name2: function () { 
    if (this.name1.getValue() == this.name2.getValue()) { 
     this.name2.markInvalid ('field does not match name1'); 
     this.name2.setValue (null); 
    } 
} 

“markInvalid （）方法不会导致如果该值通过了验证，则该字段的验证方法返回false。所以，简单的标记字段为无效不会阻止提交与Ext.form.Action.Submit.clientValidation选项组提交的表单。”

为此组合allowBlank和setValue方法（空）将打破验证

Answer 3

我嘲笑了我在Ext JS 5.1中如何使用组合框执行此操作的示例...它可以方便地移植到Ext 4代码中，您只需使用initComponent而不是ViewController的init。以下代码（和Fiddle ）：

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 
    Ext.define('MyComboViewController', { 
     extend: 'Ext.app.ViewController', 
     alias: 'controller.mycombo', 
     init: function() { 
     this.getView().setStore(this.createStore()); 
     }, 
     createStore: function() { 
     var store = Ext.create('Ext.data.Store', { 
      fields: [ 
      {name: 'disp', type: 'string'}, 
      {name: 'val', type: 'int'} 
      ], 
      data: [ 
      {disp: 'One', val: 1}, 
      {disp: 'Two', val: 2}, 
      {disp: 'Three', val: 3}, 
      {disp: 'Four', val: 4}, 
      {disp: 'Five', val: 5} 
      ], 
      proxy: { 
      type: 'memory' 
      } 
     }); 
     return store; 
     } 
    }); 

    Ext.define('MyCombo', { 
     extend: 'Ext.form.field.ComboBox', 
     xtype: 'myCombo', 
     controller: 'mycombo', 
     displayField: 'disp', 
     valueField: 'val', 
     labelAlign: 'top', 
     validateOnChange: false, 
     typeAhead: true, 
     queryMode: 'local' 
    }); 

    Ext.define('MyCombosContainerViewController', { 
     extend: 'Ext.app.ViewController', 
     alias: 'controller.mycomboscontainer', 
     init: function() { 
     var startCombo = this.lookupReference('startCombo'); 
     var endCombo = this.lookupReference('endCombo'); 
     startCombo.validator = Ext.bind(this.comboValidator, this, [startCombo, endCombo]); 
     endCombo.validator = Ext.bind(this.comboValidator, this, [startCombo, endCombo]); 
     }, 
     comboValidator: function(startCombo, endCombo) { 
     return startCombo.getValue() < endCombo.getValue(); 
     }, 
     onSelectComboBox: function(combo) { 
     var startCombo = this.lookupReference('startCombo'); 
     var endCombo = this.lookupReference('endCombo'); 
     startCombo.validate(); 
     endCombo.validate(); 
     } 
    }); 

    Ext.define('MyCombosContainer', { 
     extend: 'Ext.form.FieldContainer', 
     controller: 'mycomboscontainer', 
     layout: { 
     type: 'hbox', 
     align: 'stretch' 
     }, 
     items: [{ 
     xtype: 'myCombo', 
     reference: 'startCombo', 
     fieldLabel: 'Start', 
     listeners: { 
      select: 'onSelectComboBox' 
     } 
     }, { 
     xtype: 'myCombo', 
     reference: 'endCombo', 
     fieldLabel: 'End', 
     listeners: { 
      select: 'onSelectComboBox' 
     } 
     }] 
    }); 

    Ext.create('MyCombosContainer', { 
     renderTo: Ext.getBody() 
    }); 
    } 
}); 

Answer 4

验证链接的字段I usua lly创建函数（我将它添加到我的Ext.lib.Validators类中，这样我就可以在整个应用程序中调用它），它返回一个带有预配置作用域和验证逻辑的匿名函数（这样我就可以在整个应用程序中多次使用它）。

下面是一个例子：

myValidator: function (firstFieldSelector, secondFieldSelector, thirdFieldSelector) { 
    return function() { 
     var firstField = Ext.ComponentQuery.query(firstFieldSelector)[0], 
      secondField= Ext.ComponentQuery.query(secondFieldSelector)[0], 
      thirdField= Ext.ComponentQuery.query(thirdFieldSelector)[0]; 

     if (firstField && secondField && thirdField) { 
      // Validation logic here... 
      if(true) { 
       return true; 
      } else { 
       return 'Error text here...'; 
      } 
     } else { 
      // Validator incorrectly configured, do not validate with it 
      return true; 
     } 
    } 
} 

这里是一个example fiddle有时间跨度的选择。