在表单中间放置一个保存按钮

Question

我有一个包含两个文本字段的表单，它们以 'vbox' 格式对齐，对齐方式为 'stretch'。我现在想添加一个保存按钮，它应该在表单中间对齐。我如何定义此按钮使其在中间完全对齐，就像在通常的警报中一样，其中“确定”按钮位于警报框的中间。

如果不用 CSSS 也能做到，那就更好了。

Answer 1

buttonAlign ：添加到此面板的任何按钮的对齐方式。有效值为 'right'、'left' 和 'center'（[=28= 默认为 'right'，其他工具栏类型默认为 'left'）。

另一种方法是将 dockedItems 与布局一起使用：'hbox' 并打包：'center'

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('Ext.form.Panel', {
            width: 300,
            bodyPadding: 10,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'textfield',
                title: 'Contact Info',
                name: 'name',
                fieldLabel: 'Name'
            }, {
                xtype: 'textfield',
                name: 'email',
                fieldLabel: 'Email Address'
            }],

            buttons: [{
                text: 'Save'
            }],
            buttonAlign: 'center',
            renderTo: Ext.getBody()
        })
    }
});

FIDDLE

在表单中间放置一个保存按钮

Put a save button in the middle of the form

layout

extjs

button

alignment