A bookmarklet to log all Ext events to the console.

[Animal]

I just fixed a problem in my app where I found out that there was a problem of on event causing another event which triggered the first event right back, and caused an infinite loop.

I discovered this by logging all fired events to the console, and saw the evidence.

Use the following link to create a bookmarklet to log events to the console (Works in browsers which have a console object, ie Firefox with Firebug)

<a href="javascript:(function(){var a,l,o=(Ext?Ext.util.Observable.prototype:false);if(!o){alert('Ext not in page');return;}if(!(l=console?console.log:false)){alert('Use Firefox with Firebug');return;}o.fireEvent=o.fireEvent.createInterceptor(function(evt){a=arguments;l(this,' fired event ',evt,' with args ',Array.prototype.slice.call(a,1,a.length));});})();">Log all Ext events</a>

Or bookmark this URL: Log all Ext events

[mmusson]

The following function can make the log messages and the Firebug display easier to read by defining toString() functions for classes that don't define their own. This changes the debug output from Object to Element or TextField or whatever.

(function () {

var identifyClasses = function (ns) {
   // A class name must start with a capital letter by convention
   var className = /^[A-Z].*$/;

   for (var n in ns) {
      if (ns.hasOwnProperty && ns.hasOwnProperty(n) && typeof n === 'string' && ns[n]) {
         if (typeof ns[n] === 'object') {
            // Recurse through any objects since they may be namespace objects
            identifyClasses(ns[n]);
         }
         else if (className.test(n) && typeof ns[n] === 'function' && !ns[n].prototype.hasOwnProperty('toString')) {
            // For every class that does not define a toString function, add one that returns the class name
            ns[n].prototype.toString = (function (s) {
               return s;
            }).createCallback(n + ' :');
         }
      }
   }
};

identifyClasses(Ext); // Add toString functions to the Ext library.

})();

This should be called one time at start up from the appropriate place in your code. You can call the function multiple times with different root namespaces (including your own).

[Animal]

Will that render them unclickable?

[mmusson]

No. Firebug is nice enough to use the output from toString for the beginning of the label it shows for objects, but other than that there is no other effect.

[niaz]

Hi Animal the bookmark you posted doesnt seem to be working.

[realjax]

Yes it does. This new forum just can't handle the link. You need to edit the link manually once you bookmarked it.

[AndreKR]

Please note that in Chrome log() needs to be called in the context of console:

logargs=[this,' fired event "'+evt+'" with args ',Array.prototype.slice.call(a,1,a.length)];
l.apply(console,logargs);

Log all Ext events

[AndreKR]

Here's an ExtJS 4 version:
http://pastebin.com/zZQkCddx

[quaidbrown]

What do I do with this code?

javascript:(function(){Ext.AbstractComponent.prototype.fireEvent=Ext.Function.createInterceptor(Ext.AbstractComponent.prototype.fireEvent,%20function(evt){a=arguments;console.log(this,'%20fired%20event%20',evt,'%20with%20args%20',Array.prototype.slice.call(a,1,a.length));});})();

Is that code I need to put in my page?

[quaidbrown]

Ok, I understand this a little better but I don't undersand how it will work with a bookmarklet.

I can capture events on any individual component such as the viewport or my tab panel with this code:

viewport.fireEvent = Ext.Function.createInterceptor(
                viewport.fireEvent,
                function (evt) {
                    a = arguments;
                    console.log(this, 'fired event ', evt, ' with args ', Array.prototype.slice.call(a, 1, a.length));
                    //console.log('log event');
                });

But trying to override Ext.AbstractComponent.prototype.fireEvent doesn't do anything. It seems to be working as far as overriding the function, but I never see the console output. Has anybody gotten this to work? I really need to understand the event model better and I think this will help.