PDA

View Full Version : Column layout inside contiainer that has hbox layout (Ext 4.1)



taavih
8 Aug 2012, 6:58 AM
Hi,

I am trying to align container in the middle of the page. The only way to do this seems to be using hbox layout and pack: 'center'. But when doing this all my containers that have column layout disappear. Is there something I don't know about the layouts or is it Ext bug?

Problem can be regenereted here: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.HBox

Change the live preview code to this:


Ext.create('Ext.Panel', {
width: 500,
height: 300,
title: "HBoxLayout Panel",
layout: {
type: 'hbox',
pack: 'center',
align: 'stretch'
},
renderTo: document.body,
items: [{
xtype: 'container',
layout: 'column',
items: [{
xtype: 'panel',
title: 'Inner Panel One',
flex: 2
},{
xtype: 'panel',
title: 'Inner Panel Two',
flex: 1
},{
xtype: 'panel',
title: 'Inner Panel Three',
flex: 1
}]
}]
});


Thanks in advance!

friend
8 Aug 2012, 8:01 AM
Your flex configuration is being applied to the container with a column layout, which is meaningless. Also, your column layout container doesn't declare any height/width.

Try the code sample below, which I embedded in a Window for ease of testing. Resize the Window and you'll see that the column container stays centered correctly (keeping in mind that the column container has fixed width of 500).



Ext.create('Ext.window.Window', {
bodyPadding: 10,
height: 400,
layout: {
type: 'hbox',
align: 'stretch',
pack: 'center'
},
width: 700,
items: [{
xtype: 'container',
flex: 1
},{
xtype: 'container',
layout: 'column',
height: 300,
width: 500,
items: [{
xtype: 'panel',
columnWidth: .25,
html: 'Content',
title: 'Left Column'
},{
xtype: 'panel',
columnWidth: .50,
html: 'Content',
title: 'Center Column'
},{
xtype: 'panel',
columnWidth: .25,
html: 'Content',
title: 'Right Column'
}]
},{
xtype: 'container',
flex: 1
}]
}).show();

taavih
8 Aug 2012, 8:14 AM
That works nicely and seems also logic! :)

Cheers!