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.οnresize=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