如何附加对用户单击 Ext.TabPanel 中的选项卡的反应

Question

当我想对用户在网格上选择一行做出反应时，我使用以下内容：

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，我无法获取选项卡的索引，因为我可以获取网格中行的索引）：

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

你很接近了。

选项卡面板内的各个面板在激活时会触发 activate 事件。

您可以在配置时通过 listeners 配置键将处理程序附加到 TabPanel 中的每个项目。

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

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

Answer 2

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

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