jnqupq
Last Updated: February 25, 2016
·
19.29K
· dpashkevich
D42a7264714dee5006b9c99d2567a320

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.

5 Responses
Add your response

9467

Can i capture browsers events like say when the browser was maxmiised or minimised. ?

over 1 year ago ·
9723
D42a7264714dee5006b9c99d2567a320

Sounds like you want to capture window resize events. Typicall you put all your components inside Ext.container.Viewport and use Ext's layout mechanism that automatically tracks window resizing. You can override it if you want to. Check out these two methods:

If you provide more details on what you're trying to do I'll try to help (here or on StackOverflow)

over 1 year ago ·
15688
0 yrlwhbkxiwtuov2oo xqhznciu52pmpoynaqhzlxpolpijier9zbqvlldtl1xyj6g1fvftu8uetl

Any way can capture the scroll event of Tree Panel with EXTJS 4.2.1 and I am not using EXT Touch. and I did tried the following but without any lucks

panel.body.on("scroll",function(){console.log("scrolling")};
panel.el.on("scroll".function(){....});
panel.getTargetEl().on("scroll",function(){.....});

I am appreciate if anyone can point me a direction.

Best Regards
Tony Chu

over 1 year ago ·
18117
0 vu55r8swttimijtpsdcnri4etqxswzipzalvrievyawgnpq1nevwy oq7s0thxgxr7bu0kzsddj9

Note : In Ext JS 5 capture function has been moved to Ext.mixin.Observable.capture

over 1 year ago ·
18119
D42a7264714dee5006b9c99d2567a320

@jsfeutx Thanks for the heads up!

over 1 year ago ·