How do I update a tabPanel item title in extjs (sencha touch)

How od I u开发者_开发百科pdate the title property for an item in a tabPanel from another function?

mainpanel is my tabPanel and I am successfully updating the title according to my js debugger. Calling doLayout(); doesn't seem to redraw the tab in the UI though!

var mainpanel = Ext.getCmp('mainpanel');

   var item = mainpanel.items.items[0];

   item.title = 'Me';
   mainpanel.doLayout();

Isn't there a setTitle() method ?

Here is an override function I wrote to set the title of a tab. Include this in your js before the file that uses it. It adds the TabPanel.setTabTitle( tabNo, newTitle ) method.

Example use in a callback within a tab:

this.ownerCt.setTabTitle( 0, 'My Title');

Override code:

/**
 * Overrides the Ext.TabPanel to add .setTabTitle() function
 */
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;
        }
     }
 });

You can use this for updating the title from another function

Panel.title1Button.setText(finToolbarTitle);

or

If you mentioned toolbar in docked items

Panel.dockedItems.items[1].setTitle(toolbarTitle);

In extjs 4.0, 4.1 or 4.1.1 you can change title if you have the tab element variable:

//var tabEl = this.getActiveTab();
Ext.getDom(tabEl).tab.btnEl.dom.innerText = 'My New Title';

You also can define new method in the tab panel as following:

setTabTitle: function(tabEl, title) {
    Ext.getDom(tabEl).tab.btnEl.dom.innerText = title;    
}

let tabTitle = Ext.ComponentQuery.query('#tabs');// tabs is the itemId for tab panel created tabTitle.getAt(index_no_for_tab).tab.setTitle('My new title');