Focus issue while tab press

Question

I have three buttons Cancel, Submit & Reset in a form and a close button in the titlebar. When I press tab button it focuses close button of the form, next press switch the focus to the first button and again on next tab click its focusing back to the close button instead of shifting focus to next buttons. Below is the code.

Ext.define('Test', {
    extend: 'Ext.Window',    
    requires: [
        'Ext.form.Panel'
    ],    
    autoShow: true,
    title: "Test",
    width: 350,    
    items: {
        xtype: 'form',
        buttonAlign:'center',
        buttons: [
            {
                text   : 'Cancel'
            }, {
                text    : 'Submit'
            }, {
                text    : 'Reset'
            }
        ]
    }
});

Ext.create('Test');

I can change the focus by using arrow keys but I guess it should be focused by tab press only. Any hints please. I am using Extjs 6 classic.

Fiddle link here

Answer 1

Well, appears to be a bug. One workaround is to make a custom button panel, the focus still goes to the close button but it cycles to all the buttons, take a look:

Ext.define('Test', {
    extend: 'Ext.Window',

    requires: [
        'Ext.form.Panel'
    ],

    autoShow: true,
    title: "Test",
    width: 350,

    items: [{

        //Your content panel
        xtype: 'panel',
        padding:20,
        height: 300,
        html: 'My Content Panel'

    }, {

        //Custom button panel
        xtype: 'panel',
        padding: 10,
        layout: {
            align: 'middle',
            pack: 'center',
            type: 'hbox'
        },
        items: [{
            margin: '0 2 0 0',
            xtype: 'button',
            text: 'Cancel'
        }, {
            margin: '0 2 0 0',
            xtype: 'button',
            text: 'Submit'
        }, {
            margin: '0 2 0 0',
            xtype: 'button',
            text: 'Reset'
        }]
    }],

});

Ext.create('Test');

I hope it helps!