ExtJS 4 Стрелка для панели вкладок - PullRequest
Новая
       29

ExtJS 4 Стрелка для панели вкладок

2 голосов
/ 25 марта 2012

Я пытаюсь сделать вкладки в панели вкладок навигации с помощью клавиш со стрелками.

Поскольку у tabpanel нет ключевых событий, я предположил, что нужно создать KeyMap или 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, {

Я проверил свойство El в tb, оно также корректно и имеет значение onметод на его прото.

Любая помощь будет высоко ценится.

РЕДАКТИРОВАТЬ: Я нашел решение.Я опубликую это через мгновение.

Агустин.

Ответы [ 2 ]

1 голос
/ 25 марта 2012

согласно документации, объект 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.
     }
});
0 голосов
/ 26 марта 2012

Хорошо, вот как мне удалось обойти это.

Во-первых, я определил вкладку с ее вкладкой и следующим образом: 

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

Для каждого элемента вкладки я добавил атрибут «индекс», так как я не нашел бы другого способа получить текущая числовая позиция вкладки. Вот пример: 

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

А обязательная функция работает следующим образом. Как предложил Saket Patel , я даю конструктору KeyMap ссылку на элемент 'el' панели вкладок (обратите внимание, что это 'el' TabBar, not 'el' TabPanel) . 

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

Надеюсь, кто-нибудь найдет это полезным.

...