extjsextjs3

Right align button


I am using ExtJs 3.4

I am having a big problem with button 'Finish workflow' - I would like to right align that button. Everything that I've tried so far didn't work. Is there any way to do this?

enter image description here

var wndFinishWorkflow = new Ext.Window({
            width: 500,
            height: 300,
            border: false,
            padding: '20px',
            closeAction: 'hide',
            modal: true,
            title: 'Finish workflow',
            items: [
                {
                    xtype: 'form',
                    border: false,
                    items: [
                        {
                            xtype: 'displayfield',
                            disabled: true,
                            fieldLabel: 'Workflow ID',
                            value: '49949494'
                        }]
                },
                {
                    xtype: 'form',
                    border: false,
                    items: [
                        {
                            xtype: 'displayfield',
                            disabled: true,
                            fieldLabel: 'WF status',
                            value: 'Finished'
                        }]
                },
                {
                    xtype: 'form',
                    border: false,
                    items: [
                        {
                            fieldLabel: 'Razlog',
                            xtype: 'appcombo',
                            width: 300,
                            store: new Ext.data.JsonStore({
                                idProperty: 'Id',
                                fields: ['Id', 'Name']
                            }),
                            displayField: 'Name',
                            valueField: 'Id',
                            editable: false,
                            allowBlank: false
                        }]
                },
                {
                    xtype: 'form',
                    border: false,
                    items: [
                        {
                            xtype: 'textarea',
                            width: 300,
                            fieldLabel: 'Komentar'
                        }]
                },
                {
                    xtype: 'form',
                    border: false,                    
                    items: [
                        {
                            xtype: 'button',
                            text: 'Finish workflow',
                            cls: 'x-btn-important',
                            handler: function () {

                            },

                        }]
                }
            ]
        });

Solution

  • You can use toolbar with '->' to move the items to right:

    var wndFinishWorkflow = new Ext.Window({
        width: 500,
        height: 300,
        border: false,
        padding: '20px',
        closeAction: 'hide',
        modal: true,
        title: 'Finish workflow',
        layout: 'form',
        items: [{
            xtype: 'displayfield',
            disabled: true,
            fieldLabel: 'Workflow ID',
            value: '49949494'
        }, {
            xtype: 'displayfield',
            disabled: true,
            fieldLabel: 'WF status',
            value: 'Finished'
        }, {
            fieldLabel: 'Razlog',
            //xtype: 'appcombo', 
            xtype: 'combo',
            width: 300,
            store: new Ext.data.JsonStore({
                idProperty: 'Id',
                fields: ['Id', 'Name']
            }),
            displayField: 'Name',
            valueField: 'Id',
            editable: false,
            allowBlank: false
        }, {
            xtype: 'textarea',
            width: 300,
            fieldLabel: 'Komentar'
        }],
        bbar: {
            xtype: 'toolbar',
            items: ['->', {
                xtype: 'button',
                text: 'Finish workflow',
                cls: 'x-btn-important',
                handler: function () {
                    console.log('Button Click');
                }
            }]
        }
    }).show();