Ext.UpdateManager實現頁面任意部分自動刷新

使用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格式返回
  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元素中的值。 這種方式實現的內容刷新有局部淡出淡入的效果，不會導致頁面的抖動，
因此提供更好的用戶體驗。