PDA

View Full Version : Window does not automatically resize to content when using border layout



suaveant
14 Jul 2011, 6:24 AM
How do you make an ext window fit to its content size when using a border layout? If I change the layout to fit it works but I can't use the mini collapse (or east/west panels), putting a border layout within a fit panel doesn't work, either.

All I get when I run this is a little tiny windowlet that needs to be expanded manually to see any content.

I'm using Ext 3.2.1



var win = new Ext.Window({
title: 'foo',
layout: 'border',
items: [{
region: 'north',
split: true,
collapseMode: 'mini',
layout: 'fit',
html: 'A<P>b<P>C'
}, {
region: 'center',
layout: 'fit',
html: 'A<P>b<P>C'
}]
});
win.show();

mitchellsimoens
14 Jul 2011, 2:51 PM
BorderLayout does not support auto sizing.

skirtle
18 Jul 2011, 4:44 AM
BorderLayout does not support auto sizing.

This is true but you can do the sizing manually. Below is an example, based on the example above, that resizes the window to fit its contents. All it does is add up the heights of the children, so you'll need to tweak it if you add east and west regions.


...

win.show();

// Height of the window not including the body element
var height = win.getHeight() - win.body.getHeight();

// Add on the height of each child item
for (var child = win.body.first() ; child ; child = child.next()) {
height += child.getHeight();
}

win.setHeight(height);


However, in my experience it is usually a mistake to autosize a component based on its children. It's one of those things that often seems like the right approach during initial prototyping but then falls by the wayside as an app matures.

mitchellsimoens
18 Jul 2011, 4:51 AM
However, in my experience it is usually a mistake to autosize a component based on its children. It's one of those things that often seems like the right approach during initial prototyping but then falls by the wayside as an app matures.

I would actually agree with that. I personally don't use BorderLayout outside a Viewport as there are many cons of using it... such as you cannot add/remove items after instantiation easily.