Как панель формы ExtJS bodyPadding не заполняет кнопки формы

Я читаю extjs официальный учебник, чтобы создать логин форме, поэтому я создаю следующее окно формы входа:

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'
            }
        }]
    }
});

вот скриншот:

Обратите внимание, что кнопка «Войти» была обёрнута серым фоном, но заполняла окно шириной 10 пикселей.

Как bodyPadding не заполнять нижнюю кнопку без пробела родительским окном? Так же, как на следующей картинке:

я использую extjs6