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

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

    }

}

　　

ExtJS 等待两个/多个store加载完再执行操作,码迷,mamicode.com

时间： 2024-08-08 13:55:17

ExtJS 等待两个/多个store加载完再执行操作的相关文章

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

ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架. Extjs加载Store是异步加载的,这有很多好处.但是当我们要在两个或多个不同的store加载完再执行一些操作时,异步加载就成了一个问题.在Stack Overflow 等网站搜集并试用了几个处理方法,总结如下. 1.自己定义一个组件 Ext.define(‘Ext.ux.StoreLoadCoordinator‘, { mixins: { observable: ‘Ext.util.Observable‘

【JS教程16】jquery文档加载完再执行

jquery文档加载完再执行 将获取元素的语句写到页面头部,会因为元素还没有加载而出错,jquery提供了ready方法解决这个问题,它的速度比原生的 window.onload 更快. <script type="text/javascript"> $(document).ready(function(){ ...... }); </script> 可以简写为: <script type="text/javascript"> $

页面加载完就执行的设置？

在JS中,如果希望在页面加载完成后执行某些操作的话,一般的写法如下: window.onload = function(){// some thing to do}; 但 是,onload函数的执行并不是我们通常所理解的浏览器构建完html页面对应的DOM树后立刻执行,而是要等到页面中所引用的图片等外部资源 完全下载完成后并且在浏览器中显示才执行,也就是说,如果页面中包括很多图片或者图片很大时将导致onload函数执行时间会被推迟很久,页面中基于 onload的特效或者其它相关内容将并不立刻可用

判断页面所有图片加载完成后执行操作

$(function(){ var _srcList = [], i = 0; //获取所有图片路径,存为数组 $('.bg').each(function(){ _srcList.push($(this).attr('src')); }) function imgLoadComplate(imgSrc){ var _img = new Image(); _img.src = imgSrc; _img.onload = function(){ //判断是否加载到最后一个图片 if (i < _s

javascript 实现页面加载完再显示页面

document.onreadystatechange = function () { if (document.readyState == "complete") { document.body.style.display = "block"; } else { document.body.style.display = "none"; }; }; document.onreadystatechange  是用来监听页面加载过程中的状态! re

图片加载完后执行js

<script>            window.onload=function(){                          var liwidth = $('.imgul li img').width();            $('.imgul li img').height(liwidth);        }    </script>

图片加载完后执行事件

var count=0; $append_items.find('img').on('load',function(){ count++; if(count == $append_items.length){ $masonry_box.append($append_items).masonry('appended',$append_items); } });

window.onload在文档加载完成后执行

验证a .b两点疑惑: a.<script src="./main.js"></script>中的window.onload是在html全部加载完了才执行,还是其在html中所处位置之前的加载完就执行? b. <script src="./main.js"></script>中window.onload有和没有 的区别是什么? 结论: a. answer:在html全部加载完了才执行. b. answer:区别就是,w

ExtJS中关于分页加载数据后执行一个回调函数的问题

前几天,一个项目中有用到ExtJS.之前修改的时候,只是在Store Load的时候执行一个回调,这个会导致翻页的时候,没有执行这个回调,而这个回调做的恰好是一些数据的格式验证不可或缺的. 被这个问题困扰了很久,也查了很多的关于ExtJs Store的应用和API,最终找到了一个解决的办法,其实很简单,就是在Store里面添加一个load事件的监听. new Ext.data.Store({... listeners: { "load": function (store, operat