PDA

View Full Version : [FIXED] Collapsible panels in vbox layout do not readjust height



zombeerose
3 Oct 2011, 2:46 PM
REQUIRED INFORMATION

Ext version tested:

Ext 4.0 rev 6
Browser versions tested against:

FF6 (firebug 1.8 installed)
DOCTYPE tested against:

strict
Description:

Collapsible panels that are contained in a vbox layout do not re-adjust their height based on the flex value when collapsed/expanded.
Steps to reproduce the problem:

Run the code.
Click the collapse tool of the first panel.
Click the expand tool of the first panel.
The result that was expected:

The height of the first panel should be approx to 1/3 of the container.
The height of the second panel should be approx 2/3 of the container.
The result that occurs instead:

The height of the first panel is only as tall as the text it contains. The second panel fills the remaining area.
Test Case:


var panel = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody()
,layout: {
align: 'stretch'
,type: 'vbox'
}
,items: [{
title: 'Panel 1'
,html: 'Body of panel 1<br>Only 1/3 of the total container height.'
,flex: 1
,collapsible: true
},{
title: 'Panel 2'
,html: 'The height of this panel should by 2/3 of the whole.'
,flex: 2
,collapsible: true
}]
,height: 400
,width: 400
,frame: true
});







HELPFUL INFORMATION

Additional CSS used:

only default ext-all.css
Operating System:

WinXP Pro

alberto.marabini
3 Oct 2011, 3:37 PM
This thread is related to support ticket 5898

alberto.marabini
3 Oct 2011, 5:15 PM
I've recorded a bug in our system regarding this issue. For now i just would like to point out that there is a simple workaround that would partially fix the issue:


Ext.onReady(function() {
var panel , chk=false, lst ={
expand:function(){
if(chk) panel.doLayout();
},
collapse:function(){
if(chk) panel.doLayout();
}
};
Ext.create('Ext.Button', {
text: 'Workaround Disabled',
renderTo: Ext.getBody(),
handler: function() {
chk=!chk;
this.setText((!chk)?'Workaround Disabled':'Workaround Enabled');
}
});
panel = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody()
,layout: {
align: 'stretch'
,type: 'vbox'
}
//,suspendLayout:true
,items: [{
title: 'Panel 1'
,html: 'Body of panel 1<br>Only 1/3 of the total container height.'
,flex: 1
,collapsible: true,
listeners:lst
},{
title: 'Panel 2'
,html: 'The height of this panel should by 2/3 of the whole.'
,flex: 2
,collapsible: true,
listeners:lst
}]
,height: 400
,width: 400
,frame: true
});
//panel.doLayout();


});