我如何在运行时知道哪些事件侦听器已注册到 ExtJS 中的组件？

Question

我正在尝试调试一个事件被触发两次的问题。我只是好奇，想知道是否有任何方法可以知道在运行时有多少事件侦听器注册到一个组件。

举例来说，我有一个按钮，在浏览器的控制台中使用一些代码，我能够看到附加到该按钮的所有事件侦听器。有什么想法吗？

Answer 1

我认为你不能那样做，但你可以使用 hasListener(eventName) 方法询问是否有一个具体事件的侦听器：http://docs.extjs.com/extjs/4.2.1/#!/api/Ext.util.Observable-method-hasListener

Answer 2

您可以在开发工具的 DOM 资源管理器（至少在 Firefox 中）中看到所有附加到您的 DOM 的事件侦听器。

单击 ev 按钮。

Answer 3

我找到了一种方法，可能不优雅但对我有用。唯一的要求是至少有一部分选择器查询，如果你给一个 itemId 就可以很好地工作。

只需执行以下函数，传递一个 itemId 作为选择器。

>> function showListeners(selector) {
     var regexp = new RegExp('(^|\s)'+selector+'(?=\s|$)'), 
     bus = Ext.app.EventDomain.instances.component.bus;

     for(var i in bus) {   
       var selectors = Object.keys(bus[i]);
       for(var j in selectors) {
         if(regexp.test(selectors[j])) {
           console.log("selector: '" + selectors[j] + 
                       "'\n on -> " + i + " : " + Object.keys(bus[i][selectors[j]])[0]);
         }
       }
     }
   }

>> showListeners('#wizardWindow')

那将 return 像这样的东西（只是一个例子）：

> selector: '#mainContainer #wizardWindow'
  on -> beforerender : home.WizardController
> selector: '#mainContainer #wizardWindow'
  on -> afterrender : home.WizardController

它基本上会告诉哪个控制器具有为给定组件注册的事件侦听器（如果找到）。

我希望有人觉得这有用。

Answer 4

Sencha Labs has published a chrome extension called App Inspector for Sencha。该工具为您提供了大量关于您的 sencha 应用程序的广泛信息。它还提供了一个事件记录工具，可以捕获任何触发的事件以及触发这些事件的组件。你可以看一下，看看它有多大用处。我发现它在很大程度上有帮助。

我如何在运行时知道哪些事件侦听器已注册到 ExtJS 中的组件？

How do I know at runtime what event listeners are registered to a component in ExtJS?

extjs

extjs4.2