Configure Grid’s store dynamically in Ext JS 4

One of the challenges when you use MVC architecture in Ext JS 4 is avoid coupling between view layer components and the store classes.

For example, if you’ve a grid panel that has to be configured with a store called ‘CountryStore‘, it’s bad idea to set it using the store property of the grid panel during the class definition. You would want to configure the store to be null and assign the value dynamically.

Ext.define("DuraSoft.view.CountryPanel",{
   extend : "Ext.panel.Panel",
   items : [
               {
                  xtype : "grid",
                  id : "countrygrid", 
                  store : null,
                  columns : [...]   
               }
           ]
});

You can configure the store property dynamically by using the reconfigure method of the grid panel class. The reconfigure method is used to set the store and columns of a grid. Though few users talk about overhead associated with calling this method, it doesn’t appear to be so. You can use the reconfigure method as shown below.

var countryStore = Ext.getStore("CountryStore");
countryStore.load();
var countryGrid = Ext.getCmp("countryGrid");
countryGrid.reconfigure(countryStore);