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

1、自己定义一个组件 (From:http://stackoverflow.com/questions/9379484/extjs-waiting-for-multiple-stores-to-load)

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 (From:http://blog.csdn.net/littlechang/article/details/8188303)

 

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)

var store1 = Ext.create('Ext.data.Store', {model: myModel,storeId: 'store1', //<-- adds this to Ext.data.StoreManagerproxy: {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}
}

  

转载于:https://www.cnblogs.com/guozhiguoli/p/3698562.html

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

  1. 怎样使页面加载完再执行js代码

    怎样使页面加载完再执行js代码 由于HTML页面的加载顺序是从上到下,所以js代码要写在页面靠下的位置,否则可能会发生元素获取不到的问题,为了避免这种情况,可以通过页面元素加载完之后,再执行js代码, ...

  2. selenium等待定位标签加载完再执行

    遇到的问题描述 我们经常会碰到用selenium操作页面上某个元素的时候, 需要等待页面加载完成后, 才能操作.  否则页面上的元素不存在,会抛出异常. 比如: 一个动态网页使用了ajax的异步加载, ...

  3. dom加载完再执行 vue_vue中等页面dom加载完毕后执行某方法?

    最近在玩一个类似拼图的东东,业务场景就是在主图加载到页面的时候,计算主图相对页面容器的缩小放大系数,通过这个系数计算子图的左边及宽度 问题:在mounted中调用计算主图的原始宽高时,提示元素为空(通 ...

  4. vue组件加载完成之后执行方法_vuejs实现ready函数加载完之后执行某个函数的方法...

    编程之家收集整理的这篇文章主要介绍了vuejs实现ready函数加载完之后执行某个函数的方法,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考. vue.js 教程 Vue.js(读音 /v ...

  5. vue组件加载完成之后执行方法_Vue.js实现ready函数加载完之后执行某个函数的方法...

    Vue.js实现ready函数加载完之后执行某个函数的方法 发布于 2020-7-10| 复制链接 摘记: vue.js 教程Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面 ...

  6. js 和jQuery(自动执行函数)立即执行函数和页面加载完后执行函数写法

    js 立即执行函数的写法. js 立即执行函数只能用于匿名函数,如果声明了函数名是不可以用立即执行的,通常在函数表达式后加一对小括号()用于立即执行 如果想让函数不被调用的情况下,立即自动执行,需要在 ...

  7. 网页Loading,让页面加载完再显示

    原文链接:http://www.iew3c.com/code-sharing/6672.html 一个真正的网页LOADING,不是装模作样的,网页真正加载完才显示,若没加载完则一直显示进度条,你可以 ...

  8. 图片加载完成再执行事件

    //图片加载 function load(imgSrc,callback) { var imgs = []; var c = 0; for (var i = 0; i < imgSrc.leng ...

  9. 在页面加载完后执行jQuery代码

    $(window).load(function() { (function($){ $(document).ready(function(){     //这里写需要执行的代码 }); })(jQue ...

最新文章

  1. 国家集训队2009 书堆
  2. GCD -- 倒计时
  3. log4j:WARN Please initialize the log4j system properly
  4. 专家预测第二波WannaCry勒索病毒攻击即将到来!
  5. jzoj6312-Lottery【dp,前缀和】
  6. php读取云平台数据库,读取Read · ThinkPHP5+数据库和模型 · 看云
  7. 使用 Strace 和 GDB 调试工具的乐趣
  8. IDC机房对接阿里云
  9. Pytorch——DataLoader的学习笔记~
  10. aws cloud map_Amazon EC2 – AWS Elastic Compute Cloud
  11. ice php 5.6.32,PHP通过ice调用python程序
  12. 数据可视化一:Excel数据可视化
  13. 破解APK并修改APK的包名
  14. GitHub Desktop图文教程
  15. [Linux字符驱动] DIDO 74HC595实现遥控遥信功能
  16. python的内存调优_python内存机制与垃圾回收、调优手段
  17. Linux:乌班图安装jdk
  18. 软件工程导论张海蕃书籍pdf_《软件工程导论》张海蕃 课后习题答案
  19. 【[BJOI2017]魔法咒语】
  20. arm armcm33 pack包_华为Liteos移植到stm32F03ZE

热门文章

  1. opencv求解AX=0
  2. linux文件需求管理,CaliberRM 需求管理系统
  3. oracle逻辑结构包含,在Oracle中,逻辑结构由哪几个部分组成?
  4. 【解决办法】torch交叉熵使用时遇到 Dimension out of range
  5. rust门卡有什么用_Rust能力养成之(10)用Cargo进行项目管理:扩展 调用与优化
  6. linux mysql运维_Linux运维常用的 MySQL基础命令
  7. onenote怎么同步到电脑_详解onenote保存与同步④:本地笔记奇葩的丢失经历
  8. perl unload gbk oracle 数据库
  9. android代码集EditText只要输入号码、信
  10. 【POJ】【2975】Nim