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 相关文章推荐
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
javascript的BOM汇总
Jul 16 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 Javascript
简单学习vue指令directive
Nov 03 Javascript
JavaScript伪数组用法实例分析
Dec 22 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
Vue实现导航栏的显示开关控制
Nov 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怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
两款万能的php分页类
2015/11/12 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
微信JS接口大全
2016/08/25 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
2019/05/08 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
跟老齐学Python之网站的结构
2014/10/24 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
文化宣传方案
2014/03/13 职场文书
个人委托书格式
2014/04/04 职场文书
老师对学生的评语
2014/04/18 职场文书
工作岗位说明书模板
2014/05/09 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
React中的Context应用场景分析
2021/06/11 Javascript
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis