Ext.tab.Panel.setActiveItem() possible bug?

[vitorgomes]

I am upgrading our app from PRs to Beta 3 version and I found a weird behaviour in the tabpanel component.

When I change tabs tapping a button inside an active card, calling the method setActiveItem() of TabPanel, it works fine and shows the correct card. However, when I try to go back clicking on the Tab button of the card I came from, the card is not shown. No console messages.

I modified the example code from the documentation by adding a button to the home card.

Am I using the method the wrong way or this is a bug?

Ext.application({
    name: 'Sencha',


    launch: function() {
        //The whole app UI lives in this tab panel
        Ext.Viewport.add({
            xtype: 'tabpanel',
            fullscreen: true,
            tabBarPosition: 'bottom',


            items: [
                    {
                        title: 'Home',
                        iconCls: 'home',
                        items: [
                            { html: 'Home Screen' },
                            {
                                xtype: 'button',
                                text: 'GO to tab [1]',
                                listeners: {
                                    tap: function() {
                                        Ext.Viewport.down('tabpanel').setActiveItem(1)
                                    }
                                }
                            }
                        ]
                    },
                    {
                        title: 'Contact',
                        iconCls: 'user',
                        html: 'Contact Screen'
                    }
                ]
        });
    }
});

[rdougan]

Yup, this is a bug. Moving to the bugs forum.

Thanks for the great testcase. We'll take a look at it soon.

[Jamie Avins]

This has been fixed for the next release.

[Krom]

Same problem here. When calling setActiveItem() on a TabPanel, the Panel A switches to the requested Panel B, but it does not reset the "active" state on the TabIcon for A - you cannot click it, until you clicked any TabIcon besides A (being corrupted) and B (being the active one now) first, which then resets the states on the buttons. The corrupted TabIcon shows as inactive, but there is an x-tab-active class on it, that shouldn't be there.
In the end, exactly the same problem as above, so I don't add another example.

Is there any quick workaround for this? It's one of the last problems I'm having right now, but one of the biggest ones.

Thank you & best
krom

[Krom]

Found fix on this bug report.
Included this to my app, and it automagically fixes the TabPanel.

[tthai]

Hi, Krom I'm having same issues and saw the code snippet. Since you said it worked for you, where would I drop this fix in (new here with sencha). I dropped it at top of my app.js file which has the Ext.application but doesn't seem to do the fix.

[Krom]

I put this into a new file "Tabfix.js" in the subdir "myApp":

Ext.define('myApp.Tabfix', {
    override: 'Ext.tab.Panel',
    doTabChange: function(tabBar, newTab) {
        this.setActiveItem(tabBar.indexOf(newTab));
    }
});

And on my main app.js I added this file to my "requires" list:

Ext.application({
    name : 'myApp',
    requires:[
        ...        
        'myApp.Tabfix'
    ],
    ...
});

That's all I did. Hope this helps you.

[YomeKitsuma]

In version 2.0.1-RC i've still have this bug !

Bug with the fix', at start up : using the standard 'override' does not works on my project.

So I prefer change the "prototype" of Ext.tab.Panel :

Ext.tab.Panel.prototype.doTabChange = function(tabBar, newTab) {             

this.setActiveItem(tabBar.indexOf(newTab));

}

Which I use in after my UI is built and my DATA are loaded...