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

Question

我有一个包含两个文本字段的表单，这些字段以'vbox'格式对齐，并且对齐为'stretch'。我现在想添加一个SAVE按钮，它应该在表单的中间对齐。如何将此按钮定义为在中间完全对齐，就像在常用警报中一样，OK按钮位于警报框的中间。

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

Answer 1

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

另一种方法是使用带有布局的dockedItems：'hbox'和pack：'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