dom - ExtJS 4 - 获取作为给定元素后代的所有组件

Question

查找作为给定 HTML 元素的后代呈现的所有 ExtJS 组件的最有效方法是什么？请注意，此元素不是组件本身的一部分，也不以任何方式由 Ext 管理，它只是硬编码的原始 HTML。并且这个 Element 可能不仅包含 ext 组件，它还可能包含其他非 ext 托管的 html，并且该 html 也可以包含 ext 组件。所以这意味着解决方案必须一直遍历 DOM，而不仅仅是查看直接子级。

Answer 1

我的建议是遍历 dom，对照 id 检查每个元素的 id Ext.getCmp，这是一个哈希映射查找。然后你可以切换到遍历这些Component方法，但我认为它的速度基本相同，如果你已经开始使用 dom，你不妨继续这样做：

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('*')可能会做比您想要的更多的工作，拥有自己的助行器可能会更有效，如下所示：

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);
});

所有这些都假设 dom id 与组件 id 匹配，我不知道这是否是您在未来版本的 Ext 中可以依赖的东西。