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 , 100); //延迟100毫秒执行
}