PDA

View Full Version : [OPEN-770] vbox layout with collapsible items



vladsch
23 Mar 2010, 7:57 AM
Hi,

Ext version: 3.2 (rev 6352)

Issue: vbox layout doesn't relayout items after collapse/expand of the one item (even if call 'doLayout' in the collapse/expand listeners)

1. Run the following example
2. Collapse top panel
3. Notice that bottom panel doesn't fit on free space



<html>
<head>
<title>VBox Layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>

<style type="text/css">
html, body {
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
}
</style>
<script type="text/javascript">
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout:{
type: 'vbox',
align: 'stretch'
},

items: [{
xtype: 'panel',
title: 'Collapse/Expand me',
height: 120,
collapsible: true,

listeners: {
expand: function(){
viewport.doLayout();
},
collapse: function(){
viewport.doLayout();
}
}
}, {
xtype: 'panel',
title: 'Fit panel',
flex: 1
}]
});
});
</script>
</head>
<body>
</body>
</html>


I was able to fix using the following listeners


beforeexpand: function(){
this.height = 120;
viewport.doLayout();
},
collapse: function(){
this.height = this.getHeight();
viewport.doLayout();
}


Is it a bug or vbox layout doesn't support collapsible items?

Jamie Avins
23 Mar 2010, 8:27 AM
Your example isn't what I'd recommend as BorderLayout was built for this, but it does present an edge case bug in BoxLayout where it wasn't checking for collapsed panels.

Jamie Avins
23 Mar 2010, 8:29 AM
[type]: fix
[module]: BoxLayout
[id]: #770
[desc]: Fixes #770. BoxLayout will no longer consider a collapsed panel as visible.

estesbubba
5 May 2010, 10:19 AM
Is this supposed to be fixed in 3.2.1? I have a vbox layout with a collapsible panel. When I collapse it the other items don't adjust as expected. I attached code to demonstrate this. If you uncomment the listeners property, it works better but the 2nd item covers part of the 1st item's title.

I know border layout can do it in this scenario but there are times when I have several panels and some or all of them are collapsible. I think vbox layout would be perfect for this if it would handle collapses.

If I'm just doing something wrong, let me know.

Thanks.


<html>
<head>
<title>VBox Layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>

<style type="text/css">
html, body {
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
}
</style>
<script type="text/javascript">
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout:'border',

items: [{
region:'center',
padding: '10',
layout: 'vbox',
layoutConfig: {
align: 'stretch',
pack: 'start'
},
items:[{
xtype: 'panel',
height: 100,
title: 'Collapsible',
html: 'Collapse Me',
collapsible: true,
titleCollapse: true
// listeners: {
// expand: function() {
// viewport.doLayout();
// },
// collapse: function() {
// viewport.doLayout();
// }
// }
},{
xtype: 'panel',
height: 50,
title: 'Fixed 1',
html: 'Fixed 1',
margins: '10 0 0 0'

},{
xtype: 'panel',
height: 50,
title: 'Fixed 2',
html: 'Fixed 2',
margins: '10 0 0 0'

},{
xtype: 'panel',
title: 'Expanded',
flex: 1,
html: 'Want to stretch vertically to take up available space',
margins: '10 0 0 0'

}]
}]
});
});
</script>
</head>
<body>
</body>
</html>

Jamie Avins
5 May 2010, 10:41 AM
You will need the listener there (or something similar to layout the parent panel) It will completely hide the panel though, not keep the title. We'll need to account for it in the future.

estesbubba
5 May 2010, 10:47 AM
If you run the example with the listeners uncommented you will see the panel isn't hidden. I might try making the top margin of 2nd panel bigger on collapse as a workaround.

Animal
5 May 2010, 11:24 AM
There are some issues around box layouts and collapsed panels.

http://www.extjs.com/forum/showthread.php?98165-vbox-layout-with-two-grids-grid-collapse-does-not-stretch-non-collapsed-grid&p=463222#post463222

Box layouts assume that collapsed means no dimensions, and so ignore them. Collapsed means in fact that the item should ignore its flex setting and assume the fixed dimension of its "placeholder", and all other flexed items should adjust accordingly.

The example page in the linked post goes illustrates these issues.

My example in post #8 contains fixes and workarounds.

Jamie Avins
5 May 2010, 12:07 PM
I agree Nige, this should be fixed and handled properly.

estesbubba
5 May 2010, 2:00 PM
+1 for fixing this with vbox. That would make it consistent with how anchor works. If you change the layout in my example to 'anchor' it handles the expand/collapse just fine.

evant
6 May 2010, 3:06 AM
Yeah, the thing that makes it difficult is the panel internals that hook up the resize change in the expand() event. I'd prefer it to be handled internally.

julian_calaby
9 Jun 2010, 10:22 PM
As pointed out here:

http://www.extjs.com/forum/showthread.php?t=101280&p=475503#post475503

*bump*

damon1977
12 Aug 2010, 12:08 PM
In addition, it would be nice if box layouts, or at least vbox layout supported cmargins, as with the border layout, allowing for items to have different margins if they are collapsed.