Ext JS 6 无法右对齐我的按钮 xtype
Ext JS 6 can't right align my button xtype
我在 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'
}
}]
}
两个选项:
将按钮嵌套在 xtype 中:'container' 布局:
{
xtype: 'container',
layout: {
type: 'vbox',
align: 'right'
},
items: [{
xtype: 'button',
text: 'Login',
formBind: true,
listeners: {
click: 'onLoginClick'
}
}]
}
在 xtype 'button' 上使用 属性 "margin"。
您可以像这样使用 bbar
config for 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'
}
}]
}
})
}
});
将您的按钮放在按钮内 configuration.It 会自动将您的按钮右对齐。
buttons:[{
text: 'Login',
formBind: true,
style: {
marginTop: '10px',
padding: '5px 15px 5px 15px'
},
listeners: {
click: 'onLoginClick'
}
}]
我在 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'
}
}]
}
两个选项:
将按钮嵌套在 xtype 中:'container' 布局:
{ xtype: 'container', layout: { type: 'vbox', align: 'right' }, items: [{ xtype: 'button', text: 'Login', formBind: true, listeners: { click: 'onLoginClick' } }] }
在 xtype 'button' 上使用 属性 "margin"。
您可以像这样使用 bbar
config for 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'
}
}]
}
})
}
});
将您的按钮放在按钮内 configuration.It 会自动将您的按钮右对齐。
buttons:[{
text: 'Login',
formBind: true,
style: {
marginTop: '10px',
padding: '5px 15px 5px 15px'
},
listeners: {
click: 'onLoginClick'
}
}]