ExtJS表单面板bodyPadding如何不填充表单按钮

Question

我正在阅读 extjs offical tutorial 以创建登录表单，因此我创建了以下登录表单 window:

Ext.define('MyApp.view.login.Login', {
    extend: 'Ext.window.Window',
    xtype: 'login',

    requires: [
        'Ext.form.Panel',
        'Ext.form.field.Display',
        'Ext.form.field.Text'
    ],

    bodyPadding: 10,
    title: 'Login Window',
    closable: false,
    autoShow: true,

    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: 'displayfield',
            hideEmptyLabel: false,
            value: 'Enter any non-blank password'
        }],
        buttons: [{
            text: 'Login',
            formBind: true,
            listeners: {
                click: 'onLoginClick'
            }
        }]
    }
});

截图如下：

请注意 "Login" 按钮，它被灰色背景包裹着，但填充了 10px 白色 space 和 window。

如何 bodyPadding 不使用父级 window 填充没有白色 space 的底部按钮？就像下图：

我正在使用 extjs6

Answer 1

将 bodyPadding 从 window 向下移动到表格中。正文不包括停靠的项目。

Fiddle.

ExtJS表单面板bodyPadding如何不填充表单按钮

How ExtJS form panel bodyPadding do not padding form buttons

extjs

extjs6