panel使用column, 怎么样才能让panel里的子panel等高?

Question

先上图:
[img]http://dl.iteye.com/upload/attachment/190435/f140f471-d7e9-38de-89b2-411e0f2422b8.bmp[/img]

说明:
外面一个大panel,采用column布局,
里面嵌套3个小panel.

因为内容不一样. 所以不等高.
我想[color=red]让这三个panel一样高, 怎么做呢..[/color]

高度不能写死. 不可以出现滚动条的说~

附上代码..困扰了我几天了. Ext.Panel默认高度是最小的. 难道不能跟着父容器一样大么 :cry:
[code="js"]
Ext.onReady(function() {
var panel = new Ext.Panel({
layout:'column'
,defaults:{columnWidth:.33}
,items:[
{xtype:'panel', title:'panel 1', html:'panel 1
panel 1
panel 1
panel 1
'}
,{xtype:'panel', title:'panel 2', html:'panel 2',layout:'fit'}
,{xtype:'panel', title:'panel 3', html:'panel 3
panel 3
panel 3
panel 3
panel 3
panel 3
'}
]
,renderTo:document.body
});
});
[/code]
[b]问题补充：[/b]
先上图:
[img]http://dl.iteye.com/upload/attachment/190435/f140f471-d7e9-38de-89b2-411e0f2422b8.bmp[/img]

说明:
外面一个大panel,采用column布局,
里面嵌套3个小panel.

因为内容不一样. 所以不等高.
我想[color=red]让这三个panel一样高, 怎么做呢..[/color]

高度不能写死. 不可以出现滚动条的说~

附上代码..困扰了我几天了. Ext.Panel默认高度是最小的. 难道不能跟着父容器一样大么 :cry:
[code="js"]
Ext.onReady(function() {
var panel = new Ext.Panel({
layout:'column'
,defaults:{columnWidth:.33}
,items:[
{xtype:'panel', title:'panel 1', html:'panel 1
panel 1
panel 1
panel 1
'}
,{xtype:'panel', title:'panel 2', html:'panel 2',layout:'fit'}
,{xtype:'panel', title:'panel 3', html:'panel 3
panel 3
panel 3
panel 3
panel 3
panel 3
'}
]
,renderTo:document.body
});
});
[/code]
[b]问题补充：[/b]
To 蔡华江:

谢谢! 

这个问题解决了上面那个问题. 

可我发现一个更严重的事情: 

我工程中的panel丢失了body属性, 丢失了el属性, .... 

所以不能panel.getHeight()了.

同时, 因为这个原因? 给panel加上属性bodyStyle:'height:100%;'也没起到作用. 
bodyStyle:'height: 500;' 这样一个固定的值倒是可以. 


我想请教,为什么一个组件会丢失属性呢. 

代码是基于函数构造的: 

if(flag){
panel.add(newPanelA());

}else{
panel.add(newPanelB());
}
这样的形式....

纠结... 以为这个答案解决了问题, 却发现带出一个更大的问题.

[b]问题补充：[/b]

谢谢 蔡华江!

你的答案在FF下测试通过, 在IE下没能成功.

我采用了这种方式:

[code="js"]
谢谢.你的答案在FF下可以.在IE下没有成功.我采用了这种方法:
Ext.onReady(function() {

var panel1 = new Ext.Panel({flex: 1,html: 'flex : 1<br>Panel 1<br>1<br>Panel 1<br>'});

var panel2 = new Ext.Panel({width: 100,html: 'width : 100'});

var panel3 = new Ext.Panel({flex: 2,html: 'flex : 2<br>Panel 3<br>Panel 3<br><br>Panel 3<br>Panel 3<br>'});

var test = new Ext.Panel({
    layout: {type: 'hbox',pack: 'start',align: 'stretchmax'},
    items: [panel1, panel2, panel3]
    ,renderTo:document.body
});
if(Ext.isIE){
    test.setHeight(0);
}

});
[/code]

对于IE. 需要[color=red]test.setHeight(0); [/color] 这让我很无奈. 并且还不知道为什么.

Answer 1

[code="js"]Ext.onReady(function() {
var panel = new Ext.Panel({
layout:'column'
,defaults:{columnWidth:.33}
,items:[
{xtype:'panel',bodyStyle:'height:100%;', title:'panel 1', html:'panel 1
panel 1
panel 1
panel 1
'}
,{xtype:'panel',bodyStyle:'height:100%;', title:'panel 2', html:'panel 2',layout:'fit'}
,{xtype:'panel',bodyStyle:'height:100%;', title:'panel 3', html:'panel 3
panel 3
panel 3
panel 3
panel 3
panel 3
'}
]
,renderTo:document.body
});
});
[/code]