PDA

View Full Version : How to add event to an existing listeners object via xtype?



mx_starter
8 Mar 2013, 2:59 AM
It seems that is outside my knowledge.
So i have a custom component, which extends, a combo box (for example):


Ext.define('sl.COMPONENTS.Combos.Cars', {

extend: 'Ext.form.field.ComboBox',
alias: 'widget.ComboCar',
store: ...,

x_FilterMode: false,
listeners:{
beforerender: function() { this.storeReload() },
select: function(combo, records) {}
},

storeReload: function () {
this.getStore().getProxy().extraParams.x_FilterMode = this.x_FilterMode;
},
....
});

which i can re-use later in several form panels using xtype lazy instantiation:


...
items:[{xtype: 'ComboCar'}]
...

And this works just fine as expected.
OK, now i want to add an additional listener to this combo in the moment of instantiation:


...
items:[{xtype: 'ComboCar', listeners: {
change: function() {...}
}}]
...

And the result is that the beforerender event is not fired, obviously because the 'listeners' config above replaced it.
So, the question is - how to add the 'change' event listener without losing any of the original configs/listeners/methods?

Thanks in advance for your replies...

slemmon
8 Mar 2013, 9:53 AM
Probably the easiest and most flexible way is to add your listeners in initComponent in your combobox definition. That way they don't step on any passed listeners at the time of instantiation - including an additional beforerender or select listeners.



Ext.define('sl.COMPONENTS.Combos.Cars', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.ComboCar',
store: ...,
x_FilterMode: false,
initComponent: function () {
var me = this;

me.on({
beforerender: me.storeReload,
select: function () {}
});
me.callParent(arguments);
},
storeReload: function () {
this.getStore().getProxy().extraParams.x_FilterMode = this.x_FilterMode;
},
....
});

mx_starter
10 Mar 2013, 11:37 PM
Yes, i can confirm that it is working that way, thanks slemmon.
To be honest, the initComponent function is not a thing i can insist i fully understand.
So, using this technique, the listeners of the widget are defined in the moment of the instantiation and after that, the additional passed listeners are added. I tried instantiation of the widget passing a listener for the same event and then both of them are executed - first those defined in initComponent, and after it - those passed via the instance 'listeners:' config.
So - it was a useful thread, i think, thanks again.

slemmon
11 Mar 2013, 6:53 AM
It sounds like you're getting it to me.
This thread answered then? :D

mx_starter
11 Mar 2013, 7:01 AM
:"> Just seen the "Mark best answer" link, sorry for that.