ExtJS 4標籤面板的箭頭導航

我正在嘗試使用箭頭鍵將tabpanel中的選項卡導航。ExtJS 4標籤面板的箭頭導航

作爲一個tabpanel沒有重要事件，我的猜測是創建一個鍵盤映射或一個KeyNav並將其連接到面板是這樣的：這是一個tabpanel高清的一部分，它的另一個盤內：

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, {

我檢查結核病的厄爾尼諾財產，它也是正確的，它具有對方法上它的原型爲好。

任何幫助將不勝感激。

編輯：我找到了解決方案。我會在一會兒發佈。

奧古斯丁。

來源

2012-03-25 Agus

好了，這是怎麼了我設法解決它。

在第一個地方我與它的TabBar定義的一個tabpanel和如下：

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

對於我添加的屬性「指數」作爲I'didn't找到另一種方式來獲得當前每個選項卡項目標籤數字位置。這裏有一個例子：

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

而且綁定函數如下。正如Saket Patel建議我給KeyMap構造函數引用標籤欄的'el'元素（注意它是TabBar的'el'，而不是 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); 
} 
});

我希望有人認爲它有用。

來源

2012-03-25 22:56:36 Agus

根據文檔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. 
    } 
});

來源

2012-03-25 15:09:03

已經嘗試過。錯誤消失，但事件永遠不會被解僱。無論如何，我沒有注意到KeyMap期望的事實，所以我會對此進行調查。謝謝。 – Agus 2012-03-25 15:16:07

對不起，我沒有名譽感謝你，否則我會這樣做。 – Agus 2012-03-25 22:59:12

你不需要聲望來增加答案 – dbrin 2012-03-26 03:39:11

ExtJS 4標籤面板的箭頭導航

回答

相關問題