title: How to fix default tab key navigation in Extjs 5.1?
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>To reproduce go to the <a href="https://fiddle.sencha.com/#fiddle/13oj" rel="nofollow">4.2 fiddle here</a>, 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.</p>
  
  <p>Then repeat the same thing on <a href="https://fiddle.sencha.com/#fiddle/13oi" rel="nofollow">5.1 fiddle here</a>. 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.</p>
  
  <p>How can I make tab key navigation behave as it did on 4.2 version?</p>
  
  <p>Including sample code here:</p>
  
  <pre><code>// 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();
      }
  });
  </code></pre>