ExtJs - 如何通过 div class 获取元素？

Question

如何通过类名获取 ExtJs 组件对象？

假设我的 div 如下：

<div class="abc"></div>

如何获取此Div的ExtJs对象以执行例如getWidth()等操作？

注意：没有给出id。

我尝试过：

Ext.select(".abc")
Ext.query(".abc")

---

编辑：

错误： 对象没有getWidth方法

<div id="main">
<div class="abc"></div>
</div>

  var d = Ext.get( "main" );
  d.query('.abc').getWidth();

- Shlomo

Answer 1

使用

var dom = Ext.dom.Query.select('.abc');
var el = Ext.get(dom[0]); 

这将返回一个 Ext.Element。然后你可以像这样在元素上使用 ext 方法：

el.on('click', function(){}, scope);

或者

el.getWidth()

- Varun Achar

---

不起作用。请注意它是“class”而不是“id”。返回null。 - Shlomo

据我所知，Ext.get()需要一个id。 - sra

以前尝试过，显示：无法读取未定义的“Query”属性。 - Shlomo

使用 Ext.dom.Query。我们不需要创建一个新的 Ext.Element，可以直接将 dom 对象传递给 Ext.get 来获取一个 Ext.Element。 - Varun Achar

Answer 2

我相信你指的是 Ext.dom.Element（而不是ExtJs组件对象）。如果是，请尝试使用以下代码：

var d = Ext.get( "main" );
alert(d.down('.abc').getWidth());​

demo

- Molecular Man

---

太棒了+1！我没有意识到Ext.Element也有上下移动！ - sra

是的。检查我的答案。无论如何，如果你要给一个元素分配一个id，你可以直接把它分配给你想要检索的元素。 - Varun Achar

确实，我刚刚检查了您的编辑！完美运作！编辑：我无法编辑div并添加id，所以我需要按类别进行操作。 - Shlomo

Answer 3

对于Ext4和更高版本，您可以使用以下方法：

Ext.ComponentQuery.query('panel[cls=myCls]');

你将会得到一个这些组件的数组。

来源：http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentQuery

- ssamuel68

Answer 4

Ext.select('abc');

这个方法在EXT 4中也适用。

在你的例子中，只需在调用类名字符串时去掉点号。

- Frank