I have a tabpanel and I would like to implement the afteritemchange event listener but not clear where to do so and cannot find examples.

I thought this would work but I am missing something. Also - my goal is to destroy panel as they are changed - It seems the afteritemchange has issues with animation (saw on another forum) - not sure if that is best approach for my goal?

Code:
Ext.define('App.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    config: {
        activeTab: 0,
        fullscreen: true,
        flex: 1,
        layout: {
            animation: {
                type: 'slide',
                duration: 250
            }
        },
        tabBar: {
            layout: {
                pack : 'center',
                align: 'center'
            },
            docked: 'bottom',
            scrollable: {
                direction: 'horizontal',
                indicators: false
            }
        },
        items: [
           ...
        ],
        listeners: {
            activeitemchange: function(a, b, c, d) { 
                alert('f');
            }
        }
    }
});