How to get Ext JS Component by a DOM element

February 13, 2014

Sometimes you need to operate at the DOM level, with DOM elements. And sometimes when you’re doing something with an element, you need to know which Component it belongs to. Since a Component may actually consist of many elements, finding a Component from DOM may seem hard to do, when in fact it is not.

The trick is to use DOM element id. In Ext JS, every Component has a main element, whose id is the same as Component’s id; so finding the Component turns out to be rather trivial:

        function findComponentByElement(node) {
            var topmost = document.body,
                target = node,

            while (target && target.nodeType === 1 && target !== topmost) {
                cmp = Ext.getCmp(;

                if (cmp) {
                    return cmp;

                target = target.parentNode;

            return null;

        var node, cmp;
        node = document.getElementById('foo');
        cmp  = findComponentByElement(node);

If you have an Ext.Element object instead of a bare HTMLElement node, just pass its DOM pointer instead:

var el, cmp;

el  = Ext.Element.getActiveElement(); // Currently focused element
cmp = findComponentByElement(el.dom);

Happy coding! :)

posted in Software development by nohuhu

Follow comments via the RSS Feed | Leave a comment | Trackback URL

3 Comments to "How to get Ext JS Component by a DOM element"

  1. Alessandro wrote:

    Very useful code, thanks!

    Just a little suggestion: why not change line 3?
    target = node,
    target = Ext.getDom(el),

    In this way it can accept {String/HTMLElement/Ext.Element} as parameter.

    Signature with comment:

    * Returns the Component that contains the passed String (id), dom node, or Ext.Element.
    * @param {String/HTMLElement/Ext.Element} el
    * @return {Ext.Component}
    findComponentByElement: function (el) {

  2. Chris Peterson wrote:

    Awesome! Just was hunting down some XSS issues in an ext app somebody else wrote and figuring out what component was responsible for rendering the un-escaped data was quite time consuming until I noticed this. Pairs well with the chrome $0-$4 feature:

  3. Idan Mor wrote:

    Great one !!!!
    Thanks !!!

Leave Your Comment

Powered by Wordpress and MySQL. Theme by Shlomi Noach,