Ext.UpdateManager实现页面动态刷新与数据更新
在本文中,我们将探讨如何利用Ext.js库中的UpdateManager功能来实现在页面上任意部分进行自动刷新操作。Ext.UpdateManager是ExtJS框架提供的一种用于异步更新页面组件的技术,它使得开发者能够控制和管理网页上的数据更新,而无需重新加载整个页面。 首先,我们需要明确,Ext.UpdateManager并非在所有HTML元素上都自动生效,需要明确选择要刷新的元素。例如,在这段代码中,作者选择了三个特定的span元素,通过`Ext.get()`方法获取对应的id("loggedInAgents","busyAgents"和"callsWaiting"),然后创建并配置UpdateManager实例。设置`disableCaching`为`true`是为了防止不必要的缓存,提高数据实时性。 当开始自动刷新时,`startAutoRefresh`方法被调用,其参数包括每隔15秒执行一次的刷新频率(15秒),需要执行的Struts action("ciscoQueueStat.do")以及一个回调函数,这个回调在刷新前和刷新后执行。刷新前的回调`beforeupdate`事件中,元素会淡出(fadeOut),而在`update`事件触发后,元素内容会被更新,并使用响应的XML数据动态填充span元素,如显示"LOGGEDINAGENTS"节点的值,并使用CSS样式突出显示。 同时,代码还展示了如何为第二个要刷新的span元素("busyAgents")创建单独的UpdateManager实例(`mgr1`),并执行相似的操作。这样,我们就可以灵活地为页面的不同部分定制不同的刷新策略。 总结来说,这篇文章介绍了如何使用Ext.UpdateManager有效地管理页面局部刷新,提高用户体验,同时避免了不必要的性能开销。通过这种方式,开发者可以在不刷新整个页面的前提下,实现数据的实时更新,提高应用的响应性和交互性。
关键字: 使用ext.updatemanager实现页面任意部分自动刷新处理
通常我们使用html标签meta实现页面的自动刷新处理,这种方式会刷新整个html页面,但是很多情况下我们只需要更新页面中某一部分。Ext.UpdateManager为我们提供了一种随心所欲地刷新页面中任意部分的功能,并且为用户提供更好的浏览体验。
我们知道Ext.get()能够得到页面中任意一个Element的引用,只要该元素配置了一个id属性,请看下面的代码片段:
<span id="loggedInAgents"></span>
<span id="busyAgents"></span>
<span id="callsWaiting"></span>
上段代码定义了三个span元素,分别代表“登录座席数”、“忙数”、“等待电话数”。三个数值是变化的,我们需要周期性地更新三个数值。
var e = Ext.get('loggedInAgents'); //取得id属性值为'loggedInAgents'的span元素引用
var mgr = e.getUpdateManager(); //创建该span元素的UpdateManager实例
mgr.disableCaching = true; //关闭内容cache,否则会取cache中的内容,而不会刷新
mgr.showLoadIndicator = false;
mgr.on('beforeupdate',function(el){
e.fadeOut(); //淡出
});
mgr.on('update',function(el, response ){
e.fadeIn(); //淡入
var doc = response.responseXML; //得到action的返回内容(xml格式)
var loggedInAgents = doc.getElementsByTagName( "LOGGEDINAGENTS" )[0].firstChild.nodeValue; //从返回内容中得到新值
Ext.get( "loggedInAgents" ).dom.innerHTML = "<b><em>" + loggedInAgents + "</em></b>"; //更新span元素的内容(加粗、斜体)
});
mgr.startAutoRefresh(
15, //每隔15秒刷新一次
"ciscoQueueStat.do", //一个struts action,从后台取出新的数值,并以xml格式返回
下载后可阅读完整内容,剩余2页未读,立即下载
- 粉丝: 9
- 资源: 108
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 彩虹rain bow point鼠标指针压缩包使用指南
- C#开发的C++作业自动批改系统
- Java实战项目:城市公交查询系统及部署教程
- 深入掌握Spring Boot基础技巧与实践
- 基于SSM+Mysql的校园通讯录信息管理系统毕业设计源码
- 精选简历模板分享:简约大气,适用于应届生与在校生
- 个性化Windows桌面:自制图标大全指南
- 51单片机超声波测距项目源码解析
- 掌握SpringBoot实战:深度学习笔记解析
- 掌握Java基础语法的关键知识点
- SSM+mysql邮件管理系统毕业设计源码免费下载
- wkhtmltox下载困难?找到正确的安装包攻略
- Python全栈开发项目资源包 - 功能复刻与开发支持
- 即时消息分发系统架构设计:以tio为基础
- 基于SSM框架和MySQL的在线书城项目源码
- 认知OFDM技术在802.11标准中的项目实践