在用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,
? ?? ?? ?? ?method:'post',
? ?? ?? ?? ?params: {subMainId: subMainId},
? ?? ?? ?? ?scope: this, // optional scope for the callback
? ?? ?? ?? ?discardUrl: true,
? ?? ?? ?? ?nocache: true,
? ?? ?? ?? ?text: "页面加载中,请稍候……",
? ?? ?? ?? ?timeout: 9000,
? ?? ?? ?? ?scripts: true
? ?? ???});
? ?? ?? ?? ??
? ? }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毫秒执行
}