CODEWITHSUNDEEP
javascriptextjsextjs6
user9048585
user9048585

Reputation:

Ext JS 6 can't right align my button xtype

I have built a very simple login page in Ext JS 6.6, but for the life of me I can't seem to right align the login button with the end of the form fields. It just stays to the left no matter what I do.

Login form

How can I fix this problem?

The code I'm using is as follows;

items: {
    xtype: 'form',
    reference: 'form',
    items: [{
        xtype: 'textfield',
        name: 'username',
        fieldLabel: 'Username',
        allowBlank: false
    }, {
        xtype: 'textfield',
        name: 'password',
        inputType: 'password',
        fieldLabel: 'Password',
        allowBlank: false
    }, {
        xtype: 'button',
        text: 'Login',
        formBind: true,
        style: {
            marginTop: '10px',
            padding: '5px 15px 5px 15px'
        },
        listeners: {
            click: 'onLoginClick'
        }
    }]
}

Upvotes: 1

Views: 2796

Answers (3)

Narendra Jadhav
Narendra Jadhav

Reputation: 10262

You can use bbar config for form component like this

bbar: [
  '->',//spliter to shift next component up to end of right
  { xtype: 'button', text: 'Button 1' }
]

In this FIDDLE, I have create a demo using bbar config.

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create({
            xtype: 'panel',
            title: 'Login View',
            border: true,
            width: 320,
            renderTo: Ext.getBody(),
            items: {
                xtype: 'form',
                reference: 'form',
                bodyPadding: 15,
                layout: 'vbox',
                defaults: {
                    width: '100%'
                },
                items: [{
                    xtype: 'textfield',
                    name: 'username',
                    fieldLabel: 'Username',
                    allowBlank: false
                }, {
                    xtype: 'textfield',
                    name: 'password',
                    inputType: 'password',
                    fieldLabel: 'Password',
                    allowBlank: false
                }],
                bbar: ['->', {
                    xtype: 'button',
                    text: 'Login',
                    formBind: true,
                    listeners: {
                        click: 'onLoginClick'
                    }
                }]
            }
        })
    }
});

Upvotes: 2

V_Dev
V_Dev

Reputation: 93

place your button inside buttons configuration.It will automatically align your button to right. 

buttons:[{
    text: 'Login',
    formBind: true,
    style: {
        marginTop: '10px',
        padding: '5px 15px 5px 15px'
    },
    listeners: {
        click: 'onLoginClick'
    }
}]

Upvotes: 0

Yeshwanth N
Yeshwanth N

Reputation: 570

Two options:

  1. Nest the button inside an xtype:'container' with a layout:

    {
    xtype: 'container',
    layout: {
        type: 'vbox',
        align: 'right'
    },
    items: [{
        xtype: 'button',
        text: 'Login',
        formBind: true,
        listeners: {
            click: 'onLoginClick'
        }
    }]
}

  2. Use property "margin" on xtype 'button'.

Upvotes: 1

Related Questions