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 escape,unescape解决中文乱码问题的方法
May 26 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
JS解析XML实例分析
Jan 30 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
vue axios 二次封装的示例代码
Dec 08 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
vue滚动插件better-scroll使用详解
Oct 18 Javascript
JavaScript原型链详解
Nov 07 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 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
PHP写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
php分页示例分享
2014/04/30 PHP
php CI框架插入一条或多条sql记录示例
2014/07/29 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
用javascript实现点击链接弹出"图片另存为"而不是直接打开
2007/08/15 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
Python批量修改文件后缀的方法
2014/01/26 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
2014年会演讲稿范文
2014/01/06 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
青春雷锋观后感
2015/06/10 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
Python爬虫爬取全球疫情数据并存储到mysql数据库的步骤
2021/03/29 Python
HTML+JS实现在线朗读器
2022/02/15 Javascript