EXT的border布局如何实现按比例布局（同时可解决IE6中IFrame只显示一半问题）

EXT本身有提供一些相对布局的方案比如anchor，但并不是那么完善灵活：假如我有一个border布局，想让他们做到相对布局，怎样做到呢？

 

我的思路是这样的，第一步，利用html中标签的相对布局，即<div>，做按比例的相对布局，然后将我们的Ext panel附到每个div上。

<style type="text/css">
div#menu {
height: 90%;
width: 20%;
float: left;
}

div#content {
height: 90%;
width: 80%;
float: left;
}

div#footer {
clear: both;
text-align: center;
}
</style>

<div id="menu"></div>
<div id="content"></div>
<div id="footer"></div>

 

var menu = Ext.get("menu");
var content = Ext.get("content");
var footer = Ext.get("footer");

var westpanel = new Ext.Panel({
id:'west-panel',
region : 'west',
title : "管理菜单",
split : true,
//	width : menu.getComputedWidth(),
height: menu.getComputedHeight(),
margins: '0 3 5 5',
applyTo : menu
});
var center = new Ext.Panel({
region : 'center',
margins: '0 5 5 0',
applyTo : content,
border: false,
height: content.getComputedHeight(),
html : '<iframe id="main" src="../project/project.jsp" width="100%" height="100%" scrolling="auto" frameborder="0" ></iframe>',
listeners : {
afterrender : function(){
Ext.fly("main").setHeight(content.getComputedHeight());
}
}
});
var footer = Ext.get("footer");
var southpanel = new Ext.Panel({
region : 'south',
height : 30,
width : footer.getComputedWidth(),
applyTo : footer
});

applyTo把每个panel附到我们已经布局好的div上，这样效果就相当灵活了，只要html可以做到的布局，Ext都可以轻松嵌入其中。

window.onresize=function(){
westpanel.setHeight(0);
westpanel.setHeight(menu.getComputedHeight());
//		southpanel.setWidth(0);
center.setHeight(content.getComputedHeight());
southpanel.setWidth(footer.getComputedWidth());
};

不要忘了在EXT代码中加入这个方法，监听网页大小变化情况，当页面变化时，重新设置每个控件的大小，这样便可以做到当用户改变窗口大小，控件仍是按比例分布。

效果如下：



 

里面有相当重要的一点，困扰了我很久：在IE6下，由于我们的center面板使用了iFrame嵌入，iFrame的比例设为填满面板，即100%，iFrame使用相对高度会造成它只能显示一半。解决方法在上面代码中包含了：

listeners : {

      afterrender : function(){Ext.fly("main").setHeight(content.getComputedHeight());}

}

这句可解决Iframe在IE6中只能显示一半的BUG