Navigating through DOM with Extjs

Question

I am having some trouble selecting the element I want on my page. The structure looks like:

<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">

I can get it to select the Notepanel-1003_header with

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

But how do i go from here and select Notepanel-1003-body ? These two are on the same level, i tried to add .next() at the end, but it didnt work. Any suggestions?

Did you try using class name as a selector? – Dumbledore Oct 27 '15 at 02:02 — Dumbledore, Oct 27 '15 at 02:02
Like Ext.ComponentQuery.query('x-panel-header') ? – PhoonOne Oct 27 '15 at 02:08 — PhoonOne, Oct 27 '15 at 02:08
why won't you add "itemId" property to the object? – aviram83 Oct 27 '15 at 08:00 — aviram83, Oct 27 '15 at 08:00

score 0 · Answer 1 · answered Oct 27 '15 at 04:56

0

You are trying to get an element, not a component. Once you've got the component (using Ext.ComponentQuery.query as mentioned) you can use getEl() to get the component's element and then use down() with a standard CSS selector (id, class name etc.).

answered Oct 27 '15 at 04:56

CD..

72,281
25
154
163

score 0 · Answer 2 · edited May 23 '17 at 12:29

First is worth to separate the concept of Components (Ext.Component, Ext.ComponentQuery) and (DOM) Elements (Ext.dom.Element, Ext.dom.Query).

To navigate through DOM with Extjs you can use

Ext.query (what is alias for Ext.dom.Query.select(), its support element selectors, attribute selectors, pseudo classes and even CSS value selectors, XML namespaces. You can do something like this:
```
Ext.dom.Query.select('div#Notepanel-1003-body')
```
It will return HTML DOM element
Ext.get (what is alias for Ext.dom.Element.get()) using the id of the node, a DOM Node or an existing Element as its argument. You can do something like this:
```
Ext.get('Notepanel-1003-body')
```
It will return Ext.dom.Element

Worth noting is that the Ext.dom.Element contains many methods to navigate thought DOM, for example:
- up()
- down()
- next()
```
Ext.get('Notepanel-1003_header').next('div')
```

Also you can check this question.

Navigating through DOM with Extjs

2 Answers2

Linked