In ExtJS, how do I load a store when I display a grid?

Question

In ExtJS, how do I load a store when I display a grid? I want the store to load only when the grid is displayed (the user clicks on a button to show the grid, so it's wasteful to load the store beforehand). I tried the afterrender listener but it renders the loadmask in the wrong location, and the afterlayout listener reloads the grid every time the grid is resized.

Answer 1

This is one of those things that can be a bit of a pain to accomplish because were giving the browser too much to do at once (particularly noticeable in IE).

I like to use a combination of defer to let the browser recover long enough to render things properly.

var grid = new Ext.grid.GridPanel({
    ...,
    listeners : {
       render : function(grid){      
           grid.body.mask('Loading...');
           var store = grid.getStore();
           store.load.defer(100, store);
       },
       delay: 200
    }
});

Playing with the value of delay/defer should give you the desired results. The length of time you will need to delay/defer is dependent upon how complex your Grid is and how fast the browser is.

Also remember to remove the mask when your Store's load has completed.

listeners: {
    load: function(){
        yourGrid.body.unmask();
    }
}

NOTE: Just a few clarifications to the answer by Lloyd - you do not need to set autoLoad to false, because that is the default (ie: don't set it at all) and it sounds like from your description that you would want to use the Stores load method, instead of reload.

Answer 2

Have you considered handling activate event? You can add an event handler that loads data on activate event and then removes itself.

this.on('activate', function(){
 this.un('activate', arguments.callee);
    this.store.load();
}, this);

Here this refers to GridPanel.

Answer 3

You can set autoLoad to false for the store and just call store.reload(); when the user clicks on the button to show the grid.