Wie kann ich anhängen ein an Benutzer durch Klick auf Registerkarten in Ext.TabPanel

Question

reagieren, wenn ich an den Benutzer reagieren wollen auf einem Raster eine Zeile auswählen, verwende ich diese:

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

wie kann ich das anhängen gleiche Funktionalität für Tabs? etwas wie folgt aus:

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

Nachtrag

Dank @timdev, das funktioniert, und hier ist, wie ich feststellen, welche Register es ist (einfach über id, konnte ich nicht den Index der Registerkarte erhalten, wie ich konnte der Index der Reihe im Raster):

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

Sie sind nah.

Die einzelnen Felder in Ihrem Tabpanel feuern bei Aktivierung ein activate Ereignis ab.

Sie fügen zum Konfigurationszeitpunkt über den Konfigurationsschlüssel einen Handler an jedes Element im TabPanel an.

Oder Sie könnten alle über die Laschen befestigen Sie Ihren Hörer iterieren, wie Sie gehen, so etwas wie:

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

Answer 2

Sie auch ‚beforetabchange‘ Ereignis des TabPanel verwenden können:

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