2010-12-07 6 views
4

J'ai ce formulaire dans ExtJs. Si field1 n'est pas vide, field2 ne doit pas être vide. Mais cela ne fonctionne pas même si l'auditeur tire.ExtJs Form Validation Question

{ 
xtype : 'panel', 
title : 'title 1', 
items : [{ 
    xtype : 'fieldset', 
    title : 'field A', 
    items : [{ 
     xtype : 'textfield', 
     fieldLabel : 'Line 1', 
     id : 'field1', 
     listeners: { 
      change: function(f, new_val) { 
      if (new_val) { 
       //alert("change" + new_val); 
       f.field2.allowBlank = false; 
      } else { 
       f.field1.allowBlank = true; 
      } 
     } 
    }, 
      code for field2 
      ] 
} 

Répondre

5

réponse partielle:

La raison pour laquelle votre code ne fonctionne pas est parce que allowBlank est une valeur de configuration - il a seulement un effet au moment où le composant est créé. Je vois cette erreur tout le temps - lorsque vous parcourez les documents de l'API, vous devez garder à l'esprit que toutes ces options de configuration ne sont efficaces que lors de la création d'objets - ce ne sont pas des propriétés publiques que vous pouvez modifier pour modifier un comportement. . Cela dit, je suis surpris qu'il n'y ait pas de méthode setAllowBlank() dans l'API. Je vais continuer à regarder autour et modifier cette réponse si je suis capable de trouver un moyen de le faire.

EDIT: Il semble que votre méthode devrait travail, de ma lecture du code source TextField. Donc la question est pourquoi n'est-ce pas.

EDIT2: Vous ne parvenez probablement pas à obtenir une référence à votre TextFields. f.field1 ne pointe probablement pas ce que vous pensez qu'il est. Vous pouvez résoudre ce problème en ajoutant un ref:'field1' à votre config TextField. Votre FormPanel aura alors une propriété appelée field1 que vous pouvez référencer.

+0

Je suis d'accord que allowBlank est une valeur de configuration et il doit être utilisé comme tel, mais vous pouvez toujours l'utiliser comme s'il s'agissait d'une propriété. Je l'ai fait sur mon projet précédent, et j'ai pu obtenir la fonctionnalité souhaitée décrite par l'OP. Maintenant j'ai juste besoin d'attendre jusqu'à ce que je rentre à la maison pour me rappeler comment le faire: P. Ne vous méprenez pas, le code était définitivement un kludge. – McStretch

+0

@McStretch - on dirait que vous avez raison. Juste eu un coup d'oeil sur le code, et en effet les internes de TextField juste inspectent this.allowBlank lors de la validation. Les docs devraient probablement le répertorier comme une propriété publique, pas une simple option de configuration. – timdev

+0

Je pense que les développeurs voulaient qu'il soit en lecture seule, mais il y a des cas où il est utile de modifier la propriété à la volée; comme le cas de l'OP. Donc oui je suis d'accord, il devrait probablement être une propriété à moins qu'il n'y ait une manière plus claire de développer cette fonctionnalité. – McStretch

2

Vous pouvez utiliser la fonction markInvalid. Par exemple:

if (new_val) { 
    if(f.field2.getValue() == ''){ 
     f.field2.markInvalid('Cannot be empty'); 
    } 
} else { 
    // clears invalid flags on the field. 
    f.field1.clearInvalid(); 
} 

ne dis pas que c'est le code exact à utiliser, mais vous pouvez voir de cette façon de marquer les messages non valides et non valides clairement. Il y a aussi la possibilité de créer vos propres validateurs même si je ne suis pas sûr que cela correspondrait parfaitement à vos besoins.