Sencha Touch: How to center align two buttons in bottom docked toolbar?

2
votes

I was wondering how I would be able to center align two buttons in a bottom docked toolbar. The only attribute that addresses this on the buttosn I saw was centered but that centers them absolutely overlapping the buttons, is there a way to group them in the center?

Here is some code I have been working with: http://www.senchafiddle.com/#xTZZg#k24Ni

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    name: 'SenchaFiddle',

    launch: function () {

        var panelNewForm = Ext.create('Ext.Panel', {
            id: 'panelNewForm',
            title: 'TEST',
            html: 'TEST',
            pack: 'center',
            items: [{
                xtype: 'toolbar',
                docked: 'bottom',
                layout: {
                    type: 'hbox',
                    align: 'center'
                },
                items: [{
                    ui: 'decline',
                    text: 'Cancel',
                    handler: function () {

                    }
                }, {
                    ui: 'confirm',
                    text: 'Save',
                    handler: function () {

                    }
                }]
            }]
        });
        Ext.Viewport.add(panelNewForm);
    }
});
2
javascriptmobileextjssencha-touchsencha-touch-2

2 Answers

10
votes

You can give your toolbar a layout config:

layout: {
    pack: 'center',
    type: 'hbox'
}

This will render your items in center of this toolbar horizontally.

0
votes

You can also make those center by using xtype:'spacer'. The Ext.Spacer component is generally used to put space between items in Ext.Toolbar components. Plz refer sencha docs

Now, here is your code sample :

 items: [{
                xtype: 'toolbar',
                docked: 'bottom',                
                items: [{
                    xtype:'spacer'
                },
                {
                    ui: 'decline',
                    text: 'Cancel',
                    handler: function () {

                    }
                }, {
                    ui: 'confirm',
                    text: 'Save',
                    handler: function () {

                    }
                },{
                    xtype:'spacer'
                }]
            }]

Note: You can also adjust its centeredness by giving various flex