在项目使用borderLayout Panel时,比较传统的区域都是采用上左右的布局方式。上面是标题,左侧导航,右边作为展示区,在功能较少和页面布局样式单一的情况下使用one page one application就可以实现,但是如果功能复杂的情况下,这样做会更加吃力,开发难度也非常大,而且ext本身还存在内存溢出和效率等问题。
在这个项目中我在展示区使用内嵌的iframe,如下:
var panel = new Ext.Panel({
title:m.text,
// iconCls:iconCls,
bodyStyle:'padding:0px 0px 0px 0px',
html: '<IFRAME ID="IframeName" width="100%" height="100%" FRAMEBORDER=0 SCROLLING=NO SRC="${ctx}/'+m.href+'"></IFRAME>'
});
tabs.add(panel).show();
也有一个扩展实现 Ext.ux.ManagedIFrame(作者Doug Hendricks,附件miframe.js),研究不深不发表评论,示例代码如下:
mainPanel.add({
id:'programResultDiv',
title :' title',
closable: true,
body : new Ext.ux.ManagedIFrame({
autoCreate:{
xtype : "panel",
id:'iframe', // 设置访问的名称
src : url,
frameBorder : 0,
cls : 'x-panel-body',
width : '100%',
height : '100%'
}
})
}).show();
使用iframe就是每次都要下载一遍ext的类库文件......
内存释放的问题,每次更换展示区内容时,删除panel的时候自动将iframe占用的内存释放。
while(tabs.getComponent(0)!=null){
// 在移除tabpanel前,释放内嵌iframe占用的内存
tabs.getComponent(0).on("beforeremove", this.fixIFrame, this);
fixIFrame: function(lr, cp, e) {
var iFrame = cp.getEl().dom;
if(iFrame.src) {
iFrame.src = "javascript:false";
}
};
// 移除tab并释放内存
tabs.remove(tabs.getComponent(0),true);
在使用iframe的过程中,怎么使iframe内部的panel高度和父的panel高度保存一致呢?第一需要让父panel知道内嵌的panel的高度,第二需要让父panel能够改变它的高度来适应你的高度,那么就可以这样做:
在iframe内部的页面显示的告诉父panel自己要求的高度
parent.tabs.setHeight(600);
这样设置完成后,页面每第一次刷新的时候没问题,但是访问完别的页面再回来时,又发现页面高度变成了最后一次设置的高度,然后我们需要监听tab什么时候被激活的,这样的话,我们可以在父panel中加入监听和动作,ext有提供很全面的监听事件,如下:
listeners:{'tabchange':function(){
document.frames.item('frame_'+tabs.getActiveTab().id).location.reload();
}},
这一行实际上是重新绘制了一次页面,主要是重新执行了一下setHeight方法,这样做不是太好,但是没有找到好的解决方法,希望大家能提一些有用的见意。
分享到:
相关推荐
ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0
Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-...
spketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-ext-2.1.mxpspketdwcs-...
该破解适用于ExtDesigner-1.2.0,及ExtDesigner-1.2.2-48.exe,均测试通过, ExtDesigner原版下载地址 http://www.sencha.com/products/designer/download/ 使用时需要在Extjs网站注册个用户,注册地址: ...
android经常要用到解析img,将img解析成一系列文件分析问题
ext-ms-win-gdi-desktop-l1-1-0.dll 用于解决这个dll文件丢失问题,下载后将此文件放置在相关文件根目录下,即可解决丢失问题
前端开源库-style-ext-html-webpack-pluginStyleExtHTML Webpack插件,通过启用内嵌样式增强HTML Webpack插件功能。
用于制作Android App进行SSL通信时所需使用的bks格式证书。 为了生成Android用的BKS证书文件,采取如下操作: 1.下载 bcprov-ext-jdk15on-160.jar,复制到jdk_home\jre\lib\ext 2.配置bcprov,在 jdk_home\jre\lib\...
ext-js-4.2框架ext-js-4.2框架ext-js-4.2框架ext-js-4.2框架
Ext js-4.1.1+Ext js-4.1.0+Ext4.1.0API中文版 .
ext-3.3.1ext-3.3.1ext-3.3.1ext-3.3.1ext-3.3.1ext-3.3.1
bcprov-ext-jdk15on-1.54.jar和bcprov-jdk15on-1.54.jar压缩文件
适用于树莓派4B的openwrt镜像
bcprov-ext-jdk15on-1.68.jar
包括了ext-air-3.1.0和ext-core-3.1.0
ext-7.0.0-gpl.zip
logback与spring集成的文件,从官网上找的。上传的文件包括源文件和jar包,以下是连接: https://github.com/qos-ch/logback-extensions/wiki/Spring ...
该压缩文件包含bcprov-ext-jdk15on-1.54.jar和bcprov-jdk15on-1.54.jar,bcprov-jdk15on-154中移除了一些加密算法,bcprov-ext-jdk15on-154中依然保留。可以解决JDK1.6 HttpClient访问https网页报的错
ext-4.2.1-gpl.7z