ExtJS 等待兩個/多個store加載完再執行操做

Extjs加載Store是異步加載的，這有不少好處。可是當咱們要在兩個或多個不一樣的store加載完再執行一些操做時，異步加載就成了一個問題。在Stack Overflow 等網站蒐集並試用了幾個處理方法，總結以下。

一、本身定義一個組件 (From:http://stackoverflow.com/questions/9379484/extjs-waiting-for-multiple-stores-to-load)

Ext.define('Ext.ux.StoreLoadCoordinator', {
mixins: {
    observable: 'Ext.util.Observable'
},
resetStoreLoadStates: function() {
    this.storeLoadStates = {};              

    Ext.each(this.stores, function(storeId) {
        this.storeLoadStates[storeId] = false;
    }, this);       
},    
isLoadingComplete: function() {
    for (var i=0; i<this.stores.length; i++) {
        var key = this.stores[i];

        if (this.storeLoadStates[key]==false) {
            return false;
        }
    }

    return true;        
},    
onStoreLoad: function(store, records, successful, eOpts, storeName) {
    this.storeLoadStates[store.storeId] = true;

    if (this.isLoadingComplete()==true) {
        this.fireEvent('load');
        this.resetStoreLoadStates();
    }
},    
constructor: function (config) {
    this.mixins.observable.constructor.call(this, config);

    this.resetStoreLoadStates();

    Ext.each(this.stores, function(storeId) {
        var store = Ext.StoreManager.lookup(storeId);

        store.on('load', Ext.bind(this.onStoreLoad, this, [storeId], true));
    }, this);

    this.addEvents(
        'load'            
    );
}});

　使用的時候把兩個不一樣的store，做爲參數傳過去。

var store1 =  Ext.create('Ext.data.Store', {
    storeId: 'Store1',
    .... (rest of store config)
}});        

var store2 =  Ext.create('Ext.data.Store', {
    storeId: 'Store2',
    .... (rest of store config)
}});        


var coordinatior = Ext.create('Ext.ux.StoreLoadCoordinator', {
    stores: ['Store1', 'Store2'],
    listeners: {
        load: function() {
           // Do post-load work
        }
    }
});        

　二、使用setInterval （From:http://blog.csdn.net/littlechang/article/details/8188303）

　

var bChartArr =[false, false, false, false];  
//加載圖表軸  
Ext.getStore("ChartAxes").load(  
{  
    params:{ queryId:queryId },  
    callback:function(){  
        bChartArr[0] = true;  
    }  
});  
//加載圖表序列  
Ext.getStore("ChartSeries").load(  
{  
    params:{ queryId:queryId },  
    callback:function(){  
        bChartArr[1] = true;  
    }  
  
});  
//加載圖表樣式  
Ext.getStore("ChartStyle").load(  
{  
    params:{ queryId:queryId },  
    callback:function(){  
        bChartArr[2] = true;  
    }  
});  
// 按鈕  
Ext.getStore("Buttons").load(  
{  
    params:{query_id:queryId},  
    scope:this,  
    callback:function(){  
        bChartArr[3] = true;  
    }  
});  
var me = this;  
// 等待全部的Storoe加載完成後執行  
var timer = setInterval(function(){  
    if(bChartArr[0] && bChartArr[1] && bChartArr[2] && bChartArr[3]){  
        clearInterval(timer); // 清除等待  
        // 解析圖表樣式、軸、序列動態生成圖表  
        me.createChartPanel();  
    }  
},100);  

　　三、與方法二相似 （From: http://stackoverflow.com/questions/9379484/extjs-waiting-for-multiple-stores-to-load）

var store1 = Ext.create('Ext.data.Store', {
    model: myModel,
    storeId: 'store1', //<-- adds this to Ext.data.StoreManager
    proxy: {
        type: 'ajax', 
        url: 'url...',
        reader: 'json'
    },
    autoLoad: {
        callback: initData
    }
});

var store2 = Ext.create('Ext.data.Store', {
    model: myModel,
    storeId: 'store2',
    proxy: {
        type: 'ajax', 
        url: 'url...',
        reader: 'json'
    },
    autoLoad: {
        callback: initData
    }
});

// Initialize store dependencies when all stores are loaded
function initData() {
    var loaded;
    Ext.data.StoreManager.each( function(store) {
       loaded &= !store.isLoading();   
        return loaded;
    });
    if(loaded) {
        // do stuff with the data
    }
}