View Full Version : [CLOSED]hbox layout: layoutConfig parameters 'pack' and 'align' not working

23 Feb 2011, 10:22 AM
It seems like layoutConfig parameters 'pack' and 'align' are not working on layout hbox like they used to.

layout: 'hbox',
layoutConfig: {
pack: 'center',
align: 'middle'

does not put items into the center / middle of hbox.

Can this be confirmed as a bug?


23 Feb 2011, 2:22 PM
I see this as well.

24 Feb 2011, 12:23 AM
Can you please post a full test case? Looks like this may already be resolved:


Ext.onReady(function() {
new Ext.Container({
width: 600,
height: 400,
renderTo: document.body,
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
items: [{
xtype: 'button',
text: 'Foo'


24 Feb 2011, 4:42 AM
This is one of those cases where things changed from Ext3 to Ext4:
- when providing 'layout' as object everything works in Ext4 like in Ext3
- when providing 'layout' as string with layoutConfig as object, Ext4 does not work since layoutConfig seems to have been dropped.

Also Ext4 seems to interpret defaults: {padding: 10} incorrectly when using layout 'hbox': Padding does not increase the space between component border and component content as expected. When using layout 'border' it works as expected.



// ---- Create Viewport with hbox layout ----------------------
// ExtJS 3 param 'layoutConfig' as defined in Ext.Container does not exist anymore in ExtJS4
// instead in ExtJS 4 'layout' as defined in Ext.AbstractContainer needs to be
// provided as object when wanting to specify config params for layout
// this works in ExtJS 3 AND ExtJS 4 preview 1
//layout: {
// type: 'hbox',
// pack: 'center',
// align: 'middle'
// this only works in ExtJS 3 but NOT in 4
layout: 'hbox',
layoutConfig: {
pack: 'center',
align: 'middle'
defaults: {
// padding does NOT work as expected in ExtJS4 preview 1 when using hbox layout,
// it does not increase spacing between component border and content
padding: 10,
border: true
title: 'Panel one',
html: '<h2>I am panel 1</h2>',
width: 100,
title: 'Panel 2',
html: '<h2>I am panel 2</h2>',
width: 120,
height: 100
title: 'Panel 3',
html: '<h2>I am panel 3</h2>',
width: 140,
height: 120

// END of onReady

Good to know it works in Ext4 when providing 'layout' as object.


Jan Harmsen

24 Feb 2011, 4:55 AM
Padding adds padding to the component itself. If you want to add padding to the content, use bodyPadding.

I'll add a note re: layoutConfig being gone.

24 Feb 2011, 5:21 AM
interesting, param 'bodyPadding' is another one of those new config params in Ext4 that did not exist before.

It might be worth pointing that out in the docs ('padding' defined in Ext.AbstractContainer vs 'bodyPadding' in Ext.panel.Panel)

Anyway, thanks for letting me know!


24 Feb 2011, 10:26 AM
I think all configs, methods, properties and events that didn't exist in ExtJS 3.* should be highlighted in the Ext 4 Api Docs consistently. And they should get extra attention. So that it does not júst describe what they do, but also how they differ from the equivalents in ExtJS 3.*.

24 Feb 2011, 1:25 PM
I don't really like that idea. That's why we're having the upgrade guide and the compatibility layer, but introducing a set of deprecated stuff into the docs seems like it's going to cause problems. Remember these things will be removed from the library, we want people to ~stop~ using them.