How can I attach an react to user clicking on tabs in Ext.TabPanel

Question

When I want to react to the user selecting a row on a grid, I use this:

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

how can I attach the same functionality to tabs? something like this:

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

Thanks @timdev, that works, and here is how I identify which tab it is (simply via id, I couldn't get the tab's index as I could the row's index in grid):

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

You're close.

The individual panels inside your tabpanel fire an activate event when activated.

You attach a handler to each item in the TabPanel at configuration time, via the listeners configuration key .

Or you could iterate over all the tabs attaching your listener as you go, something like:

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

Answer 2

You can also use 'beforetabchange' event of the TabPanel:

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