Activate the 2nd tab of the tab panel

Question

I have a tabpanel, and a button on the 1st tab. When i click on that button, i need to setfocus to the 2nd tab and activate it (as in show content that belongs to that tab). My code is as follows, and i unable to setFocus or activate that tab from the Button click event.

Ext.define('MyApp.view.MyTabPanel', {
    extend: 'Ext.tab.Panel',

    height: 250,
    width: 400,
    activeTab: 0,

    initComponent: function () {
        var me = this;

        Ext.applyIf(me, {
            items: [{
                xtype: 'panel',
                title: 'Tab 1',
                items: [{
                    xtype: 'button',
                    text: 'MyButton',
                    listeners: {
                        click: {
                            fn: me.onButtonClick,
                            scope: me
                        }
                    }
                }]
            }, {
                xtype: 'panel',
                title: 'Tab 2'
            }, {
                xtype: 'panel',
                title: 'Tab 3'
            }]
        });

        me.callParent(arguments);
    },

    onButtonClick: function (button, e, options) {
        // Set Focus, and activate the 2nd tab
    }

});

Solution 1

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Panel-method-setActiveTab

There are also several examples of setting the active tab at the class level documentation.

Solution 2

Find the container of the tab panel. to get the container you can use Ext.getCmp

Ext.getCmp('center-region').setActiveTab('your-tab-name');