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

21 May 2013, 7:10 AM

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.


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:


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

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();

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