View Full Version : Any sample for clickEvent of tabPanel

16 Jan 2012, 1:55 AM
Hi all,

I wanna change the tabPanel's width by setSize({width: xxx}) when one of the tab is clicked.
how can I catch this event?

right now I have to change the ExtJS source code

when define Ext.tab.Bar

in the function :

onClick: function(e, target)

before :


I add

if( tab.card.width != undefined )

I know this is not a right way to do so, but I really don't know how.
Can someone give me some sample code for this?

16 Jan 2012, 7:05 AM
An Ext.tab.Panel supports event tabchange( Ext.tab.Panel tabPanel, Ext.Component newCard, Ext.Component oldCard, Object eOpts ).

If you're using MVC architecture, register this event in a controller, via the init() method:

init : function() {
'sometabpanel' : {
tabchange: function(tabPanel, newTab, oldTab, eOpts) {
// you can examine some property of newTab, then determine what size to set.
tabPanel.setSize(200, 400);

If not using MVC, you can register the listener in-line, in the tabpanel config:

xtype: 'tabpanel',
listeners: {
tabchange: function(tabPanel, newTab, oldTab, eOpts) {
tabPanel.setSize(200, 400);
items: [{
xtype: 'panel',
title: 'Tab 1'

16 Jan 2012, 6:11 PM
Thank you very much!
I don't need to change Est JS 's source code Now !

16 Jun 2015, 12:45 PM
Unfortunately, this doesn't work for my purposes. I need to fire an event when someone clicks a tab *even if that tab is the one currently selected*, which tabChange doesn't do. What would you suggest as a solution?