EXTJS 5 - tagfield ou combobox - afficher et masquer les champs du formulaire

Question

Je souhaite afficher et masquer dynamiquement les champs d'un formulaire en fonction des éléments sélectionnés dans une liste déroulante à sélection multiple (tagfield).

Chaque élément sélectionné dans la liste déroulante possède plusieurs champs de formulaire masqués associés (à afficher).

Les champs ont la propriété « hidden:true » ;

Je peux afficher les champs, mais je ne peux pas les masquer lorsque je supprime les éléments du champ combobox ou du tagfield.

listeners:{ 

    select:function( combo, records, eOpts) {

            var combo = Ext.ComponentQuery.query('#combo')[0];

            var field = Ext.ComponentQuery.query('#A')[0];                      

            var field1 =Ext.ComponentQuery.query('#B')[0];                      

            var field2 =Ext.ComponentQuery.query('#C')[0];


            var records = combo.getValue();

              console.log(records);

            for (var i = 0, count = records.length; i < count; i++) {

                    switch(records[i]) {

                    case 'itemone':

                        if(field.isHidden()) {
                            field.show();                   
                                }
                        else { 
                             field.hide();
                                }
                    break;

                    case 'itemtwo':

                        if(field1.isHidden()) {
                            field1.show();                  
                                }
                        else { 
                             field1.hide();
                                }                                       
                    break;

                    case 'itemthree':

                        if(field2.isHidden()) {
                            field2.show();                  
                                }
                        else { 
                             field2.hide();
                                }       
                    break;  
                } 
            }
        }
}

console.log(records) fournit le résultat suivant :

Montrer:

["itemone"]

["itemone", "itemtwo" ]

["itemone", "itemtwo", "itemthree"]

Cacher:

["itemone", "itemtwo"]

["itemone"]

Pouvez-vous me donner, s'il vous plaît, des suggestions pour corriger le code.

Note:désolé pour le prochain message précédemment au mauvais endroit

J'ai essayé de mettre en œuvre vos suggestions, mais sans succès (difficultés des débutants).

Mon code :

 listeners:{ 

  select:function( combo, records, eOpts) {

    var combo = Ext.ComponentQuery.query('#combo')[0];

    var fields = Ext.ComponentQuery.query('[autoHideTag]');

    var records = combo.getValue();

      console.log(records);

    for (var i = 0, count = records.length; i < count; i++) {

            fields.setVisible(records.indexOf(fields.autoHideTag) !== -1 ); 

            switch(records[i]) {

            case 'itemone':

                if(field.isHidden()) {
                    field.show();                   
                        }
                else { 
                     field.hide();
                        }
            break;

            case 'itemtwo':

                if(field1.isHidden()) {
                    field1.show();                  
                        }
                else { 
                     field1.hide();
                        }                                       
            break;

            case 'itemthree':

                if(field2.isHidden()) {
                    field2.show();                  
                        }
                else { 
                     field2.hide();
                        }       
            break;  
        } 
    }
  }
} 

Firebug dit :

Erreur-type:field.setVisible n'est pas une fonction

Pouvez-vous nous aider avec plus de suggestions, s'il vous plaît.

Merci.

Answer 1

En effet, votre code présente une faille logique.Vous rendez tous les champs visibles, mais lorsque vous supprimez ensuite la 3ème balise, que se passe-t-il ?Vous faites une boucle sur les balises actuellement sélectionnées dans le combo, et comme vous le montrez, vous avez ["itemone", "itemtwo"], pas de "élément trois" là-dedans.Donc votre dernier cas, celui qui pourrait cacher le 3ème champ n'est pas exécuté.Et ainsi de suite pour la deuxième et la première balise.

Ce que je ferais à la place, c'est parcourir chaque champ, l'afficher si la balise est sélectionnée et la masquer si ce n'est pas le cas.Vous pouvez utiliser records.indexOf('itemone') !== -1 par exemple, pour tester si la balise est sélectionnée.

Autre astuce, j'utiliserais une propriété personnalisée avec un nom distinctif pour les champs, permettant à la fois de simplifier la requête du composant et de connaître sans réfléchir la balise à tester par rapport à celles sélectionnées.

Voici ce que je veux dire...Si vous définissez vos champs de cette façon :

{
    xtype: 'textfield'
    ,autoHideTag: 'itemone' // custom marker
}

Vous pouvez obtenir tous les champs en une seule requête :

// select all components with property autoHideTag resolving to something truthy
var fields = Ext.ComponentQuery.query('[autoHideTag]');

Vous pouvez rendre la requête plus spécifique si vous le souhaitez et, le cas échéant, quelque chose comme "textfield[autoHideTag]" ou "field[autoHideTag]".

Et enfin, vous connaîtrez la balise à tester pour ce champ :

// setting a component visible or hidden when it is already the case has no side-effect
field.setVisible( records.indexOf(field.autoHideTag) !== -1 );

Voilà.Amusez-vous avec Ext !