3

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

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

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

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

4

3 回答 3

6

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

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

  1. Ext.ComponentQuery.query(CQselector)方法（有关示例，请参见文档）
  2. Ext.getCmp(componentID)如果您知道组件 ID
  3. 来自任何容器/组件的 up() 和 down() 方法。这些也采用 CQselector 表达式

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

引用 Ext 组件后，您可以通过 .dom 或 .el 或类似属性获取 HTML 元素。或者你可以直接使用Dom 查询。

于 2012-11-05T22:49:43.813 回答
0

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

于 2012-11-05T17:05:20.053 回答
0

很难说出您要查找的内容，但如果您尝试获取对已呈现的 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查看整个组件树

于 2012-11-05T23:03:13.897 回答