右对齐按钮

问题描述

我使用的是 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',items: [
                        {
                            xtype: 'displayfield',disabled: true,fieldLabel: 'Workflow ID',value: '49949494'
                        }]
                },{
                    xtype: 'form',fieldLabel: 'WF status',value: 'Finished'
                        }]
                },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
                        }]
                },items: [
                        {
                            xtype: 'textarea',fieldLabel: 'Komentar'
                        }]
                },items: [
                        {
                            xtype: 'button',text: 'Finish workflow',cls: 'x-btn-important',handler: function () {

                            },}]
                }
            ]
        });

解决方法

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

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',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',fieldLabel: 'Komentar'
    }],bbar: {
        xtype: 'toolbar',items: ['->',{
            xtype: 'button',text: 'Finish workflow',cls: 'x-btn-important',handler: function () {
                console.log('Button Click');
            }
        }]
    }
}).show();

extjs extjs3