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