Ext JS 6 无法右对齐我的按钮 xtype答案

【问题标题】：Ext JS 6 can't right align my button xtypeExt JS 6 无法右对齐我的按钮 xtype
【发布时间】：2018-07-26 03:10:01
【问题描述】：

我在 Ext JS 6.6 中构建了一个非常简单的登录页面，但在我的一生中，我似乎无法将登录按钮与表单字段的末尾对齐。无论我做什么，它都停留在左侧。

我该如何解决这个问题？

我使用的代码如下；

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'
        }
    }]
}

【问题讨论】：

标签： javascript extjs extjs6

【解决方案1】：

您可以像这样为form 组件使用bbar 配置

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

在这个 FIDDLE 中，我使用bbar 配置创建了一个演示。

代码片段

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'
                    }
                }]
            }
        })
    }
});

【讨论】：

嘿，按钮从标准的蓝色变成浅灰色有什么原因吗？
没有具体原因取决于您使用的主题。我用过[Classic] Neptune Touch 所以这就是为什么颜色浅灰色
谢谢，我决定选择这个选项。

【解决方案2】：

两种选择：

将按钮嵌套在带有布局的 xtype:'container' 中：

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

在 xtype 'button' 上使用属性“margin”。

【讨论】：

嘿，谢谢你提供的信息，我是个新手，正在学习，我想知道你是否有机会告诉我你的意思？
额外的容器需要一个布局，如下：{ xtype: 'container', layout: { type: 'vbox', align: 'right' }, items: [{ xtype: 'button', text: 'Login', formBind: true, listeners: { click: 'onLoginClick' } }] } 虽然我个人更喜欢 bbar 选项在另一个答案中
编辑答案改为更正它，因为 cmets 不适用于代码 sn-ps

【解决方案3】：

将您的按钮放在按钮配置中。它会自动将您的按钮向右对齐。

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

【讨论】：

嘿，是的，我最初使用它，但我无法摆脱那个该死的灰色背景
Okie 那么 bbar 选项更好。