Cómo perfilar (depurar) ExtJS EventPipe/Events

Question

Estoy trabajando en una aplicación ExtJS MVC relativamente grande con alrededor de> 40 controladores,> 100 tiendas,> 100 modelos, etc. No sigo el camino estrictamente posible de MVC, así que implementé una inicialización de controlador diferida que inicializa el controlador primero cuando es necesario y así las tiendas. Tampoco registro ninguna vista dentro de ningún controlador, pero eso simplemente causa que no sea necesario.

Ahora bien, los formularios (abiertos dentro de una ventana Ext.window) tardan entre 1 y 2 segundos hasta que aparezcan, mientras que el mismo formulario dentro de un proyecto más bien pequeño aparece inmediatamente. Así que la forma (diseño) no puede ser el problema aquí lo que me trajo a los eventos. Pero realmente no sé cómo sería la mejor manera o si ya hay un buen tutorial sobre cómo hacer esto. Supongo que sería bueno hacer un perfil de esto, para ver cuánto tarda todo el tubo (no solo el EventPipe en sí).

estructura Evento:

La mayoría de los eventos se registren a través de control() del controlador responsable. Todos los demás eventos están como máximo registrados con { single: true }. Las ventanas se cierran y se vuelven a instalar cuando se reutilizan.

Answer 1

Me temo que ExtJS no proporciona ningún perfil de evento. Utiliza un sistema de eventos personalizado.

Así es como veo la solución a este problema.

Hay Ext.util.Event clase que proporciona funcionalidad para el envío y el manejo de cualquier evento utilizado en el marco y Ext.app.EventBus que proporcionan un único punto de enviar todos los eventos de marco (fireEvent se acaba de envoltura para método Ext.app.EventBus.dispatch).

Las clases son privadas, por lo que recomiendo ver su código fuente.

Puede anular estas clases para ver cuánto se tarda desde la llamada al método Ext.app.EventBus.dispatch y llamando detector de eventos dentro método Ext.util.Event.fire Smth así (EventProfiler se supone que es su propia clase)

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

    /* ... */  

}