EXTJS OnClick Tab Event

Question

Is there a way to attach an OnClick event to a tab switch in EXTJS?

I make the grid like this:

var simple = new Ext.FormPanel({
    labelWidth: '100%',
    border:false,
    width: '100%',
            style: 
            {
                height: '291px'
            },
    items: {
        xtype: 'tabpanel',
        activeTab: 0,
        //labelWidth: 75, // label settings here cascade unless overridden
        items:[{
        url:'save-form.php',
        title: 'Tab 1',
  ...

Thanks!

Solution 1

I added in a listener after the tabs were defined like this:

//define all tabs, and after the ] from the tab panel JSON: 
listeners: {
    'tabchange': function(tabPanel, tab) {
        alert("tab changed");
    }
}

This just alerts when the tab changed, which is sufficient for my purposes. I'm not sure though how to find out which tab is the current tab.

Hope this helps someone in the future.

Solution 2

There is a tabchange event that fires when the active tab changes: http://www.sencha.com/learn/Ext_FAQ_TabPanel

Comments

[Mchl]

Ext.TabPanel.getActiveTab() returns component being the active tab.

[HOCA]

The second parameter in your tabchange eventhandler will be a reference to the activated tab.