PDA

View Full Version : How do you change a TabPanel title?



23 Oct 2007, 12:06 PM
Hi!

I am very new to ExtJs. I have a question regarding how to change a TabPanel title. In my case, I have a web page that displays a tab panel that contains two tabs. The following code created the TabPanel:

Ext.onReady(function(){
// Create tab panel
searchTabs = new Ext.TabPanel({
applyTo: 'tabpanel',
activeTab: 0,
deferredRender: false,
autoTabs: true,
resizeTabs:true,
minTabWidth: 115,
tabWidth: 135,
enableTabScroll:true,
width: panelWidth,
height: (panelHeight - 25),
defaults: {autoScroll:true},
plugins: new Ext.ux.TabCloseMenu()
});
});

Tha tabs are actually created using the TabPanel auto tab feature. The initial creation of the tab panel works great. A TabPanel with two tabs is generated. What I would like to be able to do is change the title of a tab after the tab panel has been created (but not immediately after the TabPanel is created). For instance, I want to change the tab title for the first tab in my TabPanel. I have tried the following code:

var tab = forensicSearchTabs.items.itemAt(0);
tab.title = "Test Tab 1";

The code executes without error but the tab title for the first tab remains unchanged from its original setting when the tab was auto generated.

What I am doing wrong. Any help would be greatly appreciated!

Thanks in advance.

- Chip

tryanDLS
23 Oct 2007, 12:12 PM
Please read the doc - you set the title of TabPanelItem, not TabPanel http://extjs.com/deploy/ext/docs/output/Ext.TabPanelItem.html#setText

Also, you can use getTab(index), rather than trying to access the items collection directly.

24 Oct 2007, 9:30 AM
My bad! I forgot to mention that I am using ExtJS 2.0. Also, I posted to the 1.1 forum rather than the 2.0 forum. However, based on your help, I was able to figure out how to do what I need using ExtJS 2.0. Actually, the 1.1 to 2.0 migration guide was also very helpful in figuring out how to do what I wanted to do.

Thanks!

- Chip