View Full Version : Update the title of Ext.tab.Panel dynamically

13 Jul 2012, 4:25 AM
Hi all!

I'm using a Ext.tab.Panel. The title is defined by default. In the tab I placed a grid. When I click on a button the data store behind the grid is updated - and the grid, too. This works fine.

But now I look for a way to update the title of Ext.tab.Panel with the parameter I sent to the store. In the console I can see the wanted string, but I don't know how to update the title.

I hope someone can help.

13 Jul 2012, 10:36 AM
Are you wanting to change the title of a child tab within the Tab panel? If so, this will work:

someTabComponent.tab.setText("Desired Tab Title");

13 Jul 2012, 11:28 PM

here is a working sample:-

Ext.onReady(function () {
Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
items: [
title: 'Tab 1',
bodyPadding: 10,
items: {
xtype: 'button',
text: 'click to change title'
, handler: function (btn) {
btn.ownerCt.tab.setText('Title Changed')
title: 'Tab 2',
html: 'Another one'
renderTo: Ext.getBody()


16 Jul 2012, 3:31 AM

Thanks fpr your assistance. But the solution does not really fit to my problem.

The button is outside the tab panel (in the navigation in the west panel).

The tab panel in which the grid is placed is in the center panel.

Meanwhile I'm not sure if it is possible what I try to make.

16 Jul 2012, 6:18 AM
Hi sword-it,

your answer gave me a good hint. With that I was able to solve it.