Tab Panel Listener not working

Question

When try to call the function method in tab panel on click, method is calling in listener. Here my code,

var homepnl=Ext.create('Ext.TabPanel', {
    id:'homepnl',
    width:'100%',
    height:'100%',
    tabBarPosition: 'bottom',

    defaults: {
        styleHtmlContent: true
    },
    items: [
        {
            title: 'My Items',
            iconCls: 'star',
            id:'divtab1',
            items: [myitemspnl]
        },
        {
            title: 'Add Items',
            iconCls: 'compose',
            id:'divtab2',
            items: [additemspnl]
        },
        {
            title: 'Friend List',
            iconCls: 'team',
            //id:'friendsid',
            id:'divtab3',
            items:[friendslistpnl],
        },
        {
            title: 'Search',
            iconCls: 'search',
            items: [searchpnl]
        },
        {
            title: 'Settings',
            iconCls: 'settings',
            items: [settingspnl]
        }
    ],
        listeners: {
            tabchange: function (homepnl, tab) {
                alert(homepnl.id);// No alert is coming here
            }
        }
    });

What the problem with my code here? Please help me to solve

Answer 1

I am looking at Sench touch documentation, there is no event tabchange. See documentation.

You can use activeitemchange event.

Use below code in listeners :

listeners: {
    activeitemchange: function (homepnl, value, oldValue) {
        alert(homepnl.id);
    }
}