EXTJS 5 – Tagfield oder Combobox – Formularfelder ein- und ausblenden

Question

Ich möchte Felder in einem Formular entsprechend den in einer Mehrfachauswahl-Kombinationsbox (Tagfeld) ausgewählten Elementen dynamisch ein- und ausblenden.

Jedem im Kombinationsfeld ausgewählten Element sind mehrere ausgeblendete Formularfelder zugeordnet (die angezeigt werden sollen).

Die Felder haben die Eigenschaft „hidden:true“;

Ich kann die Felder anzeigen, aber nicht ausblenden, wenn ich die Elemente aus dem Combobox-Feld oder dem Tagfield lösche.

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) liefert das folgende Ergebnis:

Zeigen:

["itemone"]

["itemone", "itemtwo" ]

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

Verstecken:

["itemone", "itemtwo"]

["itemone"]

Können Sie mir bitte Vorschläge zur Korrektur des Codes machen?

Notiz:Entschuldigung für den nächsten Beitrag, der vorher an der falschen Stelle war

Ich habe versucht, Ihre Vorschläge umzusetzen, aber ohne Erfolg (Anfängerschwierigkeiten).

Mein 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 sagt:

TypeError:Fields.setVisible ist keine Funktion

Können Sie mir bitte mit weiteren Vorschlägen helfen?

Merci.

Answer 1

Tatsächlich weist Ihr Code einen logischen Fehler auf.Sie machen alle Felder sichtbar, aber was passiert, wenn Sie dann das dritte Tag entfernen?Sie durchlaufen die aktuell ausgewählten Tags in der Kombination, und wenn Sie sie anzeigen, haben Sie es getan ["itemone", "itemtwo"], kein „item three“ drin.Ihr letzter Fall, der das dritte Feld verbergen könnte, ist also die Notiz ausgeführt.Und so weiter für das zweite und erste Tag.

Stattdessen würde ich jedes Feld durchgehen, es anzeigen, wenn das Tag ausgewählt ist, und es ausblenden, wenn es nicht ausgewählt ist.Sie können verwenden records.indexOf('itemone') !== -1 um beispielsweise zu testen, ob das Tag ausgewählt ist.

Ein weiterer Tipp: Ich würde eine benutzerdefinierte Eigenschaft mit einem eindeutigen Namen für die Felder verwenden, um sowohl die Komponentenabfrage zu vereinfachen als auch das Tag zu kennen, das mit den ausgewählten Feldern verglichen werden soll.

Folgendes meine ich...Wenn Sie Ihre Felder auf diese Weise definieren:

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

Sie können alle Felder in einer Abfrage abrufen:

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

Wenn Sie möchten, können Sie die Abfrage spezifischer gestalten, beispielsweise mit „textfield[autoHideTag]“ oder „field[autoHideTag]“.

Und schließlich wissen Sie, welches Tag für dieses Feld getestet werden soll:

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

Voilà.Viel Spaß mit Ext!