View Full Version : How can I access the actual tab element of a tabpanel? Specifically, the label.

11 Jun 2014, 6:47 AM
Alright I've just recently been introduced to ExtJS and I've got a question.

I have a tabpanel with 6 tabs, and I need to access the ref to the 3rd tab to style the label so that I can see the visual change while I am in a different tab.
The label is auto-generated, so I can't just do a search by itemId,
The label doesn't have a name
The order of the tabs is subject to change
The text in the tab is also not unique, and could change
What stumps me about this is that when the tabpanel is created, it is done so like this:

xtype: 'form',
name: ....,
itemId: ....,
items: [{
xtype: tabpanel,
name: ....,
itemId: tabPanel,
items: [{
xtype: container,
title: Info,
itemId: tab1

So the actual label that say "Info" is the one I need to style. It seems like the label is auto-created from the container's title field, because there is no other reference to the text "Info" in my code. I can do an itemId search and find tab1, but this will end up styling the entire container, not the tab label.

As far as I can tell from reading the API, I don't see a way to access the tabbar, or any specific tab from finding #tab1.

Additionally, the order of the tabs is subject to change, so I don't think indexing will really work either even if I do have the tabbar.

I guess what it boils down to then is Is there is a way to add a unique itemId to the specific tab itself during config phase? And even if so, how can I access the tab's label from the tab reference?

11 Jun 2014, 9:02 AM
Yes, you can add an itemId to the tab using the tabConfig property. Take a look at the documentation for http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.tab.Panel under the Controlling Tabs section.

You can change the tab title by using the setText method.