How to fix default tab key navigation in Extjs 5.1?

Question

Currently I'm working on a code migration from ExtJS 4.2 to ExtJS 5.1. And I noticed MANY changes on default behavior of many components.

One of the things I noticed is that the default tab key navigation between components has changed and in this case is not quite predictable.

To reproduce go to the 4.2 fiddle here, and then click on the first text field, hit tab and then it would change focus to state combo box; hit tab again and it would go to "Next" button, hit tab again and it would go to "Second option" radio button, and so on in a predictable order.

Then repeat the same thing on 5.1 fiddle here. First thing you'll notice is that "My First Option" radio is unchecked (that's another issue), but the main issue I would like to fix is the odd order it follows on tab key press.

How can I make tab key navigation behave as it did on 4.2 version?

Including sample code here:

// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
    ]
});

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Ext.form.Panel', {
            title: 'My Navigable Panel',
            items: [
                {
                    xtype: 'radiogroup',
                    layout: 'vbox',                    
                    items: [
                        {
                            xtype: 'radiofield',
                            boxLabel: 'My First Option',
                            name: 'radio',                            
                            value: true,
                            checked: true,
                            listeners: {
                                change: function(group, newValue, oldValue) {

                                    if(newValue) {
                                        group.up('form').down('fieldcontainer[name=containerA]').show();
                                        group.up('form').down('fieldcontainer[name=containerB]').hide();
                                    } else {
                                        group.up('form').down('fieldcontainer[name=containerA]').hide();
                                        group.up('form').down('fieldcontainer[name=containerB]').show();                                        
                                    }
                                }
                            },
                        },
                        {
                            xtype: 'fieldcontainer',
                            layout: 'hbox',
                            name: 'containerA',                            
                            fieldDefaults: {
                                labelAlign: 'top',
                                margin: '0 5 0 5'
                            },
                            items: [
                                {
                                    xtype: 'textfield',
                                    fieldLabel: 'First field',
                                    allowBlank: false
                                },
                                {
                                    xtype: 'combo',
                                    fieldLabel: 'State',
                                    width: 50,
                                    store : states,
                                    queryMode: 'local',
                                    displayField: 'name',
                                    valueField: 'abbr',
                                },
                                {
                                    xtype: 'button',
                                    text: 'Next'
                                }
                            ]
                        },
                        {
                            xtype: 'radiofield',
                            boxLabel: 'My Second Option',
                            name: 'radio',
                            value: false
                        }
                    ]

                },
                {
                    xtype: 'fieldcontainer',
                    padding: '0 0 0 25',
                    name: 'containerB',
                    hidden: true,
                    items: [{
                        xtype: 'radiogroup',
                        layout: 'vbox',
                        items: [
                            {
                                xtype: 'radiofield',
                                fieldLabel: 'My nested radio button A',
                                name: 'subradio'
                            },
                            {
                                xtype: 'radiofield',
                                fieldLabel: 'My nested radio button B',
                                name: 'subradio'
                            }
                        ]
                    }]
                }
            ],
            renderTo: Ext.getBody()
        }).show();
    }
});

jacoviza jacoviza · Accepted Answer · 2016-01-13T22:06:51

Well, I did not find a way to tell ExtJS 5.1 to navigate through the form as it did on 4.2, but I managed to get the desired behavior by modifying my form composition (although it looks the same) in a way that ExtJS 5.1 was able to orderly follow.

To make that happen I removed the radiogroup component but kept all that was inside of it (which was pretty much the whole form content). It seems that structure didn't feel quite natural to the updated framework.

Here is a fiddle with the mentioned changes.

Including code here:

// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data : [
        {"abbr":"AL", "name":"Alabama"},
        {"abbr":"AK", "name":"Alaska"},
        {"abbr":"AZ", "name":"Arizona"}
    ]
});

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Ext.form.Panel', {
            title: 'My Navigable Panel',  
            items: [

                {
                    xtype: 'radiofield',
                    boxLabel: 'My First Option',
                    name: 'radio',
                    value: true,
                    checked: true,
                    listeners: {
                        change: function(group, newValue, oldValue) {

                            if(newValue) {
                                group.up('form').down('fieldcontainer[name=containerA]').show();
                                group.up('form').down('fieldcontainer[name=containerB]').hide();
                            } else {
                                group.up('form').down('fieldcontainer[name=containerA]').hide();
                                group.up('form').down('fieldcontainer[name=containerB]').show();                                        
                            }
                        }
                    },
                },
                {
                    xtype: 'fieldcontainer',
                    layout: 'hbox',
                    name: 'containerA',                            
                    fieldDefaults: {
                        labelAlign: 'top',
                        margin: '0 5 0 5'
                    },
                    items: [
                        {
                            xtype: 'textfield',
                            fieldLabel: 'First field',
                            allowBlank: false
                        },
                        {
                            xtype: 'combo',
                            fieldLabel: 'State',
                            width: 50,
                            store : states,
                            queryMode: 'local',
                            displayField: 'name',
                            valueField: 'abbr',
                        },
                        {
                            xtype: 'button',
                            text: 'Next'
                        }
                    ]
                },
                {
                    xtype: 'radiofield',
                    boxLabel: 'My Second Option',
                    name: 'radio',
                    value: false                    
                },
                {
                    xtype: 'fieldcontainer',
                    padding: '0 0 0 25',
                    name: 'containerB',
                    hidden: true,
                    items: [{
                        xtype: 'radiogroup',
                        layout: 'vbox',
                        items: [
                            {
                                xtype: 'radiofield',
                                fieldLabel: 'My nested radio button A',
                                name: 'subradio'
                            },
                            {
                                xtype: 'radiofield',
                                fieldLabel: 'My nested radio button B',
                                name: 'subradio'
                            }
                        ]
                    }]
                }
            ],
            renderTo: Ext.getBody()
        }).show();
    }
});

How to fix default tab key navigation in Extjs 5.1?

1 Answers