首页 > 代码库 > ExtJS 等待两个/多个store加载完再执行操作

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

2024-07-02 00:30:11   223人阅读

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 loaded
function initData() {
    var loaded;
    Ext.data.StoreManager.each( function(store) {
       loaded &= !store.isLoading();  
        return loaded;
    });
    if(loaded) {
        // do stuff with the data
    }
}

　　


联系
我们