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

[jan.harmsen]

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?

Thanks!

[bhutten]

I see this as well.

[evant]

Can you please post a full test case? Looks like this may already be resolved:

Ext.require('*');

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'
        }]
    });
});

hbox.jpg

[jan.harmsen]

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.

Testcase:

Ext.onReady(function(){


    // ---- Create Viewport with hbox layout ----------------------
    Ext.create('Ext.Viewport',{
        // 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
        },
        items:[
            {
                title: 'Panel one',
                html: '<h2>I am panel 1</h2>',
                width: 100,
                height:80
            },
            {
                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.

Thanks!

Jan Harmsen

[evant]

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.

[jan.harmsen]

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!

Jan