将 DOM 元素 id 追溯到其 ExtJs 组件答案

【问题标题】：Tracing DOM element id back to its ExtJs component将 DOM 元素 id 追溯到其 ExtJs 组件
【发布时间】：2012-11-06 20:37:59
【问题描述】：

我们正在为使用 ExtJs 构建的 Web 应用程序开发基于 Web 的自动化解决方案。

目前我正在测试各种不同的对象识别技术，以最佳方式识别 Web 元素。

我们想使用 IE 开发者工具 (F12) 来突出显示和选择页面上的 DOM 对象，并（以某种方式）获取它们对应的 ExtJs 组件（连同其对应的属性，例如 itemId）。

这是否可以通过代码或其他技术来实现？

【问题讨论】：

是的，你的回答成功了。带有 DOM Id 的 GetCmp 为我提供了对组件的引用，这正是我所需要的。

标签： dom extjs automation webautomation

【解决方案1】：

我不熟悉用于此类事情的 IE 开发工具，但我可以尝试针对特定组件及其元素来回答。

您可以通过多种方式定位 Ext 组件：

Ext.ComponentQuery.query(CQselector) 方法 (see docs for examples)
Ext.getCmp(componentID) 如果你知道组件 ID
来自任何容器/组件的 up() 和 down() 方法。这些也采用 CQselector 表达式

自从加载了 Ext 库后，可以从页面访问这些方法中的任何一个。在 FF 和 Chrome 等浏览器中，您可以直接从控制台执行这些方法。我猜想它们应该可以在 IE 开发工具中使用。

一旦您引用了 Ext 组件，您就可以通过 .dom 或 .el 或类似属性获取 HTML 元素。或者你可以直接使用Dom query。

【讨论】：

【解决方案2】：

我相信，如果您设置 id 属性而不是 itemId，您可以获得所需的结果，因为这是作为组件的*容器的 html id 属性传递的（我认为！）。尽管考虑到大多数 extjs 组件中使用的嵌套 div/表的数量，但要使其准确地工作有点复杂。祝你好运！

【讨论】：

使用 ids 来获取引用是一个非常糟糕的主意，它会使你的小部件非常紧密地耦合

【解决方案3】：

很难说您在寻找什么，但如果您试图获取对已呈现的 Ext.Component 的引用，您可以在 HTML 结构中查找您的组件的包装器节点。 HTML id 与组件 id 相同。如果你运行var comp = Ext.getCmp('some-id-12345') 并且如果它返回了一些东西，那么你已经找到了Ext.Component 的包装器。

然后你可以使用

comp.itemId

检索itemId

您应该查看 http://www.illuminations-for-developers.com/ 一个显示 Ext.Components 的 firebug 插件。

你也可以使用Sencha Page Analyzer查看整个组件树

【讨论】：