通常我们使用html标签meta实现页面的自动刷新处理,这种方式会刷新整个html页面,但是很多情况下我们只需要更新页面中某一部分。Ext.UpdateManager为我们提供了一种随心所欲地刷新页面中任意部分的功能,并且为用户提供更好的浏览体验。
我们知道Ext.get()能够得到页面中任意一个Element的引用,只要该元素配置了一个id属性,请看下面的代码片段:
<
span
id
="loggedInAgents"
></
span
>
< span id ="busyAgents" ></ span >
< span id ="callsWaiting" ></ 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格式返回
null ,
true
);
var e1 = Ext.get( ' busyAgents ' );
var mgr1 = e1.getUpdateManager();
mgr1.disableCaching = true ;
mgr1.showLoadIndicator = false ;
mgr1.on( ' beforeupdate ' , function (){
e1.fadeOut();
});
mgr1.on( ' update ' , function (el, response ){
e1.fadeIn();
var doc = response.responseXML;
var busyAgents = doc.getElementsByTagName( " BUSYAGENTS " )[ 0 ].firstChild.nodeValue;
Ext.get( " busyAgents " ).dom.innerHTML = " <b><em> " + busyAgents + " </em></b> " ;
});
mgr1.startAutoRefresh(
15 ,
" <%=serverpath%>/ciscoQueueStat.do " ,
null ,
true
);
var e2 = Ext.get( ' callsWaiting ' );
var mgr2 = e2.getUpdateManager();
mgr2.disableCaching = true ;
mgr2.showLoadIndicator = false ;
mgr2.on( ' beforeupdate ' , function (el){
e2.fadeOut();
});
mgr2.on( ' update ' , function (el, response ){
e2.fadeIn();
var doc = response.responseXML;
var callsWaiting = doc.getElementsByTagName( " CALLSWAITING " )[ 0 ].firstChild.nodeValue;
var color = " <font color='black'> " ; // 根据返回值的大小,以不同的颜色显示
if ( callsWaiting >= 1 && callsWaiting <= 3 )
color = " <font color='green'> " ;
else if ( callsWaiting >= 4 && callsWaiting <= 10 )
color = " <font color='DarkOrange'> " ;
else if ( callsWaiting > 10 )
color = " <font color='red'> " ;
Ext.get( " callsWaiting " ).dom.innerHTML = color + " <b><em> " + callsWaiting + " </em></b> " + " </font> " ;
});
mgr2.startAutoRefresh(
15 ,
" <%=serverpath%>/ciscoQueueStat.do " ,
null ,
true
);
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格式返回
null ,
true
);
var e1 = Ext.get( ' busyAgents ' );
var mgr1 = e1.getUpdateManager();
mgr1.disableCaching = true ;
mgr1.showLoadIndicator = false ;
mgr1.on( ' beforeupdate ' , function (){
e1.fadeOut();
});
mgr1.on( ' update ' , function (el, response ){
e1.fadeIn();
var doc = response.responseXML;
var busyAgents = doc.getElementsByTagName( " BUSYAGENTS " )[ 0 ].firstChild.nodeValue;
Ext.get( " busyAgents " ).dom.innerHTML = " <b><em> " + busyAgents + " </em></b> " ;
});
mgr1.startAutoRefresh(
15 ,
" <%=serverpath%>/ciscoQueueStat.do " ,
null ,
true
);
var e2 = Ext.get( ' callsWaiting ' );
var mgr2 = e2.getUpdateManager();
mgr2.disableCaching = true ;
mgr2.showLoadIndicator = false ;
mgr2.on( ' beforeupdate ' , function (el){
e2.fadeOut();
});
mgr2.on( ' update ' , function (el, response ){
e2.fadeIn();
var doc = response.responseXML;
var callsWaiting = doc.getElementsByTagName( " CALLSWAITING " )[ 0 ].firstChild.nodeValue;
var color = " <font color='black'> " ; // 根据返回值的大小,以不同的颜色显示
if ( callsWaiting >= 1 && callsWaiting <= 3 )
color = " <font color='green'> " ;
else if ( callsWaiting >= 4 && callsWaiting <= 10 )
color = " <font color='DarkOrange'> " ;
else if ( callsWaiting > 10 )
color = " <font color='red'> " ;
Ext.get( " callsWaiting " ).dom.innerHTML = color + " <b><em> " + callsWaiting + " </em></b> " + " </font> " ;
});
mgr2.startAutoRefresh(
15 ,
" <%=serverpath%>/ciscoQueueStat.do " ,
null ,
true
);
上面的javascript代码定义了三个UpdateManager,每隔15秒,刷新三个span元素中的值。代码中使用的是struts action,关于ext和struts的交互,请看:http://blog.csdn.net/xujiaqiang/archive/2007/07/03/1677366.aspx
这种方式实现的内容刷新有局部淡出淡入的效果,不会导致页面的抖动,因此提供更好的用户体验。