Cambio dinámico de DataStore de un ComboBox

Question

Tengo un cuadro combinado que rellena sus valores según la selección de otro cuadro combinado. He visto ejemplos en los que los params en la tienda subyacente cambian en función de la selección, pero lo que quiero lograr es cambiar la tienda en sí misma del segundo combo según la selección en el primer combo. Este es mi código, pero no funciona. ¿Puede ayudarme alguien, por favor?

{ 
          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

¡¡¡Así no es como está diseñado para funcionar !! Cuando configura una tienda en la configuración, está vinculando una tienda al combo. No cambia la tienda, en su lugar se supone que debe cambiar los datos cuando sea necesario.

La forma correcta de hacerlo sería cargar la tienda con los datos correctos del servidor. Para obtener datos, puede pasar parámetros que ayudarán al código del servidor a obtener el conjunto de opciones que necesita cargar.

Answer 2

No querrá cambiar la tienda que se está usando ... En pocas palabras, la tienda está ligada al control a medida que se crea una instancia. Sin embargo, puede cambiar la URL y params/baseParams utilizados en cualquier solicitud POST adicional.

Usando estos parámetros, puede codificar su servicio para devolver diferentes conjuntos de datos en la tienda de su cuadro combinado.

Answer 3

Para el problema propuesto se puede tratar a continuación la solución:

Uso continuación fragmento de "escucha" por primera "leads_filter_by" combinado. Manejará la vinculación/cambio del almacenamiento dinámico para el segundo cuadro combinado.

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'; 
         } 
       } 
     } 

Espero que esta solución te ayude.

Gracias & Atentamente.

Answer 4

Tuve un problema similar. El segundo cuadro combinado cargaría la tienda y mostraría los valores, pero cuando seleccione un valor, en realidad no seleccionaría. Haría clic en el elemento de la lista y el valor del cuadro combinado permanecería en blanco.

Mi investigación también sugiere que no se recomienda cambiar las asignaciones de las tiendas y de campo en un cuadro combinado después de la inicialización de modo que aquí fue mi solución:

1. crear un contenedor en la vista que sostendría el cuadro combinado a dame un punto de referencia para volver a agregarlo
2. Toma una copia de la configuración inicial del combobox (esto me permite configurar mi configuración de forma no válida en la vista y no codificarla en mi función de reemplazo ...en caso de que quiero añadir otras propiedades de configuración posteriores)
3. Aplicar nueva tienda, campo de Valor y displayField a la configuración
4. Destruye viejo cuadro combinado
5. Crear nuevo cuadro combinado con configuración modificada
6. Usando mi referencia desde el paso 1, añado el nuevo cuadro combinado

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' 
}] 

controlador:

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); 
},