Question

I don’t use tab panel just tab bar, and have to prevent changing tab by some criteria.

In ExtJS docs I found change event for Ext.tab.Bar, but it fires when tab is already changed. So preventDefault() and return false are not working in this case.

Second I tried is set Ext.tab.Tab.handler property when tabs were initialized, but it fires when tab button is already clicked. So preventDefault() and return false don’t work too.

Can ony body help with this? How can I prevent changing tabs using only Ext.tab.Tab and Ext.tab.Bar?

Thx.

Answer 1

I think you can use the ‘beforetabchange’ event on the tab panel itself.

From sencha docs: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tab.Panel-event-beforetabchange .
Return false in any listener to cancel the tabchange.

Edit

Maybe you could then extend the Ext.tab.Bar component and register the beforechange event by modifying the setActiveTab method, I think it’s a pretty easy modification

setActiveTab: function(tab) {
        //test the beforechange return
        if (tab.disabled && me.fireEvent('beforechange', tab) === false) {
            return;
        }
        var me = this;
        if (me.activeTab) {
            me.previousTab = me.activeTab;
            me.activeTab.deactivate();
        }
        tab.activate();

        if (me.rendered) {
            me.layout.layout();
            tab.el && tab.el.scrollIntoView(me.layout.getRenderTarget());
        }
        me.activeTab = tab;
        me.fireEvent('change', me, tab, tab.card);
    }