Center buttons horizontally of form

Question

Can somebody help me to center the buttons horizontally of a form? I don't know how I can give a vbox layout with align center to the button items.

The following code is from Sencha Docs.

Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,

// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',

// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
    anchor: '100%'
},

// The fields
defaultType: 'textfield',
items: [{
    fieldLabel: 'First Name',
    name: 'first',
    allowBlank: false
},{
    fieldLabel: 'Last Name',
    name: 'last',
    allowBlank: false
}],

// Reset and Submit buttons
buttons: [{
    text: 'Reset',
    handler: function() {
        this.up('form').getForm().reset();
    }
}, {
    text: 'Submit',
    formBind: true, //only enabled once the form is valid
    disabled: true,
    handler: function() {
        var form = this.up('form').getForm();
        if (form.isValid()) {
            form.submit({
                success: function(form, action) {
                   Ext.Msg.alert('Success', action.result.msg);
                },
                failure: function(form, action) {
                    Ext.Msg.alert('Failed', action.result.msg);
                }
            });
        }
    }
}],
renderTo: Ext.getBody()
});

I thank you very much for your support!

Kind regards, shub

Answer 1

I found the correct solution. You have to set only the "buttonAlign" config to center.

Ext.create('Ext.form.Panel', {
    title: 'Simple Form',
    bodyPadding: 5,
    width: 350,

    // The form will submit an AJAX request to this URL when submitted
    url: 'save-form.php',

    // Fields will be arranged vertically, stretched to full width
    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },

    // The fields
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'First Name',
        name: 'first',
        allowBlank: false
    },{
        fieldLabel: 'Last Name',
        name: 'last',
        allowBlank: false
    }],
    buttonAlign: 'center',

    // Reset and Submit buttons
    buttons: [{
        text: 'Reset',
        handler: function() {
            this.up('form').getForm().reset();
        }
    }, {
        text: 'Submit',
        formBind: true, //only enabled once the form is valid
        disabled: true,
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    success: function(form, action) {
                       Ext.Msg.alert('Success', action.result.msg);
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('Failed', action.result.msg);
                    }
                });
            }
        }
    }],
    renderTo: Ext.getBody()
});

Answer 2

you can use "bbar" for this. check this.

 bbar: {
        layout: 'auto',
        items: {
            xtype: 'container',
            autoEl: 'center',
            defaultType: 'button',
            items: [{
                text: 'Reset',
                handler: function() {
                    this.up('form').getForm().reset();
                }},
            {
                text: 'Submit',
                formBind: true,
                //only enabled once the form is valid
                disabled: true,
                handler: function() {
                    var form = this.up('form').getForm();
                    if (form.isValid()) {
                        form.submit({
                            success: function(form, action) {
                                Ext.Msg.alert('Success', action.result.msg);
                            },
                            failure: function(form, action) {
                                Ext.Msg.alert('Failed', action.result.msg);
                            }
                        });
                    }
                }}]
        }
    }