ExtJS中TabPanel用iframe載入其他完整頁面的處理方法

前幾天工作中需要使用Ext的TabPanel標籤頁載入兩個完整頁面。就在網上查，看到了這篇文章：“Ext.TabPanel之第一式”。這篇文章講解到如何在“用iframe載入其他完整頁面的tabpanel”。但是，裡面只載入了一個頁面，而且切換頁面時，是點擊TabPanel外的一個“連結”，然後使用onclick事件來處理的。顯然，不符合要求。不過，這篇文章也給我指明了方向，教會了如何使用TabPanel。可以照著這個思路做處理。

第一個方法：

照著那篇文章，同時參考ExtJS的API文檔，寫一個例子。步驟如下：

註：這裡我只粘貼最主要的代碼，至於ExtJS庫的引入方法和需要引入的檔案，請參考“深入淺出Ext JS（第二版）——學習筆記”；次要代碼，可以自己補充。

1、首先在頁面中引入ExtJS庫。然後在index.jsp的body標籤中，添加如下代碼：

註：請把keyIndex.jsp和alarmIndex.jsp存放在這個index.jsp檔案的同一目錄下。這兩個檔案的內容可以隨意填寫，只需要能區分開就可以了。

2、在index.jsp檔案的script（注意：這個標籤要放在引入ExtJS庫的script標籤後面）標籤中，添加產生TabPanel的代碼。如下：

Ext.onReady(function(){
    var firstActive = true; //處理載入時，事件監聽自動執行的問題。
       var kpiTab=new Ext.TabPanel({
              renderTo:'kpiTab',
              activeTab:0,
              height:438,//設定TabPanel標籤頁的高度。當用viewport布局時,這個height可以省去
              frame:true,
              items:[
                  {
                    contentEl:"keyFrame",
                    title:"關鍵資訊",
                    closable:false
                  },
                     {
                       contentEl:"alarmFrame",
                       title:"預警資訊",
                       closable:false
                     }
              ],
              listeners:{
                 'tabchange' : function(tp, panel){
                    if(firstActive){  //處理載入時，事件監聽自動執行的問題。我們讓第一次載入時不執行即可。
                       firstActive = false;
                    }else{
                     document.getElementById('alarmFrame').style.display='block';
                    }
                 }
              }
    });
});

這個標籤頁就可以正確載入兩個完整的頁面了。

這裡有兩個問題需要注意：

①、在iframe id=""alarmFrame"……style="overflow:hidden;display:none;""中，我把這個標籤的現實屬性設定為：display:none。這時因為，如果我不設定成隱藏的話，在載入完之後，兩個iframe的內容都會在頁面上現實處理。這時不符合要求的。因為設定成隱藏。所以，需要添加事件處理。將它的現實屬性修改為可見。另外，這個“兩個iframe的內容都會在頁面上”的問題只有在載入完成後，第一次切換標籤頁之前，才會有。當切換一次標籤頁之後就沒有了。所以，只需要在第一次切換標籤頁時，把版面設定成可見即可。

②、由於TabPanel的事件監聽在載入時會自動執行一遍。而這時，我並不需要把《iframe id="alarmFrame"》設定設定成可見。所以，需要對事件處理需要做個特殊處理。詳細處理方法。請見代碼。

很顯然，這種方法一些不足，主要是添加事件監聽；同時，還要先把頁面隱藏起來。我相信，還會有更好的實現方式。java-javascript 風之境地