Ext JS – Getting order of events for an Ext component

August 29th, 2009 Author: wmeurer

Ext provides public events to which you can attach listeners. Understanding the order in which these events occur is key to building and interacting with components effectively. Although there isn’t any Ext documentation that specifies the order of events for objects, there is a way to have Ext spit out the events it fires when an action is performed on an object (thanks to the folks at Ext for pointing me to this solution).

Run this script after your component is defined:

Ext.util.Observable.capture(Ext.getCmp('my-comp'), console.info)

replacing ‘my-comp’ with the id of the Ext component. All public events will then log to the Firebug console as they occur for actions on that component. For example:

example_window = new Ext.Window({id:'eg_win'});
Ext.util.Observable.capture(Ext.getCmp(’eg_win’), console.info);
example_window.show();
// console will return:
//    beforerender
//    render
//    beforeshow
//    activate
//    show


See http://blog.extjs.eu/know-how/which-events-are-fired/ for the original post on this technique.

See http://extjs.com/deploy/dev/docs/?class=Ext.util.Observable for info on the Observable class.

Entry Filed under: User Interface