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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
JS实现音量控制拖动
Jan 15 Javascript
编写v-for循环的技巧汇总
Dec 01 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 和 COM
2006/10/09 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
基于Nodejs利用socket.io实现多人聊天室
2017/02/22 NodeJs
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
售后服务科岗位职责范文
2013/11/13 职场文书
后勤部长岗位职责
2013/12/14 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
入党自我鉴定
2014/03/25 职场文书
我爱读书演讲稿
2014/05/07 职场文书
和谐社区口号
2014/06/19 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
python - asyncio异步编程
2021/04/06 Python
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
redis内存空间效率问题的深入探究
2021/05/17 Redis
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技