Dynamically Changing DataStore ComboBox

Question

I have a combo box that populates its values ​​based on the choice of another combobox. I have seen examples where the parameters in the basic storage change depending on the choice, but I want to achieve a change in the storage of the second combo based on the selection in the first combo. This is my code, but it does not work. Can anybody help?

{ 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

This is not how it is designed to work! When you install the repository in the config, you associate the repository with the combo. You do not change the storage; instead, you must change the data when required.

The right way to do this is to load the repository with the correct data from the server. To get the data, you can pass parameters that will help the server code to get the set of parameters necessary for loading.

Answer 2

You will not want to change the storage used ... Simply put, the storage is bound to the control as it is created. However, you can change the URL and params / baseParams used in any additional POST requests.

Using these parameters, you can program your service to return different data sets in your list store.

Answer 3

For the proposed problem you can try below:

Use the snippet below for the first lead_filter_by combination. It will handle dynamic storage binding / change for the second drop down list.

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

We hope this solution helps you.

Thanks and respect.

Answer 4

I had a similar problem. The second combobox will load the store and display the values, but when I select the value, it will not actually be selected. I would click on a list item and the combobox value would remain empty.

In my research, it was also suggested that after initialization it is not recommended to change the mapping of the store and the field in the drop-down list, so here was my solution:

• Create a container in the view that combobox will be held to give me a link to add it later.
• Take a copy of the original configuration off combobox (this allows me to explicitly declare my configurator in the view, rather than writing it to the replace function ... in case I want to add other configuration properties later)
• Apply a new store, value Field and displayField to this configuration
• Destroy old combo boxes
• Create a new combobox with a reconfigured
• Using my link from step 1, add a new combo box

View:

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

:

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