View Full Version : Override setTitle method of Tab Panel

9 Jul 2013, 2:33 AM
Hi Guys,

I'm new on Ext JS,

I need help on how I can override setTitle method of Tab Panel so that I can set custom attribute "string" same time too.

I saw a thread on setting customCls "below" but my custom attribute is a string.

Ext.override(Ext.Panel, {
setTitle : function(title, iconCls, customCls) {
this.title = title;
if (this.header && this.headerAsText) {
if (customCls) {
if (this.header) {
} else {
this.headerCfg.cls += ' ' + customCls;
this.fireEvent('titlechange', this, title);
return this;


10 Jul 2013, 2:35 PM
What are you looking to do? You're ultimately wanting to set an attribute of string on the HTML element holding the title?

10 Jul 2013, 10:52 PM
First of all, thanks for replying to my thread.

I have Tab Group and within it I have number of Tabs "Tab1, Tab2,..,Tabn".

On the Tab Group, I have custom value called customValue.

What I what is to set customValue to an id of activeTab "i.e the id of either Tab1, Tab2,..,Tabn "


var cmp = this.cmp;

var tab = cmp.tab;

var tabGroup = tab.ownerCt;

var tabGroupPanel = tabGroup.ownerCt;

var tabGroupPanelID = tabGroupPanel.getId(); // An ID of Tab Group

var tabGroupPanelTitle = tabGroupPanel.title; // The Title of Tab Group
var tabGroupPanelValue = groupingPanel.value; // The initial value assign to customValue

var activeTab = tabGroupPanel.getActiveTab(); // Active Tab inside Tab Group
var activeTabID = activeTab.getId(); // An ID of Active Tab

tabGroupPanel.setValues(tabGroupPanelValue , activeTabID ); // Set the initial value assign to customValue with active Tab ID activeTabID

11 Jul 2013, 12:49 AM
If you want to set the id of the active tab with your custome value

Get the instanse of your acitive tab using getActive method
var current=TabGroupPanel.getActiveTab (http://www.sencha.com/forum/#!/api/Ext.tab.Panel-method-getActiveTab)( )

11 Jul 2013, 1:00 AM
Thanks again for quick reply,

I want an opposite, I.e Set Tab ID value "On the Tab" to my custom value "custom value define on Tab Group Panel ".

I try this and does not work:

var activeTab = TabGroupPanel.getActiveTab();

var activeTabID = activeTab.getId();

TabGroupPanel.value = activeTabID;

11 Jul 2013, 1:46 AM
I get the code working but it does to update the value in the form, I can see that the value is changing in the background. Please help

11 Jul 2013, 8:53 PM
You may need to post your code as you work through this so the community can see what you're doing as you do it - will give them a better frame of reference and can help you troubleshoot.

11 Jul 2013, 10:21 PM
cmp = Ext.getCmp(yourid);

12 Jul 2013, 4:30 AM
Thanks guys, I was looking for something like this.

var activeTab = TabGroupPanel.getActiveTab();

var activeTabID = activeTab.getId();

TabGroupPanel.value = activeTabID;

I can see that the value of TabGroupPanel is assign to activeTabID on the page.