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.

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.

• javascript
• extjs

3 Answers 3

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.

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.

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.