Extjs: override specific listeners - extjs

Question

I have a window component which I'm extending to create different windows. Now, the close() and hide() listener functions are the same across board, but the afterrender() changes with each instance.
So I have something like:
Ext.define('abc.xyz.BaseWindow', {
extend : "Ext.Window",
listeners: {
hide: function(el, eOpts){
console.log('hide');
},
close: function(el, eOpts){
console.log('close');
}
}
});
And:
Ext.define('abc.xyz.MyWindow', {
extend : "abc.xyz.BaseWindow",
listeners: {
afterrender: function(el, eOpts){
console.log('afterrender');
}
}
});
However, the whole listeners object is overridden and hide() and close() are never called. Is there any way around this, except to specify hide() and close() in every extended window?

Answer 1

You can define your functions in the window, call them and override them in the window like this:
Ext.define('abc.xyz.BaseWindow', {
extend : "Ext.Window",
onHide: function(){
console.log('hide');
},
onShow: function(el, eOpts){
console.log('close');
},
onAfterRender: function(el, eOpts){
console.log('first after render');
},
initComponent: function () {
var me = this;
Ext.applyIf(me, {
listeners: {
hide: me.onHide,
show: me.onShow
afterrender: me.onAfterRender
}
});
me.callParent(arguments);
}
});
And:
Ext.define('abc.xyz.MyWindow', {
extend : "abc.xyz.BaseWindow",
onAfterRender: function(el, eOpts){
console.log('second after render');
}
});
Or if you don't have an afterrender in the base class you just add a listener with (on) like Evan Trimboli sais
Ext.define('abc.xyz.MyWindow', {
extend : "abc.xyz.BaseWindow",
initComponent: function () {
var me = this;
me.callParent(arguments);
me.on('afterrender', function(el, eOpts){
console.log('second after render');
});
}
});