ExtJS add custom event to body

Question

is to possible to attach custom events to the document's body? I wanna implement a simple message bus. I did it many times with jQuery, but not sure how to do it in ExtJS.

Thank you.

Answer 1

You don't need to attach the event to the body or any DOM element, I would rather attach them to a dedicated object.

Like :

MyApp.MessageBus = Ext.extend(Ext.util.Observable, {

  // I don't think it's necessary to declare all events
  events : {
    sayHello : true
  }


});

MsgBus = new MyApp.MessageBus();

And, somewhere in your code :

MsgBus.on('sayHello', function(who) { alert("Hello, " + who); });

And, on another place :

MsgBus.fireEvent('sayHello', 'innerJL');

Answer 2

I agree with Drasill, and there are many examples in the Ext community for creating simple bus implementations based on Observable. See here and here for starters.

Answer 3

Putting it on the document itself is problematic in terms of firing custom events. It can be done -- you would just need to make a class which extended Ext.util.Observable as your representation of the result of Ext.getDoc.

But you can bubble up events by adding to the Observables you already have enableBubble : ['foo', 'bar']. That means you do fireEvent('foo') on any child Observable and it'll bubble up to the top where your listener is.