javascript - ExtJS 对用户点击 tabpanel 中的选项卡使用react

Question

(是的，我知道这与 How can I attach an react to user clicking on tabs in Ext.TabPanel 类似，但这是一个不同的问题)

我有一个选项卡面板，可以通过单击选项卡或单击其他选项卡中的链接来访问其面板。选项卡面板中的一个选项卡具有一个菜单，供用户选择所需的子面板。我想要实现的是，单击选项卡不会激活它 - 从而迫使用户从菜单中选择一个选项。但是，我仍然希望在单击另一个面板上的链接或选择菜单选项时激活该面板。

这就是我禁用面板的方法:

'beforeactivate': function (component, eOpts) {
    //to prevent loading tab content on tab/menu click
    console.debug('tab disabler', arguments);
    return false;
}

它有效 - 只是效果太好了，阻止了一切。我无法找到一种方法来检测单击选项卡和执行其他任何操作之间的区别。

Answer 1

基本上您已经描述了问题:您希望仅在单击选项卡标题时阻止激活选项卡，而不是完全激活，因此 beforeactivate 事件不是正确的方法。

您可以访问tab header (基本上只是选项卡栏中的一个按钮)通过面板上的 tab 属性，并通过停止 click 的传播来阻止其处理程序的执行。事件:

panel.tab.on({
    'click': function(tab, e) {
        e.stopEvent();
    }
});

注意:文档说您也可以返回 false 来实现相同的目的，但这似乎不起作用。

这根本不会影响面板的激活，但会影响选项卡标题上的交互。

查看this fiddle一个工作示例。