ExtJS 将自定义事件添加到正文答案

【问题标题】：ExtJS add custom event to bodyExtJS 将自定义事件添加到正文
【发布时间】：2011-01-15 11:40:55
【问题描述】：

是否可以将自定义事件附加到文档的正文？我想实现一个简单的消息总线。我用 jQuery 做了很多次，但不知道如何在 ExtJS 中做。

谢谢。

【问题讨论】：

【解决方案1】：

您不需要将事件附加到正文或任何 DOM 元素，我宁愿将它们附加到专用对象。

喜欢：

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

而且，在您的代码中的某处：

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

还有，在另一个地方：

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

【讨论】：

但在这种情况下，我必须将消息总线注入应用程序的每个组件中。当我通过文档的主体触发自定义事件时，我可以在任何地方轻松地将侦听器附加到它。这都是关于耦合较少的组件。
如果你将消息总线设为单例，那么它的代码量与在 document.body 上触发某些东西的代码量完全相同，但额外的好处是消息总线可以扩展为其他有用的行为.我强烈推荐这种方法，而不是将内容附加到文档中。

【解决方案2】：

我同意 Drasill 的观点，Ext 社区中有很多示例用于创建基于 Observable 的简单总线实现。对于初学者，请参阅 here 和 here。

【讨论】：

【解决方案3】：

将它放在文档本身在触发自定义事件方面是有问题的。可以做到——你只需要创建一个扩展Ext.util.Observable 的类作为Ext.getDoc 结果的表示。

但是你可以通过添加到你已经拥有的 Observables enableBubble : ['foo', 'bar'] 来冒泡事件。这意味着您对任何子 Observable 执行 fireEvent('foo')，它会冒泡到您的侦听器所在的顶部。

【讨论】：