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

0 0

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

先上图:

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

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

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

附上代码..困扰了我几天了. Ext.Panel默认高度是最小的. 难道不能跟着父容器一样大么

Ext.onReady(function() {
    var panel = new Ext.Panel({
        layout:'column'
        ,defaults:{columnWidth:.33}
        ,items:[
        {xtype:'panel', title:'panel 1', html:'panel 1<br>panel 1<br>panel 1<br>panel 1<br>'}
        ,{xtype:'panel', title:'panel 2', html:'panel 2',layout:'fit'}
        ,{xtype:'panel', title:'panel 3', html:'panel 3<br>panel 3<br>panel 3<br>panel 3<br>panel 3<br>panel 3<br>'}
        ]
        ,renderTo:document.body
    });
});

问题补充：
先上图:

Ext.onReady(function() {
    var panel = new Ext.Panel({
        layout:'column'
        ,defaults:{columnWidth:.33}
        ,items:[
        {xtype:'panel', title:'panel 1', html:'panel 1<br>panel 1<br>panel 1<br>panel 1<br>'}
        ,{xtype:'panel', title:'panel 2', html:'panel 2',layout:'fit'}
        ,{xtype:'panel', title:'panel 3', html:'panel 3<br>panel 3<br>panel 3<br>panel 3<br>panel 3<br>panel 3<br>'}
        ]
        ,renderTo:document.body
    });
});

问题补充：
To 蔡华江:

    谢谢!

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

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

    我工程中的panel丢失了body属性, 丢失了el属性, ....
所以不能panel.getHeight()了.

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

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

    代码是基于函数构造的:
if(flag){
panel.add(newPanelA());

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

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

谢谢蔡华江!

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

我采用了这种方式:

谢谢.你的答案在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);
	}
});

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

JavaScript EXT

2010年1月08日 16:28

Rooock
1
0 0 1

查看图片附件

1个答案按时间排序按投票排序

0 0

采纳的答案

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<br>panel 1<br>panel 1<br>panel 1<br>'}
        ,{xtype:'panel',bodyStyle:'height:100%;', title:'panel 2', html:'panel 2',layout:'fit'}
        ,{xtype:'panel',bodyStyle:'height:100%;', title:'panel 3', html:'panel 3<br>panel 3<br>panel 3<br>panel 3<br>panel 3<br>panel 3<br>'}
        ]
        ,renderTo:document.body
    });
});

2010年1月08日 16:57