ExtJs非Iframe框架加载页面实现

literary_fly

在用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毫秒执行} 原文地址：http://www.phpchina.com/bbs/viewthread.php?tid=97424