View Full Version : [DUPE-770]VBoxLayout collapsed items

9 Jun 2010, 9:36 PM
Ext version tested:

Ext 3.2.1

Adapter used:

none (ext-base.js)

css used:

only default ext-all.css

Browser versions tested against:

IceWeasel 3.5.9 (equivalent to FireFox 3.5.9) (firebug 1.5.4 installed)
Google Chrome 5.0.375.70
Epiphany 2.30.2 (Webkit version 1.2.1)

Operating System:


In a container with a vBox layout:

A panel that has a frame, title, and is collapsed is not positioned correctly
A hidden panel is not positioned correctly when it is shown

Test Case:

<title>VBox Layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout: {
margins:'0 0 5 0',
frame: true
html: "<h1>Panel 1</h1><p>Panel 1's content goes here</p>",
title: 'Panel 1'
html: "<h1>Panel 2</h1><p>Panel 2's content goes here</p>",
id: "hidden-panel",
hidden: true,
title: 'Panel 2'
html: "<h1>Panel 3</h1><p>Panel 3's content goes here</p>",
collapsed: true,
collapsible: true,
title: 'Panel 3'
html: "<h1>Panel 4</h1><p>Panel 4's content goes here</p>",
flex: 1,
title: 'Panel 4',
}, {
xtype: "button",
text: "Show Panel 2",
handler: function() {
Steps to reproduce the problem:

Load example
You should see that the collapsed panel, "Panel 3" is positioned at the top left corner of the page overlapping "Panel 1"'s title.

Click the button at the bottom ("Show Panel 2")
You should see that the previously hidden panel, "Panel 2" is positioned a the top left corner of the page overlapping "Panel 1"'s title.

The result that was expected:

Panel 3 appears between panel 1 and 4 as a collapsed panel
When shown, Panel 2 appears between panels 1 and 3 (4) as an open panel.

The result that occurs instead:

Panel 3 appears in the top left corner.
When shown, Panel 2 appears in the top left corner.

Debugging already done:

The cause of the main issue has been determined to be in the getVisibleItems() method in BoxLayout which doesn't take into account items that are collapsed but still visible.
The cause of the hidden panel issue appears to be because the (BoxLayout) layout manager does not re-lay-out the panel when items are shown.

Possible fix:

getVisibleItems() could be re-written to detect panels that are collapsed yet still have a title bar.
BoxLayout could potentially listen to show / hide events from the class it's managing and re-lay-out the container when this happens.


Wrapping the affected panels in another panel fixes their layout issues, however this is an unclean solution.

9 Jun 2010, 9:54 PM
I can confirm the first issue.

The second isn't an issue. You need to call doLayout() to force the container to layout the child items. There's too many scenarios where this could happen to do it automatically.

9 Jun 2010, 10:01 PM
Actually, this is a dupe of 770: http://www.extjs.com/forum/showthread.php?t=94990

9 Jun 2010, 10:20 PM
On issue #2, fair enough: I figured it was an issue because (for example) form layouts seem to handle showing and hiding automatically.

As for it being a dupe, yes, I suppose it is. (That'll teach me to do insufficient searching, ah well) However #770 is, judging by the discussion there, more about *Box layouts not handling collapsing and expanding panels properly. That said, my main issue here is what Animal (Nigel?) pointed out in post #7: *Box layouts don't handle collapsed panels properly. (see: http://www.extjs.com/forum/showthread.php?t=98165)

Sorry about the noise, and please consider this a bump of the issues he points out. =)