我已经在Ext JS 6.6中构建了一个非常简单的登录页面,但是为了我的生命,我似乎无法正确地将登录按钮与表单字段的末尾对齐。无论我做什么,它都一直留在左边。
如何解决此问题?
我正在使用的代码如下;
git flow
答案 0 :(得分:2)
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)
两个选项:
将按钮嵌套在具有布局的xtype:'container'内
{
xtype: 'container',
layout: {
type: 'vbox',
align: 'right'
},
items: [{
xtype: 'button',
text: 'Login',
formBind: true,
listeners: {
click: 'onLoginClick'
}
}]
}
在xtype“按钮”上使用属性“ margin”。
答案 2 :(得分:0)
将按钮放在按钮配置中,它将自动将按钮向右对齐。
buttons:[{
text: 'Login',
formBind: true,
style: {
marginTop: '10px',
padding: '5px 15px 5px 15px'
},
listeners: {
click: 'onLoginClick'
}
}]