ExtJS - center items in button group

Question

I'm not sure how to go about this, buttonAlign: 'center' nor pack: 'center' are working. Fiddle: http://jsfiddle.net/3Ytp9/

code4jhon · Answer 1 · 2013-11-04T21:23:31.077

Have you considered using a toolbar in the bottom of your panel?

https://fiddle.sencha.com/#fiddle/1c0 (without mvc pattern)

You can also use something like this:

        dockedItems: [{
        xtype: 'toolbar',
        layout: {
            pack: 'center'
        },
        defaultButtonUI: 'default', // get default look and feel
        dock: 'bottom',
        items: [{
            xtype: 'button',
            width: 200,           
            text: 'Download to Excel',

        },{
            xtype: 'button',
            width: 200,           
            text: 'Another action',

        }]

Best Regards.

Hm, any way to center them without using a docked toolbar? – mustafa.0x Nov 05 '13 at 06:24 — mustafa.0x, Nov 05 '13 at 06:24

score 1 · Accepted Answer · edited Nov 05 '13 at 12:28

1

Use the layout property of buttongroup:

    layout: {
        type: 'vbox',
        align: 'center'
    }

See forked fiddle: https://fiddle.sencha.com/#fiddle/1cm

edited Nov 05 '13 at 12:28

mustafa.0x

1,476
2
17
30

answered Nov 05 '13 at 10:54

newmount

1,921
1
12
10

score 0 · Answer 3 · answered Nov 04 '13 at 16:51

Try:

Ext.onReady(function() {
  var panel = Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    title: 'Button group',
    border: true,
    layout: {
        align: 'middle',
        pack: 'center',
        type: 'hbox'
    },
    width: 500,
    items: [{
        xtype: 'buttongroup',
        columns: 1,
        items: [{
            xtype: 'button',
            text: 'Go'
        }, {
            xtype: 'button',
            text: 'Reset'
        }]
    }]
 });
});

To have the buttons side by side, remove columns:1 - also note that the Ext JS implementation on JSFiddle is terrible, so dont rely on it too much.

ExtJS - center items in button group

3 Answers3