Extjs 5 - Tagfield o ComboBox - Mostra e nascondi campi modulo

Question

Voglio mostrare e nascondere dinamicamente campi in un modulo secondo gli elementi selezionati in un ComboBox multiselect (Tagfield).

Ogni elemento selezionato nel ComboBox ha diversi campi di forma nascosti associati (da mostrare).

I campi hanno la proprietà "Hidden: True";

Posso mostrare i campi, ma non posso nasconderli quando eliminisco gli elementi dal campo ComboBox o dal 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 (record) fornisce il seguente risultato:

Mostra:

["itemone"]

["itemone", "itemtwo" ]

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

.

Nascondi:

["itemone", "itemtwo"]

["itemone"]

.

Puoi darmi, per favore, suggerimenti per correggere il codice.

Nota: Ci scusiamo per il prossimo post precedentemente nel posto sbagliato

Ho provato ad implementare le tue sugestioni, ma senza successo (difficoltà principianti).

Il mio codice:

 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: campi.setvisible non è una funzione

Puoi aiutare con più suggerimenti, per favore.

merci.

Answer 1

In effetti, il tuo codice ha un difetto logico. Fai visibile tutto campo, ma quando rimuovi il 3 ° tag, cosa succede? Loope su tag attualmente selezionati nella combo, e come lo mostri, hai ["itemone", "itemtwo"], no "Itemthree" lì dentro. Quindi il tuo ultimo caso, quello che potrebbe nascondere il 3 ° campo è stato scritto. E così via per il secondo e il primo tag.

Cosa farei invece è looping attraverso ogni campo, mostralo se il tag è selezionato e nasconderlo se non lo è. È possibile utilizzare records.indexOf('itemone') !== -1 ad esempio, per testare se il tag è selezionato.

Un altro consiglio, utilizzerei una proprietà personalizzata con un nome distintivo per i campi, consentendo sia per semplificare la query del componente e conoscere in modo senza mente il tag per testare quelli selezionati.

Ecco cosa intendo ... Se definisci i tuoi campi in questo modo:

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

.

Puoi loro ottenere tutti i campi in una query:

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

.

È possibile effettuare la query più specifica se si desidera e, se applicabile, qualcosa come "Textfield [Autohidetag] o" campo [Autohidetag] ".

E, infine, conoscerai il tag da testare per questo 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à. Divertiti con ext!