Comment puis-je joindre un à réagir utilisateur en cliquant sur les onglets dans Ext.TabPanel

Question

Quand je veux réagir à l'utilisateur sélectionner une ligne sur une grille, j'utilise ceci:

var grid = new Ext.grid.GridPanel({ 
    region: 'center', 
    ... 
}); 
grid.getSelectionModel().on('rowselect', function(sm, index, rec){ 
    changeMenuItemInfoArea(menuItemApplication, 'you are on row with index ' + index) 
}); 

comment puis-je joindre la même fonctionnalité pour les onglets? quelque chose comme ceci:

var modules_info_panel = new Ext.TabPanel({ 
    activeTab: 0, 
    region: 'center', 
    defaults:{autoScroll:true}, 
    listeners: { 
     'tabclick': function(tabpanel, index) { 
      changeMenuItemInfoArea(menuItemModules,'you clicked the tab with index ' + index); 
     } 
    }, 
    items:[{ 
      title: 'Section 1', 
      html: 'test' 
     },{ 
      title: 'Section 2', 
      html: 'test' 
     },{ 
      title: 'Section 3', 
      html: 'test' 
     }] 
}); 
modules_info_panel.getSelectionModel().on('tabselect', function(sm, index, rec){ 
    changeMenuItemInfoArea(menuItemModules, 'you are on tab with index ' + index) 
}); 

Addendum

Merci @timdev, qui fonctionne, et voici comment j'identifier quel onglet il est (simplement via id, je ne pouvais pas obtenir l'index de l'onglet que je pouvais l'index de la ligne dans la grille):

var modules_info_panel = new Ext.TabPanel({ 
    activeTab: 0, 
    region: 'center', 
    defaults:{autoScroll:true}, 
    items:[{ 
      id: 'section1', 
      title: 'Section 1', 
      html: 'test' 
     },{ 
      id: 'section2', 
      title: 'Section 2', 
      html: 'test' 
     },{ 
      id: 'section3', 
      title: 'Section 3', 
      html: 'test' 
     }] 
}); 

modules_info_panel.items.each(function(tab){ 
    tab.on('activate',function(panel){ 
     changeMenuItemInfoArea(menuItemModules, 'you opened the "' + panel.id + '" tab'); 
    }); 
}); 

replaceComponentContent(regionContent, modules_info_panel); 

hideComponent(regionHelp); 

Answer 1

Vous êtes proche.

Les panneaux individuels à l'intérieur de votre tableau de bord déclenchent un événement activate lorsqu'il est activé.

Vous attachez un gestionnaire à chaque élément du TabPanel au moment de la configuration, via la clé de configuration listeners.

Ou vous pouvez itérer sur tous les onglets attacher votre écouteur que vous allez, quelque chose comme:

modules_info_panel.items.each(function(tab){ 
    tab.on('activate',function(panel){ ... }); 
} 

Answer 2

Vous pouvez également utiliser événement « beforetabchange » du TabPanel:

tabs.on('beforetabchange', function(tabPanel, newItem, currentItem) { ... }, this);