ExtJS 等待两个/多个store加载完再执行操作的方法

ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。

Extjs加载Store是异步加载的，这有很多好处。但是当我们要在两个或多个不同的store加载完再执行一些操作时，异步加载就成了一个问题。在StackOverflow等网站搜集并试用了几个处理方法，总结如下。

1、自己定义一个组件

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(vari=0;i<this.stores.length;i++){
varkey=this.stores[i];

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

returntrue;
},
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){
varstore=Ext.StoreManager.lookup(storeId);

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

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

使用的时候把两个不同的store，作为参数传过去。

varstore1=Ext.create(‘Ext.data.Store‘,{
storeId:‘Store1‘,
....(restofstoreconfig)
}});

varstore2=Ext.create(‘Ext.data.Store‘,{
storeId:‘Store2‘,
....(restofstoreconfig)
}});

varcoordinatior=Ext.create(‘Ext.ux.StoreLoadCoordinator‘,{
stores:[‘Store1‘,‘Store2‘],
listeners:{
load:function(){
//Dopost-loadwork
}
}
});

2、使用setInterval

varbChartArr=[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;
}
});
varme=this;
//等待所有的Storoe加载完成后执行
vartimer=setInterval(function(){
if(bChartArr[0]&&bChartArr[1]&&bChartArr[2]&&bChartArr[3]){
clearInterval(timer);//清除等待
//解析图表样式、轴、序列动态生成图表
me.createChartPanel();
}
},100);

3、与方法二类似

varstore1=Ext.create(‘Ext.data.Store‘,{
model:myModel,
storeId:‘store1‘,//<--addsthistoExt.data.StoreManager
proxy:{
type:‘ajax‘,
url:‘url...‘,
reader:‘json‘
},
autoLoad:{
callback:initData
}
});

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

//Initializestoredependencieswhenallstoresareloaded
functioninitData(){
varloaded;
Ext.data.StoreManager.each(function(store){
loaded&=!store.isLoading();
returnloaded;
});
if(loaded){
//dostuffwiththedata
}
}