Align items vertically in a center - Sencha Panel

Question

I am trying to align mid of the screen of an item simply a label but it is aligning it horizontally not vertically.

var panel = new Ext.Panel({
    layout:{
        type: 'vbox',
        align: 'center'
    },
    items:[
        {
            xtype: 'label',
            html: 'My Label'
        }
    ],
    fullscreen: true,
    flex: 1
});

I have removed flex, and set height as well, but it doesn't work. Please give me some clue?

score 13 · Accepted Answer · edited Jul 26 '17 at 01:23

13

Try using pack: center in the layout, like this:

var panel = new Ext.Panel({
    layout: {
        type: 'hbox',
        align: 'center',
        pack: 'center'
    }, 
    items:[
        {
            xtype: 'label',
            html: 'My Label'
        }
    ]
});

edited Jul 26 '17 at 01:23

MarthyM

1,839
2
21
23

answered Nov 22 '13 at 08:35

Sujata Chanda

3,355
2
21
35

1

It controls how the child items of the container are packed together. Like `center` makes the child items packed together at mid-width of container. – Sujata Chanda Nov 22 '13 at 10:16
1

this doesn't work for my panel. I have as items a label and a button – alexandre1985 May 02 '16 at 20:51

score 4 · Answer 2 · answered Dec 29 '15 at 10:53

4

For HBox layout preferable to use 'align: middle' config I suppose. Try this:

var panel = new Ext.Panel({
    layout: {
        type: 'hbox',
        align: 'middle'
    }, 
    items:[{
        xtype:'label',
        html:'My Label'
    }]
});

answered Dec 29 '15 at 10:53

Alex Dzeiko

866
11
12

Align items vertically in a center - Sencha Panel

2 Answers2