Extjs 5 - Tagfield o Combobox - Mostrar y Ocultar campos de formulario

Question

Quiero mostrar y ocultar dinámicamente los campos en un formulario de acuerdo con los elementos seleccionados en un Multiselect Combobox (Tagfield).

Cada elemento seleccionado en el ComboBox tiene varios campos de formulario ocultos asociados (a mostrar).

Los campos tienen la propiedad "oculta: verdadero";

Puedo mostrar los campos, pero no puedo ocultarlos cuando borro los artículos del campo de ComboBox o de 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 (registros) proporciona el siguiente resultado:

Mostrar:

["itemone"]

["itemone", "itemtwo" ]

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

Ocultar:

["itemone", "itemtwo"]

["itemone"]

¿Puedes darme, por favor, sugerencias para corregir el código?

Nota: Perdón por la siguiente publicación previamente en el lugar equivocado

Intenté implementar tus sugerencias, pero sin éxito (dificultades para principiantes).

Mi código:

 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 dice:

TypeError: Fields.SetVisible no es una función

¿Puede ayudar con más sugerencias, por favor?

merci.

Answer 1

De hecho, su código tiene un defecto lógico. Usted hace visible todo el campo, pero cuando luego retire la 3ª etiqueta, ¿qué sucede? Utilice las etiquetas seleccionadas actualmente en el combo, y a medida que lo muestre, tiene ["itemone", "itemtwo"], no "ItemThree" allí. Así que su último caso, el que podría ocultar el 3er campo es la nota ejecutada. Y así sucesivamente para la segunda y primera etiqueta.

Lo que haría en su lugar está en bucle a través de cada campo, mostrarlo si la etiqueta está seleccionada y ocultarlo si no lo es. Puede usar records.indexOf('itemone') !== -1, por ejemplo, para probar si se selecciona la etiqueta.

Otra consejo, usaría una propiedad personalizada con un nombre distintivo para los campos, lo que le permitiría simplificar la consulta de componentes y saber sin pensar en la etiqueta para probar contra los seleccionados.

Aquí está lo que quiero decir ... Si define sus campos de esta manera:

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

Puedes obtener todos los campos en una consulta:

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

Puede hacer que la consulta sea más específica si desea y, si corresponde, algo así como "Textfield [AutoHideTag]" o "Campo [AutoHideTAG]".

y, finalmente, sabrá la etiqueta para probar este campo:

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

voilà. ¡Diviértete con ext!