I am looking to create a dynamic form that shows and hides fields based on the selection made in a multi-select combo box (tagfield).
For each item selected in the combo box, there are hidden form fields associated with them.
These fields have the property "hidden:true".
I am able to show the fields based on selection, but facing issues with hiding them when items are removed from the combo box or 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;
}
}
}
}
The result of console.log(records) is as follows:
Show:
["itemone"]
["itemone", "itemtwo" ]
["itemone", "itemtwo", "itemthree"]
Hide:
["itemone", "itemtwo"]
["itemone"]
Please provide suggestions for correcting the code.
Note: Apologies for the previous post being in the wrong place
I attempted to implement your suggestions but faced difficulties due to being a beginner.
My 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 error message:
TypeError: fields.setVisible is not a function
Any further suggestions would be greatly appreciated.
Thank you.