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(){
    store2Loaded = 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
    }
}