使用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格式返回
     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

      这种方式实现的内容刷新有局部淡出淡入的效果，不会导致页面的抖动，因此提供更好的用户体验。