Extjs 如何对用户单击Ext.TabPanel中的选项卡进行响应

当我想对用户选择网格上的行作出反应时，我使用以下方法：

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

如何将相同的功能附加到选项卡？类似这样的内容：

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

补遗 感谢@timdev，这是有效的，下面是我如何确定它是哪个选项卡的方法（简单地通过

id

，我无法获得选项卡的索引，因为我可以在网格中获得行的索引）：

你很接近

选项卡Panel中的各个面板在激活时会触发一个

activate

事件

您可以在配置时通过

侦听器

配置键将处理程序附加到选项卡面板中的每个项目

或者，您可以在运行过程中迭代连接侦听器的所有选项卡，例如：

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

---

您还可以使用TabPanel的“beforetabchange”事件：

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

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