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 valueField instead of displayField.

All my adaptation works fine (value field IS submitting), but I can't set the default values for comboboxes, they are shown as empty after page load. Previously, I did that just with specifying the 'value' parameter in config. Is there any ideas how to fix that?

My code - Model and Store:

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: true
});

Combo config:

{
    triggerAction: 'all',
    id: 'dir_id',
    fieldLabel: 'Direction',
    queryMode: 'local',
    editable: false,
    xtype: 'combo',
    store : dirValuesStore,
    displayField:'name',
    valueField:'id',
    value: 'all',
    width: 250,
    forceSelection:true
}

Solution 1

I had the same problem, afaik has to do with selectlist rendering before the items are added to the store. I tried the callback method mentioned above without any luck (guess it would have to be a callback on the selectlist rather than the store).

I added this line after adding items to the store and it works fine:

Ext.getCmp('selectList').setValue(store.getAt('0').get('id'));

Solution 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.

Solution 3

The best way for doing this is that listen to afterrender event and then set the default value in the callback function.

See this code:

new Ext.form.field.ComboBox({
    //This is our default value in the combobox config
    defaultValue: 0,
    listeners: {
        //This event will fire when combobox rendered completely
        afterrender: function() {
           //So now we are going to set the combobox value here.
           //I just simply used my default value in the combobox definition but it's possible to query from combobox store also.
           //For example: store.getAt('0').get('id'); according to Brik's answer.
           this.setValue(this.defaultValue);    
        }
    }
});

Solution 4

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

Solution 5

You can either put the logic directly into the callback, or set up a function to handle all stores.

var store1 = Ext.create('Ext.data.Store', {
    ...
    autoLoad: {
        callback: initData 
    }
});

var store2 = Ext.create('Ext.data.Store', {
    ...
    autoLoad: {
        callback: initData 
    }
});

var myComboStores = ['store1', 'store2']

function initData() {
    var loaded = true;
    Ext.each(myComboStores, function(storeId) {
        var store = Ext.StoreManager.lookup(storeId);
        if (store.isLoading()) {
            loaded = false;
        }
    }
    if(loaded) {
        // do stuff with the data
    }
}

=====================

For those reading, the value config/property on your 'combo' object should be set to some value so the combo box gets an initial value. You have already done this. The value 'all' also needs to be in your store before it'll set it as the default.

value: 'all'

Also, it's good practice to set a value for the valueField config, which you've done already. If you don't, the select listener won't get the correct value when calling combo.getValue().

View more solutions

Comments

[Admin]

@BlackLine Nice! I'd vote twice! This solution is simple and effective.

[rixo]

For those that are curious about why this works, it is because the Store constructor, defers the autoLoad's load call by 1ms (see at the end of the constructor code). Thus, the loading property of the store is set to true only after the combo box setValue method is called, and so the combo store thinks the store is loaded and the value is not valid (because the store is in fact empty).

[rixo]

I'd recommend fixing that system-wide by overriding Ext.data.Store#constructor to set loading to true if autoLoad is also true. E.g. Ext.define(null, { override: 'Ext.data.Store', constructor: function() { this.callParent(arguments); if (this.autoLoad) { this.loading = true; } } });