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