如何附加对用户单击Ext.TabPanel中的选项卡的反应 [英] How can I attach an react to user clicking on tabs in Ext.TabPanel

问题描述

当我想对用户选择网格上的一行做出反应时，我使用这个：

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

如何将相同的功能附加到标签页？

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

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

推荐答案

你很近。

您的标签板中的各个面板在激活时会触发激活事件。

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

您可以在配置时通过监听器配置密钥将处理程序附加到TabPanel中的每个项目。

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

这篇关于如何附加对用户单击Ext.TabPanel中的选项卡的反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！