View Full Version : Combobox does not show the default value when store is loading

17 Aug 2011, 12:44 AM

I don't know if I should post this in the Bugs forum or here. Here is my problem:

I have a combo box that is filled by a store.
I have a method that retrieves the store if it already exists or creates it otherwise.

getStore : function (name){
this.stores = this.stores || new Array();
var store = this.stores[name];

if (store != null)
return store;

var proxy = Ext.create('Ext.data.proxy.Ajax', {...});

store = Ext.create('Ext.data.Store',
fields : ['id', 'name'],
autoLoad : true,
proxy : proxy

this.stores[name] = store;

return store;

Now if I create a combobox by using getStore(), with something like that

xtype: "mycombo"
fieldLabel: "Some label"
name: "GVAG"
value: "MyValue"
storeClass: "name..."


constructor : function (options)
this.store = EnumComboBox.getStore(options.storeClass);

this.valueField = 'id';
this.displayField = 'name';
this.queryMode = 'local';

return this;

and the store does have a field called MyValue, it is not preselected. (But the combox shows the values)
If after the store finished loading I show a combobox, the value is preselected.

Note that the combobox is filled dynamically and I can't know which store it will be using, therefore I am not able to preload the store.
I am using ExtJs 4.0.2a.

Is it a bug? a feature?


17 Aug 2011, 2:05 PM
If after the store finished loading I show a combobox, the value is preselected.

I'm guessing that this may be less of a bug and more of an issue produced by the order of events occurring when your component containing the combo box is rendered. I've had to learn (and relearn) more times than I can count that when something with ExtJS doesn't work, and there's not an obvious reason why (or a bug 8-|), it's usually a case of event timing.

Strictly based on what you said, I'd try moving the assignment of the store into the initComponent() of your combo's container. Something like:

initComponent: function() {
Ext.apply(this, {
store: getStore()

or this

initComponent: function() {
this.store = getStore();

17 Aug 2011, 9:32 PM
Thank you for your answer buford.

Actually, I already get the store before building the component. I do it in the constructor. I have updated the example in my first post.

This does not work, because getStore() returns before the store was loaded, since it is loaded asynchronously.

Any other good idea? Thanks

18 Aug 2011, 3:55 PM
A couple of thoughts.

Firstly, are you sure that MyValue is present as a valid value in the id field? Note that it has to be in the id field, not the name field.

You might like to try turning off autoLoad and setting queryMode = 'remote'. I would have expected it to work with local but it will be diagnostically interesting, if nothing else, to try remote instead.

18 Aug 2011, 10:13 PM
I had the same issue and tried both 'remote' and 'local' and both does not work.

for the moment I used following workaround:

store.on('load', function(store) {
combobox.select(store.data.filter(propertyField, valueToSearchFor)[0]));

its not nice but it works.

18 Aug 2011, 10:14 PM
I agree with the previous posters!

Just to add some general observations: It has very likely to do with that the store has not been loaded yet when the ComboBox initializes and renders.

Since your valueField != displayField the ComboBox cannot render the display field in such a situation. The only thing that it could do is to display the actual value instead of the display value. AFAIK this is not the behavior that Ext4 implements. It does not work well with the concept of a configurable displayField and/or displayTpl (see the ComboBox source).

In relation to local vs remote queryMode: Skimming over the source code I couldn't find an indication that this setting is relevant for the initial loading process. However, I might be wrong here since the remote load operation might actually consider the current value in an autoSelect setup.

Personally, I would fire up a debugger and see what happens in the ComboBox#onLoad method and when it fires. Keep in mind that debugging can affect the timing (e.g. if you step through the ComboBox constructor).

Note that there are some issues with ComboBox related to setting a value - maybe you are affected by one of them:

setting a value that is not in the list
setting a value when the store is not loaded yet



There is a handling in ComboBox#setValue for the situation where a value is set and the store has not finished loading yet:

if (me.store.loading) {
// Called while the Store is loading. Ensure it is processed by the onLoad method.
me.value = value;
return me;

However, I'm a bit confused that in the constuctor setValue is *not* called when the store has not been loaded yet.

// store has already been loaded, setValue
if (me.store.getCount() > 0) {


19 Aug 2011, 3:40 AM
Thanks you all your answers.

At least I am not the only one with this problem.

Changing the queryMode does not solve the problem.

I added a listener as raz0r1 suggested

this.store.on('load', function (store) {
}, this);

19 Aug 2011, 3:51 AM
i think you should write a bug report for this.

19 Aug 2011, 4:02 AM
Done (http://www.sencha.com/forum/showthread.php?144366-Combobox-does-not-show-the-default-value-when-store-is-loading)

19 Aug 2011, 8:51 PM
I'm sorry, but I have to point out that the code posted here is not a reproducible test-case. The sample data is missing as well!