ExtJS 4 - Get all components that are descendants of a given Element

Question

What would be the most efficient way to find all ExtJS components that are rendered as descendants of a given HTML Element? Note that this Element is not part of a component itself and is not managed by Ext in any way, it is just hardcoded raw HTML. And this Element may not only contain just ext components, it may have other non-ext managed html in it as well, and that html can also contain ext components. So that means that the solution must traverse all the way down the DOM, not just look at direct children.

Answer 1

My suggestion would be to walk the dom, checking the id of each element against Ext.getCmp, which is a hash-map lookup. You could then switch to walking through the Component methods, but I think it would be basically the same speed, and if you're already walking the dom to begin with you might as well keep at it:

var dom = ...;
var components = [];
Ext.Array.each(Ext.get(dom).query('*'), function(dom) {
  var cmp = Ext.getCmp(dom.id);
  if (cmp)
    components.push(cmp);
});

Ext.get(dom).query('*') may do more work than you'd like, it might be more efficient to have your own walker, like this:

function walk(dom, callback) {
  if (dom.nodeType === 1) {
    callback(dom);
    Ext.Array.each(dom.childNodes, function(child) {
      walk(child, callback);
    });
  }
}
var dom = ...;
var components = [];
walk(dom, function(dom) {
  var cmp = Ext.getCmp(dom.id);
  if (cmp)
    components.push(cmp);
});

All this assumes that the dom ids match the component ids, which I don't know if that is something you can rely on in future versions of Ext.