Blog Archive

ExtJs 4 set ComboBox default value after store loading

You have to listen for the load event of the ComboBox store and then set the value of the ComboBox to the default value.
listeners: {
            load: function () {
                //set the ComboBox value here
            }
         } 

For example lets say the ComboBox is like this
//define the model
Ext.define('COMBO.model.Country', {
    extend: 'Ext.data.Model',
    fields: [
             'code',
             'name',
             'continent',
             'region',
             'lifeExpectancy',
             'gnp'
             ]
});

//define the ComboBox
Ext.define('COMBO.view.LocalCountrySearch', {
    extend: 'Ext.form.ComboBox',
    alias: 'widget.localCountrySearch',
    queryMode: 'local',
    displayField: 'name',
    valueField: 'code',  
    forceSelection: true,
    id: 'countrySearchBox',
    labelWidth: 150,
    fieldLabel: 'Please select a Country',
    size: 50,
    maxLength: 50,
    allowBlank : false,
    name: 'localCountry',
    store: 'LocalCountries' 
   
});

//define the store for the ComboBox above
Ext.define('COMBO.store.LocalCountries', {
    extend: 'Ext.data.Store',
    model: 'COMBO.model.Country',
    autoLoad: true,
    pageSize: 9999,
    
    proxy: {
        type: 'ajax',
        url: 'CountryServlet',
        reader: {
            type: 'json',
            root: 'countries',
            successProperty: 'success'
        },
     },
    
     listeners: {
            load: function () {
                //this sets the default value to USA after the store loads
                var combo = Ext.getCmp('countrySearchBox');
                combo.setValue("USA");
            }
         }
});

Set the ComboBox value based on the first entry in the store

listeners: {
            load: function () {
                //this sets the default value to USA after the store loads
                var combo = Ext.getCmp('countrySearchBox');
                combo.setValue(this.first().data.code);
            }
         }

Set the ComboBox value based on the last entry in the store

listeners: {
            load: function () {
                //this sets the default value to USA after the store loads
                var combo = Ext.getCmp('countrySearchBox');
                combo.setValue(this.last().data.code);
            }
         }

Set the value of the ComboBox from the controller


To listen to the store load event you must add the listener in the init config. Please click on the link below to see how
ExtJs 4 controller listen to Store events such as on a ComboBox load