Проверка зависимого поля 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

Я смоделировал пример того, как я делаю это с помощью комбинированных списков в Ext JS 5.1 ... он легко переносим на код Ext 4, вам просто нужно использовать initComponent вместо init ViewController * , Вот код (и 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 3

определение поля:

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

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

следующее в initComponent (или прослушивателе, если вы используете преференцию):

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 () не приводит к тому, что метод validate поля возвращает false, если значение проходит валидацию. Поэтому простая пометка поля как недействительного не помешает отправке форм, отправленных с установленным параметром Ext.form.Action.Submit.clientValidation."

По этой причине комбинация allowBlank и setValue (null) прервет проверку

Answer 4

Для проверки связанных полей я обычно создаю функцию (я добавляю ее в мой класс 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;
        }
    }
}

А вот пример скрипта с выбором временного интервала.