EXTJS 5 - tagfield ou caixa de combinação - show & ocultar campos de formulário

Question

Eu quero dinamicamente mostrar e ocultar os campos em um formulário, de acordo com os itens selecionados em um multiselect de caixa de combinação (tagfield).

Cada item selecionado na combobox tem vários associado campos de formulário ocultos (para mostrar).

Os campos têm a propriedade ocultos": true";

Eu posso mostrar os campos, mas eu não posso escondê-los quando eu excluir itens da caixa de combinação do campo ou 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) fornece o seguinte resultado:

Mostrar:

["itemone"]

["itemone", "itemtwo" ]

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

Ocultar:

["itemone", "itemtwo"]

["itemone"]

Você pode me dar, por favor, sugestões para corrigir o código.

Nota:desculpe para o próximo post anteriormente no lugar errado

Tentei implementar suas sugestões, mas sem sucesso (iniciantes dificuldades).

O meu 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 diz:

TypeError:de campos.setVisible não é uma função

Você pode ajudar com mais sugestões, por favor.

Merci.

Answer 1

De fato, o seu código tem uma lógica falha.Você faz todo o campo visível, mas quando, em seguida, remova o 3º tag, o que acontece?Você loop atualmente as marcas selecionadas na caixa de combinação, e como você mostrar a ele, você tem ["itemone", "itemtwo"], não "itemthree" lá.Para o último caso, o que poderia ocultar o 3º campo é nota executada.E assim por diante, para a segunda e a primeira marca.

O que eu faria em vez disso, é um loop através de cada campo, mostrar que se a marca for selecionado e escondê-la se ela não vai.Você pode usar records.indexOf('itemone') !== -1 por exemplo, para testar se a etiqueta for selecionada.

Outra dica, gostaria de usar uma propriedade personalizada com um nome diferenciado para os campos, permitindo que ambos simplificar o componente de consulta, e displicentemente saber a marca para testar contra os selecionados.

Aqui está o que eu quero dizer...Se você define os seus campos dessa maneira:

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

Você pode lhes obtenha todos os campos em uma consulta:

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

Você pode fazer a consulta mais específica, se você quer e, se aplicável, algo como "textfield[autoHideTag]" ou "campo[autoHideTag]".

E, finalmente, você vai conhecer a marca de teste para 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à.Divirta-se com o Ext!