The typical usage pattern in Sencha’s ExtJS for loading data into a visual control such as a grid is to assign a grid to a store, then let the store have autoLoad: true which means that when the store is created, it will automatically be loaded and since it is assigned to a visual control (grid), the grid will be populated. I don’t like that pattern. I like to be more in control. There may be things I want to do before the grid is loaded.
So, what I do is in the application launch event I load my store first and in my store itself, I explicitly tell it not to autoLoad by setting autoLoad to false. Below is an example of the code I’m using at the moment to handle this. Notice that I cleverly show a load mask only if the the store takes more than 500 milliseconds to load.
launch: function() { var mask = new Ext.LoadMask(Ext.getBody(), {msg:"Loading Data..."}); var task = new Ext.util.DelayedTask(function(){ mask.show(); }); task.delay(500); // don't show mask for 500 milliseconds var ccyStore = Ext.data.StoreManager.lookup('CodeCampYear'); ccyStore.load({ scope: this, callback: function(records, operation, success) { // do on success var codeCampYearFirst = ccyStore.getById(8); var codeCampYearId = codeCampYearFirst.get("id"); var sessionsStore = Ext.data.StoreManager.lookup('Sessions'); sessionsStore.load({ params: { codeCampYearId: codeCampYearId, withNotApproved: true // always get all sessions and let filter deal with approved or not }, callback: function(records, operation, success) { task.cancel(); // make sure mask never shows since we are done mask.hide(); // mask may or may not be showing but hide anyhow, no harm. Ext.create('SessionEditor.view.MainView'); } }); } }); }
Hope this helps.