ExtJS 等待两个/多个store加载完再执行操作
2020-11-15 12:53
标签：style blog http 使用 os io Extjs加载Store是异步加载的，这有很多好处。但是当我们要在两个或多个不同的store加载完再执行一些操作时，异步加载就成了一个问题。在Stack
Overflow 等网站搜集并试用了几个处理方法，总结如下。 1、自己定义一个组件 (From:http://stackoverflow.com/questions/9379484/extjs-waiting-for-multiple-stores-to-load) 使用的时候把两个不同的store，作为参数传过去。 2、使用setInterval （From:http://blog.csdn.net/littlechang/article/details/8188303） 3、与方法二类似 （From: http://stackoverflow.com/questions/9379484/extjs-waiting-for-multiple-stores-to-load） ExtJS 等待两个/多个store加载完再执行操作,搜素材,soscw.com ExtJS 等待两个/多个store加载完再执行操作 标签：style blog http 使用 os io 原文地址：http://www.cnblogs.com/guozhiguoli/p/3698562.html
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‘ );
}});
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
}
}
});
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);
var store1 = Ext.create(‘Ext.data.Store‘, {
model: myModel,
storeId: ‘store1‘, //
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
}
}