ext使用--Panel和iframe联合使用时页面高度的解决方法

最新推荐文章于 2024-03-26 17:18:18 发布

最新推荐文章于 2024-03-26 17:18:18 发布 · 295 阅读

文章标签：

#EXT #JavaScript #ViewUI

ext 专栏收录该内容

8 篇文章

订阅专栏

本文探讨了在ExtJS项目中使用borderLayoutPanel结合iframe进行复杂布局的方法，包括内存管理、高度同步等关键技术问题及解决方案。

在项目使用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方法，这样做不是太好，但是没有找到好的解决方法，希望大家能提一些有用的见意。