Extjs加載Store是異步加載的，這有很多好處。但是當我們要在兩個或多個不同的store加載完再執行一些操作時，異步加載就成了一個問題。在Stack Overflow 等網站搜集并試用了幾個處理方法，總結如下。

1、自己定義一個組件 (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}} });

　2、使用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);

　　3、與方法二類似 （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.StoreManagerproxy: {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} }

　　

轉載于:https://www.cnblogs.com/guozhiguoli/p/3698562.html

總結

以上是生活随笔為你收集整理的ExtJS 等待两个/多个store加载完再执行操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。