我们知道Extjs加载Store是异步加载的,这有很多好处,这里不再说明。但有时也需要多个store同步加载,比如我这里遇到的情况:动态解析生成图表,需要同时加载完成图表样式、图表轴、图表序列和图表数据之后才能完整解析生成图表,任意一个store没有加载完成时,解析数据都会造成解析错误,所以必须保证全部store加载完成后才能正确进行解析。要怎么保存多个store加载的同步呢?经常查资料、和思考、尝试,发现使用setInterval就可以轻松的实现多个store的同步加载,具体实现如下:
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);
这样就有效的解决了Ext多个异步加载的store的同步问题。
说明:我这里使用了数组来判断数据是否加载完成。后来我想还有另外两个方法应该也是可以的:
1、使用一个计数代替数组,每个store加载完成时给计数加1,最后判断计数达到预期值;
2、对Store不使用callback,而使用store的isLoading()方法,当所有Stroe的isLoading( )都返回false时认为加载完成。
所列代码在产品中实际应用,确认可行。后面说明中的两个方法我没有进行尝试,不确定一定可行,有兴趣的可以尝试是否可行。
如果哪位大虾有其他可行方法或更好的方法,欢迎一起探讨。