ExtJS - dynamisch Dropdown/Picker ändern

Question

Ich habe eine ExtJS 6-Anwendung. Ich verwende die TagField-Komponente mit einer benutzerdefinierten Auswahl, bei der es sich um ein Raster mit einer Symbolleiste und einigen Schaltflächen handelt. In einigen Fällen möchte ich einen anderen Picker verwenden. Der zu verwendende Picker wird durch die Anzahl der gespeicherten Datensätze bestimmt.

Also, wenn Rekordzählimpuls> 50 I Kommissionierer A zeigen will, sonst zeigt Picker B.

Die Frage, die ich bin vor, dass der Kommissionierer vor seinem Speicher erstellt wird (was Sinn macht) und einmal den Picker ist erstellt es kann nicht AFAIK geändert werden. Und zu dem Zeitpunkt, zu dem der Laden geladen wird und ich die Anzahl der Datensätze überprüfe, ist es bereits zu spät, um den Picker zu ändern.

Also gibt es eine Möglichkeit, den Pflücker zu zerstören und einen neuen zu setzen? Ich brauche etwas wie eine "setPicker()" Methode.

Dank

Answer 1

Eine pragmatische Lösung wäre, zwei TagField Komponenten zu erstellen. Der eine verwendet den Picker A, der andere den Picker B. Dann müssen Sie nur einen Listener für das Ereignis load hinzufügen und die entsprechende Komponente basierend auf Ihrer Bedingung ein-/ausblenden.

Nicht so sauber, aber einfach und schnell zu implementieren.

Answer 2

Ich würde nur einen Pflücker verwenden und den Laden wechseln, um die Dinge einfach zu halten. Nachdem der Kommissionierer (Combobox) rendert können Sie bestimmen, welche für sie zu verwenden, speichern basierend auf der Anzahl der Datensätze von Store-Picker A

 { 
     xtype: 'combobox', 
     fieldLabel: 'Label', 
     listeners: { 
      afterrender: { 
       fn: 'onComboboxAfterRender', 
       scope: 'controller' 
      } 
     } 
    } 

In der Steuerung:

onComboboxAfterRender: function(component, eOpts) { 
    var store1 = this.getViewModel().getStore('store1'), 
     store2 = this.getViewModel().getStore('store2'); 

    if(store1.count > 50){ 
     component.bindStore(store1); 
    }else{ 
     component.bindStore(store2); 
    } 
}