右对齐按钮答案

【问题标题】：Right align button右对齐按钮
【发布时间】：2021-05-10 08:29:47
【问题描述】：

我正在使用 ExtJs 3.4

我在使用“完成工作流程”按钮时遇到了一个大问题 - 我想右对齐该按钮。到目前为止我尝试过的一切都没有奏效。有没有办法做到这一点？

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 () {

                            },

                        }]
                }
            ]
        });

【问题讨论】：

标签： extjs extjs3

【解决方案1】：

您可以使用带有“->”的工具栏将项目向右移动：

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();

【讨论】：