Modifica dinamica del DataStore di un ComboBox

Question

Ho una casella combinata che popola i suoi valori in base alla selezione di un'altra casella combinata. Ho visto esempi in cui i parametri nel negozio sottostante sono cambiati in base alla selezione, ma quello che voglio ottenere è cambiare lo stesso negozio del secondo combo in base alla selezione sul primo combo. Questo è il mio codice, ma non funziona. Qualcuno può aiutarmi per favore?

{ 
          xtype: 'combo', 
          id: 'leads_filter_by', 
          width: 100, 
          mode: 'local', 
          store: ['Status','Source'], 
          //typeAhead: true, 
          triggerAction: 'all', 
          selectOnFocus:true, 
          typeAhead: false, 
          editable: false, 
          value:'Status', 
          listeners:{ 
           'select': function(combo,value,index){ 
            var filter_to_select = Ext.getCmp('cmbLeadsFilter'); 
            var container = filter_to_select.container; 
            if (index == 0){ 
              filter_to_select.store=leadStatusStore; 
             filter_to_select.displayField='leadStatusName'; 
             filter_to_select.valueField='leadStatusId'; 
             } else if(index==1) { 
              filter_to_select.store=leadSourceStore; 
             filter_to_select.displayField='leadSourceName'; 
             filter_to_select.valueField='leadSourceId'; 
             } 
            } 
           } 
    },  
{ 
          xtype: 'combo', 
          id: 'cmbLeadsFilter', 
          width:100, 
          store: leadStatusStore, 
          displayField: 'leadStatusName', 
          valueField: 'leadStatusId', 
          mode: 'local', 
          triggerAction: 'all', 
          selectOnFocus:true, 
          typeAhead: false, 
          editable: false 
         },  

Answer 1

Non è così che è progettato per funzionare !! Quando si imposta un negozio nella configurazione, si vincola un negozio alla combo. Non cambi il negozio, ma dovresti cambiare i dati quando richiesto.

Il modo corretto di farlo sarebbe caricare il negozio con dati corretti dal server. Per recuperare i dati, puoi passare parametri che aiuteranno il codice lato server a ottenere il set di opzioni che devi caricare.

Answer 2

Non vorrai cambiare il negozio in uso ... In parole povere, il negozio è vincolato al controllo non appena viene istanziato. Tuttavia, è possibile modificare l'URL e i parametri/baseParam utilizzati in eventuali richieste POST aggiuntive.

Utilizzando questi parametri, è possibile codificare il servizio per restituire diversi set di dati nello store della casella combinata.

Answer 3

Per il problema proposto si può provare qui sotto soluzione:

Usa sotto frammento "ascoltatore" per la prima "leads_filter_by" combo . Gestirà l'associazione/modifica dinamica del negozio per la seconda casella combinata.

listeners:{ 
      'select': function(combo,value,index){ 
        var filter_to_select = Ext.getCmp('cmbLeadsFilter'); 
        var container = filter_to_select.container; 
        if (index == 0){ 
         //filter_to_select.store=leadStatusStore; 
         filter_to_select.bindStore(leadStatusStore); 
         filter_to_select.displayField='leadStatusName'; 
         filter_to_select.valueField='leadStatusId'; 
        } else if(index==1) { 
         //filter_to_select.store=leadSourceStore; 
         filter_to_select.bindStore(leadSourceStore); 
         filter_to_select.displayField='leadSourceName'; 
         filter_to_select.valueField='leadSourceId'; 
         } 
       } 
     } 

Spero che questa soluzione ti possa aiutare.

Grazie & Cordiali saluti.

Answer 4

Ho avuto un problema simile. La seconda casella combinata caricherà il negozio e visualizzerà i valori, ma quando selezionerei un valore, in realtà non selezionerebbe. Farei clic sulla voce dell'elenco e il valore della casella combinata rimarrebbe vuoto.

La mia ricerca ha anche suggerito che non è stato consigliato di cambiare il negozio e di campo mappature su una casella combinata dopo l'inizializzazione ecco era la mia soluzione:

1. creare un contenitore nella vista che terrebbe il combobox a dammi un punto di riferimento per aggiungerlo più tardi
2. Prendi una copia della configurazione iniziale dalla casella combinata (questo mi consente di impostare la mia configurazione in modo dichiarativo nella vista e non la codifica nella funzione di sostituzione ...nel caso in cui voglio aggiungere altre proprietà di configurazione successivi)
3. applicare nuovo negozio, ValueField e displayField a quella config
4. Destroy vecchia casella combinata
5. Crea nuova casella combinata con configurazione modificata
6. Usando il mio riferimento dal punto 1, aggiungo il nuovo combobox

vista:

items: [{ 
    xtype: 'combobox', 
    name: 'type', 
    allowBlank: false, 
    listeners: [{change: 'onTypeCombo'}], 
    reference: 'typeCombo' 
}, { // see controller onTypeCombo for reason this container is necessary. 
    xtype: 'container', 
    reference: 'valueComboContainer', 
    items: [{ 
     xtype: 'combobox', 
     name: 'value', 
     allowBlank: false, 
     forceSelection: true, 
     reference: 'valueCombo' 
    }] 
}, { 
    xtype: 'button', 
    text: 'X', 
    tooltip: 'Remove this filter', 
    handler: 'onDeleteButton' 
}] 

regolatore:

replaceValueComboBox: function() { 
    var me = this; 

    var typeComboSelection = me.lookupReference('typeCombo').selection; 
    var valueStore = Ext.getStore(typeComboSelection.get('valueStore')); 
    var config = me.lookupReference('valueCombo').getInitialConfig(); 

    /* These are things that get added along the way that we may also want to purge, but no problems now: 
    delete config.$initParent; 
    delete config.childEls; 
    delete config.publishes; 
    delete config.triggers; 
    delete config.twoWayBindable; 
    */ 
    config.store = valueStore; 
    config.valueField = typeComboSelection.get('valueField'); 
    config.displayField = typeComboSelection.get('displayField'); 
    me.lookupReference('valueCombo').destroy(); 
    var vc = Ext.create('Ext.form.field.ComboBox', config); 

    me.lookupReference('valueComboContainer').add(vc); 
},