1. #1
    Sencha Premium Member
    Join Date
    Dec 2011
    Location
    London, UK
    Posts
    256
    Answers
    3
    Vote Rating
    8
    bseddon will become famous soon enough

      0  

    Default Answered: What's the best way to center control vertically and horizontally

    Answered: What's the best way to center control vertically and horizontally


    Setting styles to change margins to 'auto' doesn't work because the layout logic overrides any explicit styles which affect layout. ux.center is not an option either as it can center only one control. Here's the effect I'm looking for:

    DesiredLayout.png

    If the window were fixed size this would not be difficult. Also I want the the option to have the progress bar to expand horizontally as the window is resized while the button width remains fixed and the window size changes.

    To arrange this image, the window is set to a 'vbox' layout with stretch alignment. There are two 'invisible' panels as the first and last items with flex set to 1. This takes care of centering vertically.

    Controls within vbox rows can be centered using a similar trick but with an hbox layout. That is, the button is one of three controls on that row (the other two are invisible panels with flex set to 1).

    Obviously this approach works but it seems convoluted which probably means I've missed something hiding in plain sight. Do you know what it is?

    Here's the ExtJS code for the window:

    Code:
    Ext.application({
        name: 'My App',
        launch: function()
        {
            var pb = Ext.create('Ext.ProgressBar',
            {
                ui:'default',
                row: 1
            });
    
    
            // Wait for 5 seconds, then update the status el (progress bar will auto-reset)
            pb.wait(
            {
                interval: 500, //bar will move fast!
                duration: 50000,
                increment: 15,
                text: "Hi, I've got a custom UI...",
                scope: this,
                fn: function(){
                    pb.updateText('Done!');
                }
            });
    
    
            Ext.create('Ext.window.Window',
            {
                title: 'Custom Window',
                width  : 200,
                height : 150,
                modal: true,
                bodyStyle: 'background-color:#fff; padding: 0 4;',
                layout: { type: 'vbox', align: 'stretch', shrinkToFit: false },
                items:
                [
                    {
                        border:0, flex: 1
                    },
                    pb,
                    {
                        border:0, height: 10
                    },
                    {
                        xtype: 'panel',
                        layout: { type: 'hbox' },
                        border:0, 
                        items:
                        [
                            {
                                border:0, flex: 1
                            },
                            {
                                xtype: 'button',
                                width: 60,
                                border:1, 
                                text: 'XX'
                            },
                            {
                                border:0, flex: 1
                            }
                        ]
                    },
                    {
                        border:0, flex: 1
                    }
                ],
                bbar:
                [
                    '->',
                    {
                        text: 'close'
                    }
                ]
            }).show();
        }
    });

  2. I usually use hbox layout:

    Code:
    layout : {
        type  : 'hbox',
        pack  : 'center',
        align : 'middle'
    }
    If you look at the HBox layout example and press the button with text : 'Pack: center / Align: middle' you will see this behavior

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,604
    Answers
    3448
    Vote Rating
    818
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I usually use hbox layout:

    Code:
    layout : {
        type  : 'hbox',
        pack  : 'center',
        align : 'middle'
    }
    If you look at the HBox layout example and press the button with text : 'Pack: center / Align: middle' you will see this behavior
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha Premium Member
    Join Date
    Dec 2011
    Location
    London, UK
    Posts
    256
    Answers
    3
    Vote Rating
    8
    bseddon will become famous soon enough

      0  

    Default


    Pack! Perfect. Works on vbox as well. Would never have got there.

Thread Participants: 1