我有一个Panel采用column布局.
panel中的每一个元素内容是不确定的.也就是说,他们的高度会自动变化.
可能的样子是这样:
[img]http://dl.iteye.com/upload/attachment/189701/ec00b2b6-f578-3bb9-89f0-42bdacb7f4e8.jpg[/img]
图中, 由于内容不一样多, 所以面板也不一样高.
于是我把panel的border设置为false. 这样就清爽了些.
同时, 我希望在a和b之间加入一条竖线, 把他们分割开.
于是,代码如下:
[code="js"]
Ext.onReady(function(){
var panel = new Ext.Panel({
layout:'column'
,defaults:{columnWidth:.495}
,items:[
// 面板A
{xtype:'panel', border:false,
html:'aaa
aaa
aaa
aaa
aaa
aaa
aaa
'}
// 这是中间的面板. 放置的是一条竖线.
,{xtype:'panel', columnWidth:.01, border:false,
html:'
// 面板B
,{xtype:'panel', border:false,
html:'bbb
bbb
bbb
bbb'}
]
});
panel.render(document.body);
});
[/code]
效果出来了. 如图所示:
[img]http://dl.iteye.com/upload/attachment/189709/935895a7-db87-3338-92b0-76b85d582cd0.jpg[/img]
在面板A和面板B之间, 出现了一条红色的竖线. 除了高度, 其他正是我想要的.
[color=red]这条竖线的高度很短. 是因为竖线所处的面板自身的高度很小.[/color]
我试图将中间的面板layout:'fit', aothHeight:true, height:'100%'...没用~~
问题就是这个...这样才能让中间的面板高度达到和面板A. 面板B高度 的较大者一样??
[color=blue]注. 面板A.getHeight()无效. 因为我面板A的内容是动态的. 所以没有设置具体的height的值[/color]
[b]问题补充:[/b]
[color=red]也许您还没发现问题的本质:
竖线是在中间的那个面板中.
如果不给这个面板设置一个固定的高度的话
它将很矮很矮...
所以.无论怎么width="100%" 都不可能达到分割线的效果.[/color]