Easily capture all events on a component in ExtJS

When debugging an ExtJS application, you'll often find it useful to listen to all events fired by a specific component. There is actually a handy built-in static method to do this called Ext.util.Observable.capture().

Here's a handy snippet that simply logs the event name and all arguments:

Ext.util.Observable.capture(myObj, function(evname) {console.log(evname, arguments);})

Even better, if you're currently inspecting your component's main element in your browser's developer tools, you can do this:

Ext.util.Observable.capture(Ext.getCmp($0.id), function(evname) {console.log(evname, arguments);})

Where $0 is the currently selected element. Should work fine in Chrome, Firefox, Opera, Safari.

If you don't want those logs to pollute your console anymore, simply call releaseCapture on your object:

Ext.util.Observable.releaseCapture(myObj);

This removes all captures on a given object so you don't have to reference your listener explicitly (which was likely an anonymous function :)).

Bonus tip: also be sure to check out the observe method which does something similar but allows you to listen to all events fired by all instances of a given class.