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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
在textarea中显示html页面的javascript代码
Apr 20 Javascript
Dom操作之兼容技巧分享
Sep 20 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
javascript实现加载xml文件的方法
Nov 24 Javascript
Vue.js每天必学之表单控件绑定
Sep 05 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
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
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
利用js对象弹出一个层
2008/03/26 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
2016/12/30 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
Python全局变量操作详解
2015/04/14 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
Python正则表达式实现简易计算器功能示例
2019/05/07 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
python调用win32接口进行截图的示例
2020/11/11 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
员工培训心得体会
2013/12/30 职场文书
库房主管岗位职责
2013/12/31 职场文书
2014年国培研修感言
2014/03/09 职场文书
解除聘用合同证明书范本
2014/09/11 职场文书
销售顾问工作计划书
2014/09/15 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
学校师德师风整改方案
2014/10/28 职场文书
试用期辞职信范文
2015/03/02 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python