How to Profile (Debug) ExtJS EventPipe / Events

Question

I am working on a relatively large ExtJS MVC application with around >40 Controllers, >100 Stores, >100 Models and so on. I don't follow the possible MVC way strict so I implemented a lazy controller initialization which initialize the controller first when it is required and so the stores. I also don't register any view within any controller, but that simply cause I don't need to.

Now it comes that forms (opened within a Ext.window.Window) take around 1-2 second until they shown up while the same form within a rather small project pops up immediately. So the form (layout) can not be the problem here what brought me to the events. But I don't really know how would be the best way or is there already a good tutorial how to do this. I guess it would be nice to profile this, to see how long the whole pipe takes (not only the EventPipe itself).

Event structure:

Most of the events get registered via control() of the responsible controller. All other events are at most registered with { single: true }. The windows get closed and reinstantiated when reused.

Answer 1

I'm afraid but ExtJS doesn't provide any event profiling. It use custom event system.

Here is how I see the solution of this issue.

There are Ext.util.Event class that provides functionality to dispatching and handling any event used in the framework and Ext.app.EventBus that provide single point to dispatch all framework events (fireEvent is just wrapper for Ext.app.EventBus.dispatch method).

Classes are private so I recommend to see its source code.

You can override these classes to see how much it takes from calling Ext.app.EventBus.dispatch method and calling event listener within Ext.util.Event.fire method smth like that (EventProfiler is supposed to be your own class)

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

    /* ... */       

}