Extjs加载Store是异步加载的，这有很多好处。但是当我们要在两个或多个不同的store加载完再执行一些操作时，异步加载就成了一个问题。在Stack Overflow 等网站搜集并试用了几个处理方法，总结如下。
1、自己定义一个组件 (From:http://stackoverflow.com/questions/9379484/extjs-waiting-for-multiple-stores-to-load)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45 |
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，作为参数传过去。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
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）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44 |
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）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37 |
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 等待两个/多个store加载完再执行操作,码迷,mamicode.com
原文地址：http://www.cnblogs.com/guozhiguoli/p/3698562.html
