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,
                cmp;

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

                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! :)