Unclear how to implement afteritemchange listener

[cyberwombat]

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?

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');
            }
        }
    }
});

[mitchellsimoens]

Is it firing? If not, try putting it where you instantiate the view and put the listener there.

[AndreaCammarata]

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?

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');
            }
        }
    }
});

Actually seems that listeners are not accepted on component definition, however, if you add your listeners on component creation, they works great.
Take a look at your edited code:

Ext.Loader.require(['Ext.*']);


Ext.application({
    name: 'App',
    launch: function() {


		Ext.define('App.view.Main', {
		    extend: 'Ext.tab.Panel',
		    alias: 'widget.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: [
					{
						title: 'first',
						iconMask: true,
						iconCls: 'star',
						html: '1'
					},
					{
						title: 'second',
						iconMask: true,
						iconCls: 'star',
						html: '2'
					}
		        ],
		    }
		});
		
		Ext.widget('main',{
			listeners: {
	            activeitemchange: function(a, b, c, d) { 
	                alert('changed');
	            }
	        }
		});
		
    }
});

Hope this helps.

[lylepratt]

I HOPE that this is a bug. Surely we should be able to continue to add listeners in definitions right? Has this bug already been reported?

[mitchellsimoens]

constructor: function(config) {
    this.callParent(arguments);

    this.on('event', this.someFunction, this);
}

[lylepratt]

Thanks for the tip Mitchell. I've already implemented something similar in a new project for now. However, the reason why I consider it a bug is because many people, including my self have thousands of lines of code written which rely on being able to configure listeners in definitions. I understand it may not be implemented yet, but I hope it will be by the general release.

[mitchellsimoens]

I disagree that this is a bug. It's not a good idea to use the listeners property in a definition as when you instantiate that class and use the listeners as a config, the listeners property you used when you defined the class will now be overwritten and not used and that could break your class if you depend on those listeners.

this.on is the proper way to add listeners when defining a class.

[lylepratt]

I think that's a matter of preference, but if that is the official response then the documentation needs to be changed. The documentation lists "listeners" as a configuration option.

[mitchellsimoens]

I think that's a matter of preference, but if that is the official response then the documentation needs to be changed. The documentation lists "listeners" as a configuration option.

It is a configuration option:

Ext.create('Ext.tab.Panel', {
    ...

    listeners : {   //config option
        afteritemchange: function() {}
    }
});

[lylepratt]

Why should that work with Ext.create and NOT Ext.define?