
Originally Posted by
ogradyjd
I guess I have one more question then:
In the example I gave, I set the html property to some text. I would have thought that the content of those child panels would result in widths, and the window would then shrink-wrap around them...
Good question. If I've understood correctly, you're asking why does the HTML set for the two columns not provided a natural width for the containers to wrap around.
It took me a little while to figure out what was going wrong here.
If you take a look at the source to column layout:
http://docs.sencha.com/ext-js/4-1/so...ntainer-Column
you'll see this:
Code:
getItemSizePolicy: function (item) {
if (item.columnWidth) {
return this.columnWidthSizePolicy;
}
return this.autoSizePolicy;
},
The method getItemSizePolicy is responsible for deciding where the size of a component will come from. Basically there are two choices: either the component tells the layout how big it will be or vice versa. In your example you're setting columnWidth so we'll end up with a columnWidthSizePolicy. That policy is a few lines up and looks like this:
Code:
columnWidthSizePolicy: {
setsWidth: 1,
setsHeight: 0
},
This means that the layout is responsible for setting the width whereas the component is responsible for setting the height. In other words, the width won't shrink-wrap its contents.
When you think about it this makes sense. How can a column shrink-wrap the width of its content and also have a columnWidth of 0.5? That doesn't make sense.
On the face of it you should be able to fix this problem just be removing the columnWidth setting. I tried this but it didn't actually work. The columns rendered correctly but the surrounding panels didn't. My first thought was that you're missing a layout on your window (should probably be set to 'fit') but that didn't help either. It might be a bug in column layout though this type of usage might just not be supported, I'm not sure.
Column layout largely exists for historical reasons and it isn't used much in practice. I'd generally use hbox for something like this. With an hbox the same reasoning covered above applies: you can't specify both a flex and expect it to wrap the contents. So it might look something like this:
Code:
var newModal = Ext.create('Ext.window.Window', {
//renderTo: Ext.getBody(), <- not needed, get rid of this
//id: 'hello', <- fixed ids are evil, highly recommended not to use them
title: 'Modal Window Title',
modal: true,
border: 0,
resizable: false, // <- for shrink-wrapping like this you'll probably want to disable resize
layout: 'fit', // <- the default layout is pretty useless, looks like you want fit
items: [{
xtype: 'panel',
title: 'Nested Panel',
layout: 'hbox', // <- changed to hbox
items: [{
xtype: 'panel',
title: 'Child Panel 1',
height: 100,
html: 'child panel 1'
}, {
xtype: 'panel',
title: 'Child Panel 2',
height: 100,
html: 'child panel 2'
}]
}]
});
newModal.show();
This seems to work fine. The inner panels will wrap their contents and everything else will wrap accordingly.