Validation de champ dépendante ExtJs

Comment puis-je valider un champ qui dépend d'un autre domaine?

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

source d'informationauteur fastcodejava | 2011-03-03

  1. 25

    En ajoutant votre propre validateur personnalisé et y effectuer 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;
        }
    }
});
  2. 2

    J'ai fait la maquette, un exemple de la façon dont je le fais avec des zones de liste modifiables en Ext JS 5.1... il est facilement portable au Poste 4 du code, vous avez juste à faire usage de initComponent au lieu de ViewController de init. Voici le code (et Violon):

    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()
});
}
});
  3. 1

    définition du champ:

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

    prochaine dans initComponent (ou de l'auditeur, si vous préférez):

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

    et de définir gestionnaire dans 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 le Champ de valider la méthode renvoie false si la valeur passe de validation. Donc, marquant simplement un Champ non valide ne va pas empêcher l'envoi de formulaires soumis à l'Ext.forme.D'Action.Soumettre.clientValidation option."

    Pour cette raison combinaison allowBlank et setValue ( null ) break validation

  4. 0

    Pour valider les champs reliés j'ai l'habitude de créer la fonction (je ajouter à mon Ext.lib.Validators classe afin que je puisse l'appeler dans toute l'application) qui retourne une fonction anonyme préconfigurés de la portée et de la logique de validation (donc je peux l'utiliser plusieurs fois sur ma demande).

    Voici 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 un exemple de violon avec plage de temps de sélection.