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 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
从Ajax到JQuery Ajax学习
Feb 14 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
如何使JavaScript休眠或等待
Apr 27 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
咖啡的化学
2021/03/03 咖啡文化
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
php中神奇的fastcgi_finish_request
2011/05/02 PHP
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
python中的二维列表实例详解
2018/06/19 Python
django使用graphql的实例
2020/09/02 Python
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
廉洁家庭事迹材料
2014/05/15 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
计算机教师工作总结
2015/08/13 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
如何用JS实现简单的数据监听
2021/05/06 Javascript
Python实现8种常用抽样方法
2021/06/27 Python