I've been exploring the concept of custom events and trying to wrap my head around it. My goal is to have certain entities act as listeners and be able to trigger an event without needing to know who is listening.
In the main controller, I have an afterrender handler. I've confirmed that this handler is being called and a tab control is set up to listen for the userTimeOut event:
// Register components
registerComponent: function (component) {
console.log('Registering ID: ' + component['id']);
if (component['id'].indexOf('tab-') > -1) {
console.log("Tab getting user timeout event handler: " + component['id']);
component.on('userTimeOut', this.onUserTimeOut);
}
return true;
},
This is the onUserTimeOut handler:
onUserTimeOut: function (caller) {
console.log('User timeout triggered\tID: ' + this['id'] + '\tCaller ID: ' + caller['id']);
}
In the main controller, there's code that is executed on a button click. I've verified that this code also gets executed:
fireUserTimeOut: function(button) {
console.log('Firing User Time Out\tButton ID: ' + button['id']);
Ext.GlobalEvents.fireEvent('userTimeOut', button);
},
Despite trying various approaches found online instead of using Ext.GlobalEvents, I haven't had much success. Ultimately, my aim is for any entity - whether it's a component, data store, application, or view - to be able to listen for and respond to these custom events.
I've managed to make it work with standard events like click or focus, but custom events are proving more challenging.
If anyone can offer guidance or assistance, it would be greatly appreciated!