PDA

View Full Version : Sth like TabPanel.setActiveTab for TabPanel in Sencha Touch?



n5680
20 Jun 2010, 6:53 AM
Hi all,

My first Sencha Touch 'app' has a TabPanel and I want to switch to another tab as soon as the user clicks a button in the first tab.

In ExtJS, the TabPanel has a method called 'setActiveTab' but I cannot find something similar in the Sencha Touch version.

Is this simply not yet possible or am I missing something?

mrsunshine
20 Jun 2010, 8:15 AM
there is no setActiveTab but you can use


yourTabPanel.tabBar.onTabTap(PanelToActivate);

works for. see TabPanel Source (http://www.sencha.com/deploy/touch/docs/source/TabPanel.html#cls-Ext.TabPanel) code for details.

n5680
20 Jun 2010, 8:46 AM
Thanks for the answer!

Actually I've been at that point and tried the onTabTap method but it did not have any effect in my case:
tabpanel.getComponent(2).update("<iframe src='http://www.google.com'/>");
tabpanel.tabBar.onTabTap(tabpanel.getComponent(2));

I'm calling this on the first tab and the update works - the iframe is drawn in the 3rd tab, but I'm still viewing the first tab. Don't really know why because in debug mode, the JS object in the onTabTap method looks the same as if I'm tapping the panel button manually :-(

mrsunshine
20 Jun 2010, 8:52 AM
should work,

post some more off your code that's make it easier to help

n5680
20 Jun 2010, 9:10 AM
Ah, new finding: The tab-switch always switches back to tab 0.
I did the following for testing: I took the tab2 example from the sencha touch package (located in /sencha-touch-beta-0.90/examples/tabs2/index.js) and added an activate-listener to the *last* tab:


{
title: 'User',
html: '<h1>User Card</h1>',
cls: 'card5',
iconCls: 'user',
listeners: {
activate: function(cmp) {
alert("activating comp 2");
tabpanel.tabBar.onTabTap(tabpanel.getComponent(2));
}
}


Now when I click on the user-icon I get the alert and immediately after that it switches back to the first tab.

n5680
20 Jun 2010, 9:19 AM
Hm, don't know why but my previous reply is not visible anymore :-(

Had a new finding: the tab switch lets the tabpanel jump back to tab #1.
To reproduce: take the tab2 example from the sencha touch package (located in /sencha-touch-beta-0.90/examples/tabs2/index.js).
Add an activate listener to the *last* tab:

{
title: 'User',
html: '<h1>User Card</h1>',
cls: 'card5',
iconCls: 'user',
listeners: {
activate: function(cmp) {
alert("activating comp 2");
tabpanel.tabBar.onTabTap(tabpanel.getComponent(2));
}
}

Now when I tap on the last tab, the alert message pops up and then the tabpanel jumps to the first tab instead of the 3rd.

n5680
20 Jun 2010, 9:33 AM
ok, my previous post ist still not visible but anyway, I got the solution:

tabpanel.tabBar.onTabTap(tabpanel.tabBar.getComponent(2));

There was one 'tabBar' missing.

Thanks!

TommyMaintz
20 Jun 2010, 2:47 PM
Any container with a card layout (like a TabPanel) gets a method called setCard(theCard).

mrsunshine
20 Jun 2010, 2:53 PM
Any container with a card layout (like a TabPanel) gets a method called setCard(theCard).
why didn't i wrote this :-) using it in my own app, may i was to deep into TabPanel source code searching for a function that doing something like the extjs setActiveTab that i forgot the inheritance ;-)