View Full Version : Rendering panel collapsed makes it disappear

3 Oct 2011, 8:20 AM
I have a vbox panel within the west region of a border layout. Both the vbox and the west region are set to be collapsible. It looks and works great. However, I want the vbox to render collapsed by default upon page loading. But when I set 'collapsed' to true, the vbox panel disappears entirely!

Any ideas?

var subPanel = Ext.create('Ext.panel.Panel', {
title: 'Sub',
height: 300,
layout: {
align: 'stretch',
type: 'vbox'
collapsible: true,
titleCollapse: true,
collapsed: true,
margin: '5 0 0 0',
bodyPadding: 5,
items: [otherPanelA, otherPanelB]

Ext.create('Ext.container.Container', {
width: 945,
height: 700,
layout: 'border',
items: [{
title: 'West Region',
xtype: 'panel',
margins: '5 0 0 5',
width: 275,
collapsible: true,
items: [subPanel]
title: 'Center Region',
region: 'center',
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 20',
items: [centerPanel]
renderTo: Ext.getBody()

3 Oct 2011, 8:46 AM
A few thoughts.

Your outermost container looks like it's trying to be a viewport. Have you considered using Ext.container.Viewport instead?

You've got a lot of panel nesting going on. subPanel and centerPanel are both being wrapped in another panel. Is this necessary? Could they not be added to the border layout container directly?

Your west region doesn't have a layout specified. That seems to be causing your problems with rendering that region.

3 Oct 2011, 11:55 AM
skirtle, you are the man. The omission of the layout was the problem. Simple fix.

On the outermost framing, I actually don't want it to take up the full browser dimension - I am leaving some space for other html elements. Thus I went with the container vs viewport.

On the nesting, the west region is going to have several sub-panels (I had only built one so far). And I want that west region (in its entirety) to be collapsible. So the wrapping seemed like the best approach. As for the center region, you are right, it does not need to be wrapped. So I've removed that.

If you see better approaches to the above, please do let me know. Your advice is terrific.

3 Oct 2011, 1:28 PM
Charlie and Skirtle,
I believe there's an issue here that hasn't been addressed: in particular, I've pasted an even simpler example than the one provided by the OP, which shows that Ext's layout manager is not correctly taking the header height into account on initial layout. Notice that when the panel is configured as initially expanded, "Item 1" and "Item 2" are hidden. It appears that the total height, including header, is what the body's height would be without the header. Only after collapsing the panel and re-expanding do things get back in sync. I have had to implement workarounds in my own app because of this apparent issue...

Moreover, it seems strange to me that Ext should require a layout other than Auto in such cases. What if I want the contained items simply to be laid out by the browser. Why can't Ext learn the heights from the browser after reflow?

Here's the simplified example...

var win = Ext.create('Ext.window.Window', {
width: 200,
height: 200,
layout: { type: 'vbox', align: 'stretch' },
items: [{
xtype: 'panel',
collapsible: true,
//collapsed: true,
title: "Group 1",
items: [{
xtype: 'container',
html: "Item 1",
}, {
xtype: 'container',
html: "Item 2"

3 Oct 2011, 4:12 PM
@stahlman. Please use CODE tags when posting code (# button on the editor toolbar).

I'm not sure this is really related to charlie17's question. Personally I'd have posted this question as a separate thread.

It is an interesting question though. You do appear to be correct that the header isn't taken into account in the initial sizing. The combination of sizings and layouts in your example is a little strange but not unreasonable. I couldn't find an easy way to achieve the same effect. The best I could manage was to add a listener to the window to fix it:

listeners: {
afterrender: function(win) {

I'd be interested to see whether this is resolved by the layout changes in 4.1.

4 Oct 2011, 5:05 AM
Skirtle. Thanks. Will use CODE tags next time. Incidentally, an afterrender handler was the approach I took as well, though in my case, I simply collapsed and re-expanded in the afterrender handler, rather than re-doing layout. (Working with Ext 4.0 has conditioned me to be very judicious in the use of doLayout... ;-) Also, in my case, it was necessary to add a delay of 1ms for some reason (though it's not necessary in this simple example)...

Brett S.