In ExtJS, how can I load storage when displaying a grid?

Question

In ExtJS, how can I load storage when displaying a grid? I want the store to load only when the grid is displayed (the user clicks on the button to show the grid, so it is wasteful to load the store in advance). I tried the afterrender , but it displays the load mask in the wrong place, and the afterlayout reloads the grid every time the grid changes.

Answer 1

This is one of those things that can be a little sick because they did too much to the browser (especially noticeable in IE).

I like to use a snooze combination to let the browser recover long enough to display things correctly.

 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 } }); 

A game with a delay / delay value should give you the desired results. The length of time that you will need to delay / defer depends on how complicated your grid is and how fast the browser is.

Also do not forget to remove the mask when your download to the repository is complete.

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

NOTE. Just a few clarifications to Lloyd's answer - you do not need to set autoLoad to false because this is the default value (i.e.: do not set it at all), and it looks like your description that you would like to use the Stores boot method instead of rebooting.

Answer 2

Have you considered handling event activate ? You can add an event handler that loads data into the activate event, and then deletes itself.

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

Here this refers to the GridPanel .

Answer 3

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