Question

我在选择我想要的元素时遇到了一些麻烦。结构如下：

<div id="Notepanel-1003_header" class="x-panel-header" style="right: auto; left: 0px; top: 0px; width: 737px;">
<div id="Notepanel-1003-body" class="x-panel-body" style="padding: 10px; width: 737px; height: 423px; left: 0px; top: 44px;" role="presentation" data-ref="body">

我可以通过

选择Notepanel-1003_header

Ext.ComponentQuery.query('Notepanel')[0].down()给了我<div id="Notepanel-1003_header" class="x-panel-header" style="right: auto; left: 0px; top: 0px; width: 737px;">

但我如何从这里开始选择Notepanel-1003-body？这两个是在同一级别，我试图在最后添加.next（），但它没有工作。有什么建议吗？

Answer 1

您正在尝试获取元素，而不是组件。获得组件后（使用上面提到的Ext.ComponentQuery.query），您可以使用getEl()获取组件的元素，然后将down()与标准CSS选择器（id，类名等）一起使用。）。

Answer 2

首先值得将组件（Ext.Component，Ext.ComponentQuery）和（DOM）元素（Ext.dom.Element，Ext.dom.Query）的概念分开。

要使用Extjs在DOM中导航，您可以使用

Ext.query（Ext.dom.Query.select()的别名，它的支持元素选择器，属性选择器，伪类甚至CSS值选择器，XML命名空间。你可以这样做：
```
Ext.dom.Query.select('div#Notepanel-1003-body')
```
它将返回HTML DOM元素
使用节点的id，DOM节点或现有Element作为其参数的Ext.get（Ext.dom.Element.get()的别名是什么）。你可以这样做：
```
Ext.get('Notepanel-1003-body')
```
它将返回Ext.dom.Element

值得注意的是Ext.dom.Element包含许多导航思想DOM的方法，例如：
- up()
- down()
- next()
```
Ext.get('Notepanel-1003_header').next('div')
```

您也可以查看this question。

使用Extjs浏览DOM

2 个答案: