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 相关文章推荐
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
p5.js临摹动态图形的方法
Oct 23 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
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
永不消失的title提示代码
2007/02/15 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
python函数参数*args**kwargs用法实例
2013/12/04 Python
python实现360的字符显示界面
2014/02/21 Python
浅谈Python中函数的参数传递
2016/06/21 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
Python中pass的作用与使用教程
2020/11/13 Python
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
班风口号
2014/06/18 职场文书
微笑服务标语
2014/06/24 职场文书
美术课外活动总结
2014/07/08 职场文书
倡议书作文
2015/01/19 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
法定代表人身份证明书
2015/06/18 职场文书
导游词之江南周庄
2019/12/06 职场文书
Python利用capstone实现反汇编
2022/04/06 Python