PDA

View Full Version : Ext.Form.TabPanel - Change tab text style



shaunhendrix
11 Nov 2010, 7:22 AM
Hi,

I'm trying to figure out a sensible way of dynamically changing the text on a tab. He'res a code snippet:

Ext.TabPanel({
id: 'mytabpanel',
region: 'center',
deferredRender: true,
activeTab: 0,
items: [{
id: "tab1",
contentEl: 'center1',
id: 'tabSummary',
title: 'Summary'

etc....});


As you can see, the title of the tab is 'summary'. Now if I want to add a class to the tab (to say, change the color), I'm having to do this:

var el = Ext.getCmp('mytabpanel').getTabEl(0); // get the tab
Ext.get(el.children(1).children(0).children(0).children(0)).addClass('myClassRed'); // add the class


I'm just going through the DOM to find the <span> which contains the title of the tab. This is a pretty poor and dangerous way of doing it, but so far I can't find a better way.

Any suggestions would be appreciated.

Thanks,

Shaun

JanVenekamp
11 Nov 2010, 10:41 AM
When enabling/disabling a tab the same thing you want to to is done. So to see how Ext does it look in the Source of TabPanel:
http://dev.sencha.com/deploy/dev/docs/source/TabPanel.html#cls-Ext.TabPanel

And search for the private function onItemDisabled.

shaunhendrix
15 Nov 2010, 9:26 AM
Thanks alot. That helped me sort the problem.