ExtJs非Iframe架構載入頁面實現

在用Ext開發App應用時，一般的架構都是左邊為功能表列，中間為tab頁方式的顯示地區。而tab頁面大多採用的嵌入一個iframe來顯示內容。但是採用iframe方式有一個很大的弊端就是每次在載入一個新的iframe時都要將Ext的核心js，css檔案重新載入。由於Ext是一個龐大的類庫，這些檔案的體積都很龐大，僅僅是ext-all.js就有400多k，所以用iframe方式載入就大大降低了效率。為了能解決這個問題，我推薦使用Ext.Panel的autoload模式進行載入頁面。用這種模式載入就可以避免Ext核心檔案重新載入的問題。可以很好的提高程式的運行效率。以下我簡單介紹一下實現的過程和原理，以及我在開發是遇到的問題和如何解決這些問題。

  這種模式的幾個技術點在於

  1.菜單的點擊事件實現？
  2.將要載入的頁面該如何編寫？
  3.如何讓載入頁面的控制項的高度和寬度自適應，比如Panel，grid？   
   

  菜單事件的實現
  這個函數需要三個參數，
  a.模組編號，這個編號是自訂的，別且一定要唯一。在菜單點擊事件中要把這個編號傳過來，作為tab子頁的id
  b.模組的url，tab子頁autoload的url
  c.模組的名稱，tab子頁的title
  代碼如下：
  
   function addtab(id,link,name){
      var tabId = "tab-"+id; //為id稍作修改。
      var tabTitle = name;
      var tabLink = link;
   
      var centerpanel = Ext.getCmp('displayCenterPanel');
      var tab = centerpanel.getComponent(tabId);//得到tab組建
   
      var subMainId = 'tab-' + id + '-main';
   
      if(!tab){
   
        tab = centerpanel.add(
            new Ext.Panel({
                id:tabId,
                title:tabTitle,
                    //autoLoad:{url:tablink, scripts:true,nocache:true},
                autoScroll:true,
                iconCls:'tabIconCss',
                layout: 'fit',
                border:false,
                closable:true
            })
        );
        
        centerpanel.setActiveTab(tab);
　　　//載入頁面的方法
        tab.load({
            url: tabLink,   //URL地址
            method:'post',  //post or get
            params: {subMainId: subMainId},   //傳值
            scope: this, // optional scope for the callback
            discardUrl: true,
            nocache: true,
            text: "頁面載入中,請稍候……",  //頁面載入前的提示資訊
            timeout: 9000,   //頁面載入逾時設定
            scripts: true  //支援頁面所有的dom元素
        });
            
    }else{
        centerpanel.setActiveTab(tab);
    }   
}

   將要載入的頁面該如何編寫
   <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
   <%@ taglib prefix="s" uri="/WEB-INF/struts-tags.tld"%>
   <%
        String mainName = (String)request.getParameter("subWcid");
    %>
<script>
        /*
                用到的js檔案
                1、../js/appjs/frontMg/exposure/exposure.grid.js
                2、../js/appjs/frontMg/exposure/exposure.search.js
                3、../js/appjs/frontMg/exposure/exposure.view.js
                4、../js/appjs/frontMg/exposure/exposure.win.js
                5、../js/appjs/frontMg/exposure/exposure.js
        */
        var mainName = "<%=mainName%>";
        var Front_exposure_ButtonIds = '<s:property value="funccode"/>';
</script>

<div id="<%=mainName%>-p" style="height:100%"></div>

<script language="javascript" type="text/javascript" src="../js/appjs/frontMg/exposure/exposure2.js"></script>
   

    載入頁面的控制項的高度和寬度自適應
   由於這種使用autoload模式載入進來的頁面是不能隨著瀏覽器的大小變化而變化的。所以我們要實現瀏覽器的大小變化函數，即window.onresize事件。
   但是在實現這個事件的時候，一定要加上setTimeout來控制它，讓其延遲一會兒執行，否則是不能達到我們的效果。
  //控制tab頁面容器大小的函數
  function allComResize(){

        var modelidarr = modelids.split(",");
    var len = modelidarr.length;

    if(len==0){
        return false;
    }
   
    var w = Ext.getCmp('displayCenterPanel').getActiveTab().getInnerWidth();  
    var h = Ext.getCmp('displayCenterPanel').getActiveTab().getInnerHeight();
      
    for(var i=0; i<len;i++){
        var tmpmodelid = modelidarr;

        var subPage = Ext.getCmp("tab-"+tmpmodelid+"-main");

        if(subPage){

                subPage.setWidth(w);
                subPage.setHeight(h);
        }
        
    }
   

}
  //通過window.onresize事件來執行allComResize函數控制tab容器的大小
   var oTime;
window.onresize = function()
{
    if (oTime)
    {
        clearTimeout(oTime);
    }
    oTime = setTimeout("allComResize()", 100); //延遲100毫秒執行
}