Validation du champ dépendant ExtJs

Question

Comment valider un champ dépendant d'un autre champ?

{ 
    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

En ajoutant votre propre validateur personnalisé et effectuez votre validation.

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

définition du champ:

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

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

suivant dans InitComponent (ou auditeur si vous preffer):

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

et définir gestionnaire dans panneau 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() méthode ne provoque pas la méthode de validation du champ pour renvoyer false si la valeur réussit la validation. Donc, tout simplement marquer un champ comme invalide n'empêchera pas la soumission des formulaires soumis avec l'option Ext.form.Action.Submit.clientValidation ensemble. »

Pour cette combinaison raison allowBlank et setValue (null) casseront la validation

Answer 3

Je me suis moqué d'un exemple de la façon dont je fais cela avec des comboboxes dans Ext JS 5.1 ... il est facilement portable vers le code Ext 4, il faut juste utiliser initComponent au lieu de init de ViewController.Voici le code (et 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

Pour valider les champs liés I usua lly create function (j'ajoute ceci à ma classe Ext.lib.Validators pour que je puisse l'appeler dans toute l'application) qui retourne une fonction anonyme avec une portée préconfigurée et une logique de validation (pour pouvoir l'utiliser plusieurs fois dans mon application).

est un exemple:

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; 
     } 
    } 
} 

Et voici une sélection example fiddle avec timespan.