ExtJS对用户点击tabpanel中的选项卡做出反应

Question

(Yes, I know this is similar to How can I attach an react to user clicking on tabs in Ext.TabPanel , but it is a different question)

I have a tabpanel, the panels of which can be accessed either by clicking on a tab, or by clicking links in other tabs. One tab in the tabpanel has a menu for the user to select the desired subpanel. What I am trying to achieve is that clicking on the tab does not activate it - thus forcing the user to select an option from the menu. However, I still want the panel to activate when a link on another panel is clicked, or when a menu option is selected.

This is how I disable the panel:

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

It works - just works too well, blocking everything. I have not been able to find a way to detect the difference between clicking the tab and, well, doing anything else at all.

Answer 1

Basically you already described the problem: you want to prevent activation of the tab only when the tab header is clicked, not altogether, so the beforeactivate event is not the way to go.

You can access the tab header (which is basically just a button in the tab bar) via the tab property on the panel and prevent the execution of its handler by stopping the propagation of the click event:

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

Note: the docs say you can also return false to achieve the same, however that does not seem to work.

This won't affect activation of the panel at all, but the interaction on the tab header.

Check out this fiddle for a working example.