Tap panel jump

[kramprabhu]

Hi

I have a Tap Panel with 5 buttons (tabs) on it.

Requirement is.. how to jump to 3rd tab directly. ( A user will be clicking a link from home page where from he has to be taking to 3rd tab of my Tap Panel report.

Regards
-Ram

[digeridoopoo]

You would do something like this in your controller, as long as your tabpanel has the id of 'tabpanel' and your button has the id of 'homebutton'.

Ext.define('MyApp.controller.ButtonController', {
    extend: 'Ext.app.Controller',


    config: {
        refs: {
            HomeButton: '#homebutton'
        },


        control: {
            "HomeButton": {
                tap: 'onButtonTap'
            }
        }
    },


    onButtonTap: function(button, e, options) {
        console.log('Home Button Tapped');
        Ext.getCmp('tabpanel').setActiveItem(2, {type: 'pop', duration: 1000});
    }


});

[kramprabhu]

Ext.define('MyApp.view.mytest1', {
extend: 'Ext.tab.Panel',
alias: 'widget.mytest1',


config: {
id: 'mytest1',
itemId: 'mytest1',
items: [
{
xtype: 'panel',
title: 'A',
html: 'test a',
id: 'id_a'
},
{
xtype: 'panel',
title: 'B',
html: 'test b',
id: 'id_b'
}
]
}


});
Above is my tabpanel

And here is my Controller
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',


config: {
refs: {
HomeButton: '#mybutton'
},


control: {
"HomeButton": {
tap: 'onButtonTap'
}
}
},


onButtonTap: function(target) {
Ext.getCmp('mytest1').setActiveItem(1, {type: 'pop', duration: 1000});
}


});

My Still I get the following error.

"Uncaught TypeError: Cannot call method 'setActiveItem' of undefined "

-Ram

[digeridoopoo]

Weird, because the above code is working perfectly for me...

I think perhaps the problem is you have both itemid and id specified. Try removing the itemid 'mytest1' and just have the id

[kramprabhu]

Can you paste you full code of your tab-panel and controller. Let me try to execute yours.

[kramprabhu]

Currently I am doing like this

Ext.Viewport.setActiveItem('vos_5point_abcde');
Ext.getCmp('vos_5point_abcde').setActiveItem(0);

Which works for me.
But not sure.. that is a right way to do it.
-Ram

[lkloeppel]

Do you want to always activate the 3rd tab when navigating to the tap panel or only the first time?

In both cases you can try to work with a listener:

Ext.define('MyApp.view.Main', {    extend : 'Ext.tab.Panel',
    alias : 'widget.mytest1',
    
    config : {
        fullscreen : true,
        id : 'mytest1',
        itemId : 'mytest1',
        items : [{
                    xtype : 'panel',
                    title : 'A',
                    html : 'test a',
                    id : 'id_a'
                }, {
                    xtype : 'panel',
                    title : 'B',
                    html : 'test b',
                    id : 'id_b'
        }],
        listeners : {
            initialize : function(tabpanel, eOpts) {
                tabpanel.setActiveItem(1);
            }        
        }
    }
});