在用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
分享到:
相关推荐
在ExtJS6中,IFrame.js插件可能被用来创建和管理IFrame组件,以便在应用中加载外部资源或实现跨域通信。然而,根据描述,这个插件存在一个问题:在某些情况下,IFrame加载的内容可能无法正常访问。这可能是由于网络...
在ExtJs中实现Iframe的嵌入功能,主要目的是为了在Web应用中集成外部页面或报表内容。ExtJs是一个用于开发富互联网应用的JavaScript库,它提供了强大的界面组件和数据处理机制。而Iframe(内联框架)标签是HTML的一...
在ExtJS框架中,`TabPanel`组件是一个非常实用且强大的UI控件,它允许用户在一个界面上组织多个相关的视图或面板,并通过标签页的形式进行切换展示。在版本4.2.1中,`TabPanel`提供了丰富的API和方法来控制其行为,...
总结起来,`extjsIframe例子`是一个关于在ExtJS 2.0中使用IFrame的实践示例,通过自定义组件或组件加载器实现IFrame的功能,可以用于展示或操作外部资源。`miframe.js`和`mainPanel.js`是实现这一功能的关键代码文件...
### ExtJs部署及使用方法详解 #### 一、ExtJs部署与配置 ...通过以上步骤,我们可以有效地部署和使用ExtJs框架,实现丰富的用户界面和交互功能。这对于构建现代化的企业级应用来说是非常有帮助的。
本文主要讨论的是一个特定的场景:在ExtJS框架下,使用Firefox浏览器时,如何解决关闭并重新打开窗口后,iframe中的JavaScript函数无法被访问的问题。这个问题在Internet Explorer和Google Chrome中并未出现,但在...
ExtJS 是一个流行的JavaScript框架,主要用于构建富客户端的Web应用程序。4.1版本是其历史上的一个重要里程碑,它提供了一套完整的组件库、布局管理、数据绑定和强大的API,使得开发者能够创建功能丰富的、交互性强...
当我们在一个子框架(frame或iframe)中执行操作,比如文件上传,完成后通常需要将结果或数据传递回父框架(top页面),以便主页面能根据上传结果更新状态或执行后续操作。在frameset环境下,可以通过JavaScript来...
ExtJs 是一个基于 JavaScript 的开源框架,用于创建复杂的前端应用程序。在ExtJs 4.2版本中,`Window`组件是一个非常基础且重要的UI组件,它为开发者提供了一个灵活的弹出窗口解决方案。通过合理的配置,可以轻松...
纯粹的客户端JS系统,与服务器的连接永远是一个页面(除非你用IFRAME,但用IFRAME就违背了本程序的初衷),适合作为云计算模式的开发框架。 6.纯粹的JS源代码,无任何封装,我们也曾想将JS封装成net类,这样用起来...
纯粹的客户端JS系统,与服务器的连接永远是一个页面(除非你用IFRAME,但用IFRAME就违背了本程序的初衷),适合作为云计算模式的开发框架。 6.纯粹的JS源代码,无任何封装,我们也曾想将JS封装成net类,这样用起来...
例如,在 ZK 页面中使用 `<iframe>` 或者 `<window>` 控件加载包含 ExtJS 组件的 HTML 页面。 #### 示例 假设有一个使用 ExtJS 创建的面板,可以通过以下方式在 ZK 中嵌入: ```xml <window title="ExtJS Panel" ...
4. JavaScript或Extjs框架的错误:在加载Extjs TriggerField组件时,如果JavaScript代码存在错误,或者Extjs库未能正确加载,也可能导致组件无法正常显示。 解决方案的探讨部分提出了一个可能的解决办法,即“去掉...
根据提供的文件内容,我们可以梳理出与ExtJS框架相关的几个核心知识点。ExtJS是一个用JavaScript编写的前端库,用于构建复杂的Web应用程序。以下是对文件中提到的一些关键概念和技术点的详细解释: ### ExtJS布局...
-修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...
纯粹的客户端JS系统,与服务器的连接永远是一个页面(除非你用IFRAME,但用IFRAME就违背了本程序的初衷),适合作为云计算模式的开发框架。 6.纯粹的JS源代码,无任何封装,我们也曾想将JS封装成net类,这样用起来...
-修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...
这可能使用`Ext.window.Window`或`Ext.LoadMask`来实现加载效果,同时配合`Ext.Component`或`IFrame`加载图片资源。 此外,为了优化用户体验,项目可能还包含了进度条显示文件上传进度,这通常使用`Ext.ProgressBar...
纯粹的客户端JS系统,与服务器的连接永远是一个页面(除非你用IFRAME,但用IFRAME就违背了本程序的初衷),适合作为云计算模式的开发框架。 6.纯粹的JS源代码,无任何封装,我们也曾想将JS封装成net类,这样用起来...