0

我一直在进行 Sencha 测试，我正在寻找所有属性值，如 ID、NAME 等，以将它们添加到我的脚本中，以表示组件。所以我要做的是， 转到网页 -> 右键单击​​组件 -> 检查元素 -> 然后通过引用 HTML 代码获取足够的组件属性。 除了检查之外，还有什么方法可以在 HTML 页面中查找组件的属性值？？？ 请指教..

4

4 回答 4

1

试试App Inspector for Sencha chrome 扩展，它将帮助您更轻松地调试 ExtJS 和 Sencha Touch 应用程序。

它还可以帮助您检查组件树、数据存储、事件和布局。

您可以从以下 URL 安装它，

Sencha 应用检查器

希望这可以帮助！

于 2017-05-05T06:31:15.440 回答
1

以编程方式获取组件元素的属性值：

首先，获取组件。有多种方式，例如：

  • var component = Ext.getCmp(id)为您获取具有特定 ID 的组件。
  • var component = Ext.ComponentQuery.query(xtype)为您提供某个特定元素的所有组件的数组xtype

其次，在该组件上，调用getEl()或任何其他元素选择器，例如：

  • var el = component.getEl()
  • var el = grid.getView().getEl()
  • var el = formfield.inputEl

第三，在 el 上，调用getAttributes：

var attributes = el.getAttributes()

attributes 现在将包含一个像这样的对象：

class:"x-grid-view x-grid-with-col-lines x-grid-with-row-lines x-fit-item x-grid-view-default x-unselectable"
data-componentid:"tableview-1325"
id:"tableview-1325"
role:"rowgroup"
style:"margin: 0px; overflow: auto; width: 317px; height: 664px;"
tabindex:"0"
于 2017-05-05T16:16:40.250 回答
0

转到浏览器控制台并执行以下脚本以收集每个元素的属性列表。

var parentEl = document.getElementById("container");
getElementsAndAttributes(parentEl);

function getElementsAndAttributes(container) {
  var all = container.getElementsByTagName("*");
  for (var i = 0, max = all.length; i < max; i++) {
    console.log(all[i].tagName);
    var attrs = all[i].attributes;
    var keys = Object.keys(attrs);
    for (var j = 0; j < keys.length; j++) {
      var attr = attrs[keys[j]];
      console.log(attr.name + " -> " + attr.value);
    }
  }
}
<body>
  <div id="container">
    <span class="title" style="color:GREEN;">Phineas</span>
    <img src="https://cdn.pastemagazine.com/www/blogs/lists/2010/05/12/phineas.jpg" width="104" height="142">
  </div>
</body>

于 2017-05-05T08:23:20.450 回答
0

您可以按 ctrl+u 将显示页面源。使用 ctrl+f 找到你想要的元素。这比检查元素更容易。

于 2017-05-05T06:30:39.843 回答