在用ext布局的时候,可能遇到最多的问题就是如何让页面充满center部分了,本人在这个问题上也搞了好久,试了好多方法终于可以满足要求了。
首先,我的主框架是这样的左边是一个树型结构,右边是一个tab选项卡,点左边的树的子节点就可以在右边中生成一个tab页面,是一个典型的border布局。
我的center的id为doc-body,表示是右边那部分的惟一标示。右边我是一个加载一个jsp页面,jsp页面上有个grid,起初我是这样做的,直接用在jsp页面中渲染grid,发现grid不能自适应高宽度的要求。后来改成了一个面板,然后再在这个面板上渲染grid,面板的宽高度就是center的宽高度再减去上部分的高度,就是panel要渲染的宽高度。代码如下:
var company_panel = new Ext.Panel({
title : '分公司管理',
iconCls : 'icon-grid',
region : 'center',
border : 'layout',
frame : true,
layout:'fit',
renderTo: 'company',
height: Ext.get("doc-body").getHeight()-46,
width: Ext.get("doc-body").getWidth(),
items : [grid_company]
});
重点的就是那个height和width。doc-body就是center的ID。这样就算浏览器大小改变也不会影响到center中页面的大小,它会随着浏览器的变化而变化。希望对有需要的人有帮助。
首先,我的主框架是这样的左边是一个树型结构,右边是一个tab选项卡,点左边的树的子节点就可以在右边中生成一个tab页面,是一个典型的border布局。
我的center的id为doc-body,表示是右边那部分的惟一标示。右边我是一个加载一个jsp页面,jsp页面上有个grid,起初我是这样做的,直接用在jsp页面中渲染grid,发现grid不能自适应高宽度的要求。后来改成了一个面板,然后再在这个面板上渲染grid,面板的宽高度就是center的宽高度再减去上部分的高度,就是panel要渲染的宽高度。代码如下:
var company_panel = new Ext.Panel({
title : '分公司管理',
iconCls : 'icon-grid',
region : 'center',
border : 'layout',
frame : true,
layout:'fit',
renderTo: 'company',
height: Ext.get("doc-body").getHeight()-46,
width: Ext.get("doc-body").getWidth(),
items : [grid_company]
});
重点的就是那个height和width。doc-body就是center的ID。这样就算浏览器大小改变也不会影响到center中页面的大小,它会随着浏览器的变化而变化。希望对有需要的人有帮助。