Extjs4 选项卡面板的ExtJS 4箭头导航

我正在尝试使用箭头键使tabpanel中的选项卡可导航

由于tabpanel没有关键事件，我想应该创建一个关键映射或 键盘导航，并通过以下方式将其连接到面板： 这是选项卡面板def的一部分，位于另一个面板内：

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

和功能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.
    }
});

日志（tb）输出与预期一样，它包含选项卡面板对象

但在那之后我收到的只是：

uncaughttypeerror:无法从第行
var tbMap=new Ext.util.KeyMap（tb，{

我已经检查了tb的El属性，它也是正确的，它的proto上也有on方法

任何帮助都将不胜感激

编辑：我找到了解决方案。我马上发布。

Agustin.
根据文档，
Ext.util.KeyMap
对象需要一个html元素或Ext.element对象，因此
需要传递tabpanel对象，而不是传递tabpanel对象的元素，因此您可以这样做，并检查其是否工作

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.
     }
});

好的，这就是我如何绕过它的

首先，我用tabbar定义了tabpanel，如下所示：

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

对于每个选项卡项，我都添加了一个属性“index”，因为我没有找到其他方法来获取
当前选项卡的数字位置。以下是一个示例：

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

以及如下所示的绑定函数。正如我所建议的，我给了KeyMap构造函数一个对tab栏的'el'元素的引用（注意它是TabBar的'el'，不是TabPanel的'el'）

我希望有人会觉得它有用。
已经尝试过了。错误消失了，但事件从未被触发。无论如何，我没有注意到KeyMap预期会发生这种情况，所以我会对此进行调查。谢谢。对不起，我没有声誉要感谢你，否则我会这么做。你不需要声誉来提高回答我说我需要15个代表我不知道该怎么做。
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);
}
});