How to wait until all stores are loaded in ExtJs?

Question

I have a set of combo boxes that are driven by five stores and I want to fire a function once all the stores are completely loaded. What is the recommended way of doing this? I could do something like this but it feels kludgy:

var store1Loaded = false; var store2Loaded = false;  store1.on('load', function(){     store1Loaded = true; });  store2.on('load', function(){     store1Loaded = true; });   store1.load(); store2.load();  function WaitForFunction() {     if (!store1Loaded || !store2Loaded)) {        setTimeout( WaitForFunction, 100);        return;     }     AllStoresLoaded(); }  function AllStoresLoaded(){       //Do Something } 

Answer 1

Use the store.isLoading() method, I think that is what it is for. I use it and it works fine.

1. Configure the stores that you want to be loaded before performing some logic with a storeId config.

2. Put these storeIds into an array.

3. Whenever one of these stores is loaded iterate through the array, lookup the store with Ext.getStore and call isLoading on it.

4. If none of the stores in the array are still loading, perform your logic.

For example, say I want store1 and store2 loaded before I perform some logic (I am showing this in non-MVC pattern because it looks like you are not using MVC pattern from your snippet).

var store1 = Ext.create('Ext.data.Store', {     model: myModel,     storeId: 'store1', // store needs to be done MVC style or have this config     proxy: {         type: 'ajax',          url: 'url...',         reader: 'json'     },     autoLoad: {         callback: initData // do this function when it loads     } });  var store2 = Ext.create('Ext.data.Store', {     model: myModel,     storeId: 'store2',     proxy: {         type: 'ajax',          url: 'url...',         reader: 'json'     },     autoLoad: {         callback: initData // do this function when it loads     } });  // the stores to be checked var myComboStores = ['store1', 'store2']  // function does logic if they are both finished loading function initData() {     var loaded = true;     Ext.each(myComboStores, function(storeId) {         var store = Ext.getStore(storeId);         if (store.isLoading()) {             loaded = false;         }     });     if(loaded) {         // do stuff with the data     } } 

Answer 2

Using timeouts isn't a great solution, however also having to rely on everything in the store manager isn't great either.

I'd do something like:

var allStores = [store1, store2],     len = allStores.length,     loadedStores = 0,     i = 0;  for (; i < len; ++i) {     allStores[i].on('load', check, null, {single: true}); }  function check() {     if (++loadedStores === len) {         AllStoresLoaded();     } }  function AllStoresLoaded() {     //Do Something } 

If you're using it alot you could even turn it into a class.