如何分析（调试）ExtJS EventPipe / 事件

Question

我正在开发一个相对较大的 ExtJS MVC 应用程序，其中包含大约 >40 个控制器、>100 个商店、>100 个模型等等。我没有严格遵循可能的 MVC 方式，所以我实现了一个惰性控制器初始化，它在需要时首先初始化控制器，然后再进行存储。我也没有在任何控制器中注册任何视图，但这仅仅是因为我不需要。

现在表单（在 Ext.window.Window 中打开）大约需要 1-2 秒才能显示出来，而一个相当小的项目中的相同表单会立即弹出。 所以形式（布局）不可能是让我参加这些活动的问题。但我真的不知道最好的方法是什么，或者已经有一个很好的教程如何做到这一点。我想最好对此进行分析，看看整个管道需要多长时间（不仅是 EventPipe 本身）。

事件结构：

大多数事件都是通过负责控制器的control() 注册的。所有其他事件最多注册到{ single: true }。重复使用时，窗口会关闭并重新实例化。

Answer 1

恐怕 ExtJS 不提供任何事件分析。它使用自定义事件系统。

这是我如何看待这个问题的解决方案。

Ext.util.Event 类提供调度和处理框架中使用的任何事件的功能，Ext.app.EventBus 提供单点来调度所有框架事件（fireEvent 只是 Ext.app.EventBus.dispatch 方法的包装器） .

类是私有的，所以我建议查看它的源代码。

您可以重写这些类，以查看调用 Ext.app.EventBus.dispatch 方法和调用 Ext.util.Event.fire 方法中的事件侦听器需要多少时间（EventProfiler 是应该是你自己的班级）

Ext.app.EventBus

dispatch: function (/* event name or Ext.util.Event */event, /* Target class */ target, args) {
    //start timing
    var start = new Date();

    /* ... */

    for (i = 0, ln = events.length; i < ln; i++) {
        event = events[i];
        // Fire the event!
        if (event.fire.apply(event, Array.prototype.slice.call(args, 1)) === false) {
            return false;
        }
        // start event profiling
        // here we are sure that event is dispatched and it's instance of Ext.util.Event
        EventProfiler.startProfile(event, /* time passed from dispath method started */new Date() - start);
    }

    /* rest of dispatch method call */
}

Ext.util.Event

fire: function () {
    /* ... */
    if (listener.o) {
        args.push(listener.o);
    }

    EventProfiler.endProfile(this);

    if (listener && listener.fireFn.apply(listener.scope || me.observable, args) === false) {
        return (me.firing = false);
    }

    /* ... */       

}