怎么插入一条高度100%的竖线到Panel中.

Question

我有一个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]

Answer 1

多试试。。。。这东西就是靠摸索出来的。