Question

我正在尝试使用箭头键在tabpanel中导航标签。

由于tabpanel没有关键事件，我的猜测是创建一个KeyMap或一个KeyNav并以这种方式将它附加到面板：这是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.
    }
});

console.log（tb）输出符合预期，它包含选项卡面板对象。

但我之后收到的是：Uncaught TypeError: Cannot call method 'on' of null来自var tbMap = new Ext.util.KeyMap(tb, {

行

我已经检查了tb的El属性，它也是正确的，并且它的原型上也有on方法。

非常感谢任何帮助。

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

奥古斯丁。

Answer 1

根据文档，Ext.util.KeyMap对象需要一个html元素或Ext.Element对象，所以instead of passing tabpanel object you need to pass element of the 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.
     }
});

Answer 2

好的，这就是我设法绕过它的方式。

首先，我使用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
}

并且绑定功能如下。正如Saket Patel建议我给KeyMap构造函数引用tab-bar的'el'元素（注意它是TabBar的'el'，不是 TabPanel的'el'）。 / p>

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

我希望有人觉得它很有用。

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

2 个答案: