PDA

View Full Version : Tap panel jump



kramprabhu
21 Jan 2013, 3:35 AM
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

digeridoo
21 Jan 2013, 6:21 AM
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
21 Jan 2013, 7:06 AM
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

digeridoo
21 Jan 2013, 9:25 AM
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
21 Jan 2013, 9:59 PM
Can you paste you full code of your tab-panel and controller. Let me try to execute yours.

kramprabhu
22 Jan 2013, 2:25 AM
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
22 Jan 2013, 2:37 AM
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);
}
}
}
});

digeridoo
23 Jan 2013, 2:04 AM
Looking at my code again I realise my way is not 'best practice'. Correct me if I'm wrong but I think in the controller there should be a ref to the tabpanel in there too. Perhaps there is a better way of calling it (although it works for me)?