ExtJs5 override losing the listeners - extjs5

Question

I have the following override in myPackage\overrides\window\Window:
Ext.define('myPackage.window.Window', {
override: 'Ext.window.Window',
listeners: {
beforeshow: function (window) {
console.log('before show');
}
}
});
I then use this with this code:
Ext.define('myApp.view.login.Login', {
extend: 'Ext.window.Window',
xtype: 'login',
requires: [
'myApp.view.login.LoginController',
'Ext.form.Panel'
],
controller: 'login',
title: 'Login',
closable: false,
autoShow: true,
resizable: false,
listeners: {
show: function() {
console.log('in show');
}
},
items: {
... snipped for brevity; a couple of textfields and a button
...
}
});
The problem is that while the 'show' event in 'myApp.view.login.Login' works fine, the 'beforeshow' event in the override ('myPackage.window.Window') never fires.
If I then remove the listeners from 'myApp.view.login.Login', then the 'beforeshow' event in 'myPackage.window.Window' will then fire (I can see all this with the console.log output).
What I don't understand is, why? I am probably missing something fairly simple.
Any help with this is greatly appreciated. Thanks!

Answer 1

you should add the listener after you window is initialized.
I haven't tested it yet. but I am sure it should solve your issue.
eg:
Ext.define('myApp.view.login.Login', {
extend: 'Ext.window.Window',
xtype: 'login',
requires: [
'Ext.form.Panel'
],
title: 'Login',
width: 300,
height: 300,
closable: true,
autoShow: true,
resizable: false,
initComponent: function () {
var me = this;
Ext.apply(me, {
listeners: {
show: function () {
console.log('in show');
}
},
items: [
{
xtype: 'textfield',
width: 300
}
]
});
me.callParent(arguments);
}
});