在表格中间放一个保存按钮

Question

我有一个包含两个文本字段的表单，它们以“vbox”格式对齐，对齐为“拉伸”。我现在希望添加一个 SAVE 按钮，该按钮应在表单中间对齐。我如何定义这个按钮在中间完全对齐，就像在通常的警报中一样，确定按钮位于警报框的中间。

如果它可以在没有 CSSS 的情况下完成，那将是可取的。

Answer 1

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

另一种方法是使用带有 layout:'hbox' 和 pack:'center' 的 dockedItems

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