Ext JS 6无法正确对齐我的按钮xtype

时间:2018-07-26 03:10:02

标签: javascript extjs extjs6

我已经在Ext JS 6.6中构建了一个非常简单的登录页面,但是为了我的生命,我似乎无法正确地将登录按钮与表单字段的末尾对齐。无论我做什么,它都一直留在左边。

Login form

如何解决此问题?

我正在使用的代码如下;

git flow

3 个答案:

答案 0 :(得分:2)

您可以像这样将bbar组件用于form组件

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

答案 1 :(得分:0)

两个选项:

  1. 将按钮嵌套在具有布局的xtype:'container'内

    {
        xtype: 'container',
        layout: {
            type: 'vbox',
            align: 'right'
        },
        items: [{
            xtype: 'button',
            text: 'Login',
            formBind: true,
            listeners: {
                click: 'onLoginClick'
            }
        }]
    }
    
  2. 在xtype“按钮”上使用属性“ margin”。

答案 2 :(得分:0)

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

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