1. #1
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default A bookmarklet to log all Ext events to the console.

    A bookmarklet to log all Ext events to the console.


    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)

    Code:
    <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

  2. #2
    Ext User
    Join Date
    Nov 2007
    Location
    Centreville, VA
    Posts
    58
    Vote Rating
    0
    mmusson is on a distinguished road

      0  

    Default


    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.

    Code:
    (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).

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Will that render them unclickable?

  4. #4
    Ext User
    Join Date
    Nov 2007
    Location
    Centreville, VA
    Posts
    58
    Vote Rating
    0
    mmusson is on a distinguished road

      0  

    Default


    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.


  5. #5
    Ext User
    Join Date
    Apr 2008
    Posts
    26
    Vote Rating
    0
    niaz is on a distinguished road

      0  

    Default


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

  6. #6
    Sencha User realjax's Avatar
    Join Date
    Aug 2009
    Location
    Netherlands
    Posts
    412
    Vote Rating
    6
    realjax is on a distinguished road

      0  

    Default


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


  7. #7
    Sencha User
    Join Date
    May 2009
    Posts
    91
    Vote Rating
    0
    AndreKR is on a distinguished road

      0  

    Default


    Please note that in Chrome log() needs to be called in the context of console:
    Code:
    logargs=[this,' fired event "'+evt+'" with args ',Array.prototype.slice.call(a,1,a.length)];
    l.apply(console,logargs);
    Log all Ext events
    Last edited by AndreKR; 27 Mar 2011 at 9:35 AM. Reason: Preview doesn't work

  8. #8
    Sencha User
    Join Date
    May 2009
    Posts
    91
    Vote Rating
    0
    AndreKR is on a distinguished road

      0  

    Default


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

  9. #9
    Sencha User
    Join Date
    Nov 2011
    Posts
    22
    Vote Rating
    0
    quaidbrown is on a distinguished road

      0  

    Default


    What do I do with this code?

    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?

  10. #10
    Sencha User
    Join Date
    Nov 2011
    Posts
    22
    Vote Rating
    0
    quaidbrown is on a distinguished road

      0  

    Default


    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:

    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.