Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Dec 2010
    Location
    Cologne, Germany
    Posts
    27
    Vote Rating
    0
    jan.harmsen is on a distinguished road

      0  

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

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


    It seems like layoutConfig parameters 'pack' and 'align' are not working on layout hbox like they used to.

    Code:
    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!

  2. #2
    Touch Premium Member
    Join Date
    Jun 2008
    Posts
    43
    Vote Rating
    0
    bhutten is on a distinguished road

      0  

    Default


    I see this as well.

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,645
    Vote Rating
    583
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


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

    Code:
    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
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Ext JS Premium Member
    Join Date
    Dec 2010
    Location
    Cologne, Germany
    Posts
    27
    Vote Rating
    0
    jan.harmsen is on a distinguished road

      0  

    Default


    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:


    Code:
    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

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,645
    Vote Rating
    583
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Ext JS Premium Member
    Join Date
    Dec 2010
    Location
    Cologne, Germany
    Posts
    27
    Vote Rating
    0
    jan.harmsen is on a distinguished road

      0  

    Default


    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

  7. #7
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    388
    Vote Rating
    13
    devtig will become famous soon enough

      0  

    Default


    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.*.

  8. #8
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,645
    Vote Rating
    583
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Similar Threads

  1. hbox layout and align strech
    By gkatz in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 6 Dec 2012, 5:11 AM
  2. Replies: 2
    Last Post: 3 Dec 2010, 8:25 AM
  3. Align items in layout HBOX
    By aperez in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 6 Aug 2010, 3:17 AM
  4. Bug ? HBox Layout not working under IE 8 ?
    By eks8fe in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 26 Jan 2010, 4:34 PM
  5. [3.0 RC3]Issue with HBox layout and Align Middle
    By robertoroberto in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 6 Jul 2009, 12:43 AM

Thread Participants: 3

Tags for this Thread