PDA

View Full Version : Hbox layout not resizing on browser resize



dr-dan
8 Aug 2012, 12:31 AM
I have a content panel centered, with two panels either side acting as padding each with unique background repeat (this is why i havent used a trad. margin: auto}:

37806

The panels render fine, but they do not "flex" as expected when i resize the browser window. They stay as they are. The parent is a Container. When the parent is a Viewport is works ok but then the columns stretch to fill the full height of the browser, not the 400 minheight specfied...

Have I got a round hole and a square peg?


Ext.define('Pegfect.view.Viewport', { extend: 'Ext.container.Container',

renderTo: Ext.getBody(),
layout: { type: 'hbox', pack: 'center', align: 'stretch' },
minHeight: 400,
defaults: { minHeight: 400 },
items: [{
flex: 1,
style: { backgroundColor: '#023a60' }
}, {
width: 568
}, {
flex: 1,
style: { backgroundColor: '#ffffff' }
}]
});

dr-dan
8 Aug 2012, 4:05 AM
Turns out it was just a case of telling the container to doLayout on window resize:


launch: function () {
var vp = Ext.create('Pegfect.view.Container', {
renderTo: document.body
});
Ext.EventManager.onWindowResize(vp.doLayout, vp);
}