ExtJS wait for two/more stores to finish loading and then perform the operation

ExtJS is a front-end Ajax framework that is primarily used to create a front-end user interface and is a basic background-agnostic technology.

The ExtJS load store is loaded asynchronously, which has many benefits. However, asynchronous loading becomes a problem when we want to perform some operations after loading two or more different stores. In the stack Overflow and other sites collected and tried a few processing methods, summarized as follows.

1. Define a component yourself

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 ');});

Use two different stores as parameters to pass through.

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

2. Using SetInterval

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);  

3. Similar to Method two

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 loadedfunction initData() {    var loaded;    Ext.data.StoreManager.each( function(store) {       loaded &= !store.isLoading();          return loaded;    });    if(loaded) {        // do stuff with the data    }}

 

ExtJS wait for two/more stores to finish loading and then perform the operation