EXTJS 5 - tagfield ou combobox - afficher et masquer les champs du formulaire
-
21-12-2019 - |
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.
La solution
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 !