通過使用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）。

要通過DOM導航與ExtJS的，您可以使用

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節點或現有元素作爲其參數。你可以做這樣的事情：

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

   它將返回Ext.dom.Element

   值得注意的是，在Ext.dom.Element包含許多方法來瀏覽以爲DOM，例如：

   • up()
   • down()

   • next()

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

你也可以檢查this question。