Extjs4 关于Store的一些操作(加载/回调/添加)


Posted in Javascript onApril 18, 2013

1、关于加载和回调的问题
ExtJs的Store在加载时候一般是延迟加载的,这时候Grid就会先出现一片空白,等加载完成后才出现数据;因此,我们需要给它添加一个提示信息!
但是Store却没有waitMsg属性。

解决方案
1.给store添加监听器,监听beforeload事件,加载前弹出提示框,加载完成后关闭提示框
2.callback为load的回调函数,在加载完成后执行,因此关闭提示框由它完成;
3.一定要给store的reload方法也添加callback函数,已关闭提示框
例子主要代码如下:

varmsgTip; // 一定要定义在使用前,且定义为全局变量 
var reportStore=new Ext.data.Store({ 
proxy:reportProxy, 
reader:reportReader, 
listeners:{ 
beforeload:function(){ 
msgTip = Ext.MessageBox.show({ 
title:'提示', 
width : 250, 
msg:'页面报表统计信息刷新中,请稍后......' 
}); 
} 
} 
}); 
reportStore.load({ 
callback: function(records, options, success){ 
msgTip.hide(); // 加载完成,关闭提示框 
} 
}); 
注意:如果有调用reload来重新刷新页面,reload也要添加callback函数来关闭提示框 
reportStore.reload({ 
callback: function(records, options, success){ 
msgTip.hide(); // 加载完成,关闭提示框 
} 
}); 
--------以下为其他参数------ 
store.load({ 
params:{start:0,limit:20}, //参数 
// callback是加载完毕时执行的回调函数,它包含3个参数:records参数表示获得的数据, 
// options表示执行load()时传递的参数,success表示是否加载成功。 
callback: function(records, options, success){ 
Ext.Msg.alert('info', '加载完毕'); 
}, 
scope: store, //Scope用来指定回调函数执行时的作用域 
add: false //Add为true时,load()得到的数据会添加在原来的store数据的末尾, 
//否则会先清除之前的数据,再将得到的数据添加到store中 
 
});

2、从一个store添加符合某条件记录给另一个store中
var MyDocnumStore_Load = function(store){ 
//var index = 0; 
store.each(function(record) { 
if(record.data.PlanCarNo != '' ) { //column_name 替换成你的列名, '1' 替换成你的值 
if (record.data.Docnum != _rec.get('Docnum')){ 
var _TmpStr = record.data.UseDate+'----->'+record.data.PlanCarNo; 
myDocnumStore.add({ 
'UpDocnum':record.data.Docnum 
,'DocnumDesc':_TmpStr 
,'UseDate':record.data.UseDate 
,'PlanCarNo':record.data.PlanCarNo 
}); 
} 
} 
}) 
myDocnumStore.sort('UseDate', 'ASC'); 
}; 
MyDocnumStore_Load(mystore); //载入可拼车列表;
Javascript 相关文章推荐
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
RequireJS使用注意细节
May 15 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 #Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 #Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 #Javascript
基于JQuery 选择器使用说明介绍
Apr 18 #Javascript
关于jquery css的使用介绍
Apr 18 #Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 #Javascript
jQuery使用技巧简单汇总
Apr 18 #Javascript
You might like
PHP5+UTF8多文件上传类
2008/10/17 PHP
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
python解析xml模块封装代码
2014/02/07 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
Python 基于jwt实现认证机制流程解析
2020/06/22 Python
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
美国时尚在线:Showpo
2017/09/08 全球购物
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
大学生毕业自荐信
2013/10/10 职场文书
平安建设实施方案
2014/03/19 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
终止劳动合同协议书
2014/10/05 职场文书
中学生学习保证书
2015/02/26 职场文书