Extjs 4 combobox default value

Question

I\'m migrating my application from ExtJs 3 to 4 version. I have several comboboxes at my formPanel, and previously I\'ve used hiddenName and all that stuff to submit valueFi

Answer 1

I bet this has to do with the time you (asynchronously) load the combobox, and the time you set the value of the combobox. To overcome this problem, simply do this:

Ext.define('idNamePair', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'string'},
        {name: 'name',  type: 'string'}
    ]
});

var dirValuesStore = new Ext.data.Store({
    model: 'idNamePair',
    proxy: {
        type: 'ajax',
        url: '../filtervalues.json',
        reader: {
            type: 'json',
            root: 'dir'
        }
    },
    autoLoad: false // set autoloading to false
});

Autoloading of the store is off. Now, after you have placed your ComboBox at a certain place -- using the code in your starting post -- you simply load the store manually: dirValuesStore.load();.

That is probably after the config Ext.apply(this, {items: [..., {xtype: 'combo', ...}, ...]}) in some component's initComponent().

Answer 2

Adding loading: true to your store config will fix it. There seems to be a problem with autoLoad: true and forceSelection: true. This little hack will make your combobox believe the store is loading even if the load function hasn't been fired yet.

Answer 3

I noticed your Combo config has queryMode: 'local'. That value is intended for when your data is stored locally in an array. But your model is using an AJAX proxy. Could it be that this confuses Ext so it can't find the default value you're trying to set? Try removing queryMode so it defaults to the value of 'remote' (or set it explicitly.)

UPDATE: I was migrating my own app from Ext3 to 4 right after posting the above, and I ran into the exact same problem. I'm sure queryMode is part of it, but the main problem is that the combobox doesn't have the data needed yet at the time it's rendered. Setting value does give it a value but there's nothing in the data store yet to match it with, so the field appears blank. I discovered that the autoLoad property can also specify a callback function to be used when the data is loaded. Here's what you could do:

store: new Ext.data.Store({
    model: 'MyModel',
    autoLoad: {
        scope: this,
        callback: function() {
            var comboBox = Ext.getCmp("MyComboBoxId");
            var store = comboBox.store;

            // set the value of the comboBox here
            comboBox.setValue(blahBlahBlah);
        }
    }
    ...
})