如何等待所有商店加载到ExtJs？

Question

我有一组由五个商店驱动的组合框,我想在所有商店完全加载后启动一个功能.这样做的推荐方法是什么？我可以做这样的事情,但感觉很糟糕:

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

使用这种store.isLoading()方法,我认为这就是它的用途.我用它,它工作正常.

1. 在使用配置执行某些逻辑之前,storeId配置要加载的存储.

2. 把它们storeIds放到一个数组中.

3. 每当加载其中一个商店迭代数组时,查找商店Ext.getStore并调用isLoading它.

4. 如果阵列中的所有商店仍未加载,请执行您的逻辑.

例如,假设我想要store1并store2在执行某些逻辑之前加载(我在非MVC模式中显示它,因为它看起来好像你没有使用你的代码片段中的MVC模式).

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

使用超时不是一个很好的解决方案,但是也不得不依赖商店经理的所有东西也不是很好.

我会这样做:

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
}

如果你正在使用它,你甚至可以把它变成一个类.