Update ExtJs TabPanel Tab Title

Isn’t ExtJs the cat’s meow? I think so, but many cats have hairballs. For ExtJs, this includes missing the ability to update the title of a TabPanel tab title once it has been rendered. Sure, you can find the item and title properties for your tab post-render, but that won’t update your page. You need to crawl the DOM. I’ve created an update to do just this.

Just paste the below override in your code and you can then call the setTabTitle(tabNo,newTitle) method to update a given tab title. You’ll need to know the index of your tab in the tab panel.

For example:

this.ownerCt.setTabTitle(0,'New Title!')

The override code:

/**
 * Overrides the Ext.TabPanel to add .setTabTitle() function
 * @author Lust
 *
 */
Ext.override(Ext.TabPanel, {
 /**
 * Set the title of a specific tab
 */
 setTabTitle: function( tabNo, newTitle ) {
     // make sure we have a number and tab exists
     if( tabNo>=0 && !Ext.isEmpty( this.getTabEl(tabNo))) {
        var tabEl = this.getTabEl(tabNo); // walk down dom, update title span
         Ext.getDom(tabEl).down('.x-tab-strip-text').innerHTML = newTitle;
     }
   }
 });

Note: Those using ExtJs 3.3.1+, see Anup’s comment on some tweaks.