PDA

View Full Version : Unclear how to implement afteritemchange listener



cyberwombat
8 Nov 2011, 10:46 AM
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
8 Nov 2011, 1:51 PM
Is it firing? If not, try putting it where you instantiate the view and put the listener there.

AndreaCammarata
9 Nov 2011, 7:01 AM
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
12 Nov 2011, 4:26 PM
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
12 Nov 2011, 7:05 PM
constructor: function(config) {
this.callParent(arguments);

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

lylepratt
12 Nov 2011, 7:30 PM
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
13 Nov 2011, 6:19 AM
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
13 Nov 2011, 8:47 AM
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
13 Nov 2011, 8:57 AM
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
13 Nov 2011, 11:50 AM
Why should that work with Ext.create and NOT Ext.define?