在用Ext開發(fā)App應(yīng)用時，一般的框架都是左邊為菜單欄，中間為tab頁方式的顯示區(qū)域。而tab頁面大多采用的嵌入一個iframe來顯示內(nèi)容。但是采用iframe方式有一個很大的弊端就是每次在加載一個新的iframe時都要將Ext的核心js，css文件重新加載。由于Ext是一個龐大的類庫，這些文件的體積都很龐大，僅僅是ext-all.js就有400多k，所以用iframe方式加載就大大降低了效率。為了能解決這個問題，我推薦使用Ext.Panel的autoload模式進行加載頁面。用這種模式加載就可以避免Ext核心文件重新加載的問題。可以很好的提高程序的運行效率。以下我簡單介紹一下實現(xiàn)的過程和原理，以及我在開發(fā)是遇到的問題和如何解決這些問題。

??這種模式的幾個技術(shù)點在于

??1.菜單的點擊事件實現(xiàn)？
??2.將要加載的頁面該如何編寫？
??3.如何讓加載頁面的控件的高度和寬度自適應(yīng)，比如Panel，grid？? ?
? ?

??菜單事件的實現(xiàn)
??這個函數(shù)需要三個參數(shù)，
??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>
? ?

? ? 加載頁面的控件的高度和寬度自適應(yīng)
? ?由于這種使用autoload模式加載進來的頁面是不能隨著瀏覽器的大小變化而變化的。所以我們要實現(xiàn)瀏覽器的大小變化函數(shù)，即window.onresize事件。
? ?但是在實現(xiàn)這個事件的時候，一定要加上setTimeout來控制它，讓其延遲一會兒執(zhí)行，否則是不能達到我們的效果。
??//控制tab頁面容器大小的函數(shù)
??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事件來執(zhí)行allComResize函數(shù)控制tab容器的大小
? ?var oTime;
window.onresize = function()
{
? ? if (oTime)
? ? {
? ?? ???clearTimeout(oTime);
? ? }
? ? oTime = setTimeout("allComResize()", 100); //延遲100毫秒執(zhí)行
}

?

原文地址：http://www.phpchina.com/bbs/viewthread.php?tid=97424

轉(zhuǎn)載于:https://www.cnblogs.com/nikyxxx/archive/2010/03/15/1686499.html

總結(jié)

以上是生活随笔為你收集整理的ExtJs非Iframe框架加载页面实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。