How to wait until all stores are loaded in ExtJs?

extjs

Solution

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

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

Put these `storeIds` into an array.

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

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

Problem

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 } ```

Original source