Blog Archive

ExtJs 4 controller listen to Store events such as on a ComboBox load

Lets say you want to listen on the Load event of a ComboBox store. You can addListener to your store as shown below ...
init : function() {
      myCountryStore.addListener('load',this.onCountryStoreLoaded, this);
      this.control({
  'window' : {
   render : this.onWindowRendered,
   },
   .......
      }, 

OR get reference to your window or panel ComboBox during the Render event and then get the ComboBox store by Ext.getCmp(id).store and then add the Listener to the store as shown below
onWindowRendered : function(win) {
        //just a console log to show when the window is rendered
        console.log('The window was rendered');
        Ext.getCmp('myCountrySearchBox').store.addListener('load',this.oncountryStoreLoaded, this);
        },

onCountryStoreLoaded: function(){
        var combo = Ext.getCmp('myCountrySearchBox');
        if(combo){
              combo.setValue("USA");
        }
    },

Sample source code for the ComboBox store

//define the store
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('myCountrySearchBox');
                combo.setValue("USA");
            }
         }
});

//create the store
var myCountryStore = Ext.create('COMBO.store.LocalCountries');