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

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

Answer 2

Try this code:

var combo = new Ext.form.field.ComboBox({
    initialValue : something,
    listeners: {
        afterrender: function(t,o ) {
           t.value = t.initialValue;    
        }
    }
}) 

Answer 3

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().

Answer 4

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

Answer 5

Specifying the 'value' parameter in the config is a correct way to set the default values for comboboxes.

In your example, just set forceSelection:false, it will work fine.

In case you want to set forceSelection:true, you should make sure the data returned from your store contains an item which has the value equaling to your default value ('all' in this case).Otherwise, it'll be an empty text by default. To be more clearly, please replace your dirValuesStore definition by this:

    var dirValuesStore = Ext.create('Ext.data.Store', {
        fields: ['id', 'name'],
        data: [
            {id: 'all', name: 'All'},
            {id: '1', name: 'Name 1'},
            {id: '2', name: 'Name 2'},
            {id: '3', name: 'Name 3'},
            {id: '4', name: 'Name 4'}
        ]
    })

You will see it works!

Answer 6

In Extjs 5.0.1 this should work, in config combo:

...
editable: false,
forceSelection: true,
emptyText: '',