View Full Version : Dynamic store assignment to combobox

9 Apr 2012, 6:16 AM
I have a situation where the choice made in one combobox determines the store used in a second combobox, however I do not see a way to reassign the store (i.e. setStore(store)). I know this is not an uncommon need, so how is this usually done? In my case, I am reading the different stores for combobox #2 from different tables in a database based on the choice in combobox #1. I was hoping I could assign the store in a function call made by a change listener on combobox #1.

9 Apr 2012, 6:22 AM

9 Apr 2012, 6:38 AM
Thanks. I didn't see that method. I'll give it a shot.

9 Apr 2012, 8:15 AM
How would I reset the displayField and valueField values to match the new table. The bindStore call seems to be running but without changing these values, I think it is preventing me from seeing the store change. I get 'not a function' errors when trying to run combobox.setDisplayField(fieldname) and combobox.setValueField(fieldname).

9 Apr 2012, 8:27 AM
combobox does not have setValueField() and setDisplayField() methods. To change displayField and valueField you should change its respective properties:

combobox.displayField = newDisplayField;
combobox.valueField = newValueField;

9 Apr 2012, 9:24 AM
Well that was simple. I was looking too deeply into the assignment of those properties apparently.

This seems to work well once, but if I need to change the store, it doesn't seem to work.

E.g. I choose an option from combobox #1 and assign the correct store to combobox #2. This much works. I look at combobox #2 and realize I needed to choose another option from combobox #1. I change the choice in combobox #1 to another option. Now combobox #2 has nothing in it.

I'm using a listener (on change) to call the method which assigns the store, display field, value field and clear the current value on combobox #2 and it does work the first time. As soon as I use the second combobox it seems to be locked into the store it has at the time.

I guess I am looking for more than dynamic assignment of the store, I am looking to be able to change the store after it has been loaded.

9 Apr 2012, 4:43 PM
Many things have been created and keep fix once the combobox created, such as display template, picker etc. bindStore() is suitable for changing data only provided that its fields are the same. I think, the best solution for your case is to destroy the old combobox and create a new one in place.

If you don't want this solution but want to use the same instance of combobox, below is my solution. However, I don't encourage to use you this way.

var store1 = Ext.create('Ext.data.Store', {
fields: ['f11', 'f12'],
data : [{
f11: 'f11.1', f12: 'v11.1'
f11: 'f11.2', f12: 'v11.2'
var store2 = Ext.create('Ext.data.Store', {
fields: ['f21', 'f22'],
data : [{
f21: 'f21.1', f22: 'v21.1'
f21: 'f21.2', f22: 'v21.2'

var store3 = Ext.create('Ext.data.Store', {
fields: ['f31', 'f32'],
data : [{
f31: 'f31.1', f32: 'v31.1'
f31: 'f31.2', f32: 'v31.2'

var form = Ext.create('Ext.form.Panel',{
renderTo: Ext.getBody(),
items: [{
xtype: 'combobox',
itemId: 'combo1',
store: store1,
valueField: 'f11',
displayField: 'f12',
queryMode: 'local',
listeners: {
change: changeStore
xtype: 'combobox',
itemId: 'combo2',
queryMode: 'local'

function changeStore(combo, value){
var fieldValue, displayField, store;
if(value == 'f11.1'){
store = store2;
valueField = 'f21';
displayField = 'f22';
} else {
store = store3;
valueField = 'f31';
displayField = 'f32';
var combobox = form.down('#combo2');
combobox.valueField = valueField;
combobox.displayField = displayField;

Ext.destroyMembers(combobox, 'displayTpl');
combobox.displayTpl = Ext.create('Ext.XTemplate',
'<tpl for=".">' +
'{[typeof values === "string" ? values : values["' + combobox.displayField + '"]]}' +
'<tpl if="xindex < xcount">' + combobox.delimiter + '</tpl>' +
Ext.destroyMembers(combobox, 'picker');


10 Apr 2012, 7:49 AM
Thanks for the help. I opted to just destroy the combobox and create a new one. Once I figured out how to re-insert the combobox into the original spot in the items array, it was pretty seamless. I didn't expect to have to jump through such hoops just to change a store, and this seems like the cleanest, most straight forward answer to the problem.

Thanks again for your help.

4 Sep 2012, 11:54 AM
From the previous post:

Once I figured out how to re-insert the combobox into the original spot in the items array

How did you do it ? Do you have an example of how to replace it and get the container to update ?
A link to some relevant (I'm using Ext 4.1) docs/discussions would be really helpful.

Update: I've now tried switching 2 comboboxes on a Panel, using remove() and insert().
It works once.. the second time the remove works but the insert fails.
There are no errors, exceptions, nulls or otherwise.
Stepping through it with a debugger makes it clear that I am indeed passing in a properly created combobox in the insert method.

I've also tried setting adding unique and identical itemId's on both the comboboxes I'm trying to switch between - no difference.

I find it quite strange that a usecase as common as this one is so difficult to get to work.

Again - if anyone has any pointers to some docs/relevant forums, I'd really appreciate it.

5 Sep 2012, 7:09 AM
I was re-using 2 comboboxes (creating them onload, then replacing them depending on feedback given via radiobuttons) and for some reason this does not work as documented.
I ended up creating the combobox from scratch every time I need to insert it into the panel.
For some reason, this works.
I'm not terribly impressed with the total lack of examples or other documentation for something so basic.
While looking for this info, I found virtually the same question for ext 1, 2, 3 and 4.x .. none of them answered.