如何修復Extjs 5.1中的默認標籤鍵導航？

Question

目前我正在從ExtJS 4.2到ExtJS 5.1的代碼遷移工作。我發現許多組件的默認行爲有很多變化。

我注意到的一件事情是組件之間的默認標籤鍵導航已經改變，在這種情況下是不可預測的。

要重現去4.2 fiddle here，然後點擊第一個文本字段，點擊標籤，然後它會改變焦點狀態組合框;再次點擊選項卡，它會轉到「下一步」按鈕，再次點擊選項卡，它將以可預測的順序進入「第二選項」單選按鈕等等。

然後在5.1 fiddle here上重複相同的操作。首先你會注意到「我的第一選擇」收音機沒有被選中（這是另一個問題），但是我想要解決的主要問題是它在標籤按鍵上的奇怪順序。

如何讓tab鍵導航的行爲與4.2版本一樣？

包括示例代碼在這裏：

// 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(); 
    } 
}); 

Answer 1

嗯，我沒有找到一個方法來告訴ExtJS的5.1到，因爲它沒有在4.2的形式瀏覽，但我設法通過修改來獲得所需的行爲我形式組合（儘管看起來相同），ExtJS 5.1能夠有條不紊地遵循。

要做到這一點，我刪除了radiogroup成分但保留所有的，它裏面（這是幾乎整個表格的內容）。看起來結構對於更新的框架並不覺得很自然。

Here is a fiddle與上述變化。

包括代碼在這裏：

// 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(); 
    } 
});