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 相关文章推荐
JavaScript 设计模式学习 Singleton
Jul 27 Javascript
鼠标经过tr时,改变tr当前背景颜色
Jan 13 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
Jun 23 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
javascript实现起伏的水波背景效果
May 16 Javascript
基于JavaScript实现购物网站商品放大镜效果
Sep 06 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
layui实现table加载的示例代码
Aug 14 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
vue与iframe之间的信息交互的实现
Apr 08 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
php给每个段落添加空格的方法
2015/03/20 PHP
PHP时间和日期函数详解
2015/05/08 PHP
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
js中生成map对象的方法
2014/01/09 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
Angular4 ElementRef的应用
2018/02/26 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
Python导入oracle数据的方法
2015/07/10 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
vue+django实现下载文件的示例
2021/03/24 Vue.js
英语自我评价范文
2014/01/24 职场文书
代理协议书
2014/04/22 职场文书
选秀节目策划方案
2014/06/06 职场文书
房屋过户委托书范本
2014/10/07 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
嘉宾邀请函
2015/01/31 职场文书
劳动仲裁调解书
2015/05/20 职场文书
汉字听写大会观后感
2015/06/12 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS