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

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

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

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 (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,作为参数传过去。

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

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、与方法二类似

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
    }
}

 

时间: 2024-10-12 21:55:09

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

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 1

【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); } });

js中页面加载完成后执行的几种方式及执行顺序

在js和jquery使用中,经常使用到页面加载完成后执行某一方法.通过整理,大概是五种方式(其中有的只是书写方式不一样). 1:使用jQuery的$(function){}; 2:使用jquery的$(document).ready(function(){});前两者本质上没有区别,第1种是第2种的简写方式.两个是document加载完成后就执行方法. 3:使用jQuery的$(window).load(function(){}); 4:使用window.onload = function(){

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