使用Extjs在DOM中導航

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中導航，您可以使用

1. Ext.query（ Ext.dom.Query.select（）的別名，它的支持元素選擇器，屬性選擇器，偽類甚至CSS值選擇器，XML名稱空間。您可以執行以下操作：

    Ext.dom.Query.select('div#Notepanel-1003-body') 

   它將返回HTML DOM元素

2. Ext.get（ Ext.dom.Element.get（）的別名）使用節點的ID，DOM節點或現有Element作為其參數。 您可以執行以下操作：

    Ext.get('Notepanel-1003-body') 

   它將返回Ext.dom.Element

   值得注意的是， Ext.dom.Element包含許多導航思想DOM的方法，例如：

   • up（）
   • 下（）

   • 下一個（）

      Ext.get('Notepanel-1003_header').next('div') 

您也可以檢查這個問題 。