PDA

View Full Version : Switch between tab.Panel tabs by an external event



MichaelStrasser
21 May 2013, 7:10 AM
Hello,

I am trying to switch between tabs of Ext.tab.Panel by an event that is fired by a button in a sub-element (card).

As I have not found a solution yet, I am thankful for any suggestions.

Regards,
Michael

friend
21 May 2013, 9:00 AM
The first step is to get a reference to the target Tab panel. Is there's only one, do this:



var tabPanel = Ext.ComponentQuery.query('tabpanel')[0];


Otherwise, you can assign an itemId to a child Tab panel and get a reference like so:



var tabPanel = Ext.ComponentQuery.query('tabpanel #childItemId')[0];


Once you have a reference to the target Tab panel, it's easy to programmatically change tabs:



tabPanel.setActiveTab(<desiredTabComponent>);


Lots of good examples in the docs (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.tab.Panel):

MichaelStrasser
21 May 2013, 10:46 AM
thank you very much, you can close the thread !

my actual code is a listener, listens on an image:

{
element: 'element',
delegate: '#imageCSSid',
event: 'tap',
fn: function() {
var tabPanel = Ext.ComponentQuery.query('main')[0];
var tabBar = tabPanel.getTabBar();
tabPanel.getTabBar().setActiveTab(tabBar.getInnerItems()[2]);
}
}

just4info: TabPanel.setActiveTab doesnt work, you have to retrieve the TabBar from the TabPanel, and do setActiveTap on the TabBar.