ExtJS 4 Flèche de navigation pour le panneau à onglets

Question

J'essaie de rendre les onglets dans le panneau de navigation navigables en utilisant les touches fléchées.

Comme tabpanel n'a pas d'événements clés, je suppose était de créer un KeyMap ou un KeyNav et le fixer au panneau de cette façon: Cela fait partie de la définition tabpanel, il est dans un autre panneau:

activeTab : 0, 
xtype : 'tabpanel', 
id : 'tabPanel', 
alias : 'widget.mainpanels',  
listeners: { 
    afterrender: function(tb) { 
     this.bindDetailsPanelKeys(tb); 
    }, 
    scope: this 
}, [...] 

et la fonction bindDetailsPanelKeys:

bindDetailsPanelKeys: function(tb) { 
    console.log(tb); //Checking tb is the correct object. 
    var tbMap = new Ext.util.KeyMap(tb, {   
    key: Ext.EventObject.RIGHT, 
    fn: function(e) { 
     console.log(e); 
    // Code to calculate next tab and switch it. 
    } 
}); 

sortie console.log (tb) est comme prévu, il contient l'objet du panneau onglet.

Mais tout ce que je reçois après est: Uncaught TypeError: Cannot call method 'on' of null de la ligne var tbMap = new Ext.util.KeyMap(tb, {

J'ai vérifié la propriété El tb et de c'est aussi correct et il a la méthode sur sur son proto ainsi.

Toute aide sera très appréciée.

EDIT: J'ai trouvé la solution. Je l'afficherai dans un instant.

Agustin.

Answer 1

Ok, voilà comment je réussi à contourner cela.

En premier lieu, je définis le tabpanel avec son et TabBar comme suit:

[...] 
activeTab : 0, 
xtype : 'tabpanel', 
id : 'tabPanel', 
alias : 'widget.mainpanels', 
tabBar: { 
    id: 'tabPanelTabBar', 
    listeners: { 
     afterrender: function(tb, eOpts) { 
     this.bindDetailsPanelKeys(tb); 
    }, 
    scope: this 
}},[...] 

Pour chaque onglet, j'ai ajouté « index » un attribut comme I'didn't trouver un autre moyen d'obtenir le courant position numérique de tabulation. Voici un exemple:

{ 
    xtype : 'categoryEdit', 
    title : 'Detalles Categoría',         
    index: 1 
} 

Et la fonction de liaison comme suit. Comme Saket Patel suggéré que je donne au constructeur KeyMap une référence à l'élément 'el' de la barre d'onglet (notez que c'est 'el' de TabBar, pas ' TabPanel' el ').

bindDetailsPanelKeys: function(tabBar) { 
    var tbRightMap = new Ext.util.KeyMap(tabBar.getEl(), { //RIGHT ARROW 
     key: Ext.EventObject.RIGHT, 
     fn: function(e) { 
      var totalItems = tabBar.items.length, //total tabs 
      activeTabIndex = tabBar.tabPanel.getActiveTab().index, //current tab index 
      nextTabIndex = (activeTabIndex % totalItems) + Math.ceil(activeTabIndex/totalItems) - 1; //Calculate next index  
      tabBar.tabPanel.setActiveTab(nextTabIndex); 
     } 
}); 

var tbLeftMap = new Ext.util.KeyMap(tabBar.getEl(), { //LEFT ARROW   
    key: Ext.EventObject.LEFT, 
    fn: function(e) { 
     var totalItems = tabBar.items.length, 
     activeTabIndex = tabBar.tabPanel.getActiveTab().index; 
     prevTabIndex = (activeTabIndex == 1) ? 3 : activeTabIndex - 2; 
     tabBar.tabPanel.setActiveTab(prevTabIndex); 
} 
}); 

J'espère que quelqu'un le trouvera utile.

Answer 2

selon la documentation de l'objet Ext.util.KeyMap attend un élément HTML ou objet Ext.Element, si instead of passing tabpanel object you need to pass element of the tabpanel, de sorte que vous pouvez faire quelque chose comme ça et vérifier si son fonctionnement ou non

var tbMap = new Ext.util.KeyMap(tb.getEl(), {   
    key: Ext.EventObject.RIGHT, 
    fn: function(e) { 
      console.log(e); 
      // Code to calculate next tab and switch it. 
    } 
});