使用Ext.UpdateManager实现页面任意部分自动刷新处理

本文转载来自优快云博客，转载请标明出处：http://blog.youkuaiyun.com/lee576/archive/2008/04/24/2323389.aspx

 

 通常我们使用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.youkuaiyun.com/xujiaqiang/archive/2007/07/03/1677366.aspx

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