ExtJS add custom event to body

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开发者_StackOverflow中文版.

Thank you.

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');

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.

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.