使用 Extjs 在 DOM 中导航 [英] Navigating through DOM with Extjs

问题描述

我在选择页面上想要的元素时遇到了一些问题.结构如下:

<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() ，但是没有用.有什么建议吗?

解决方案

首先值得分离组件的概念 (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 节点或现有元素作为其参数.你可以这样做:

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

   它将返回 Ext.dom.Element

   值得注意的是 Ext.dom.Element 包含许多方法来导航思想 DOM，例如:

   • up()
   • down()

   • 下一步()

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

您也可以查看这个问题.>

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?

解决方案

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

1. 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

2. 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.

这篇关于使用 Extjs 在 DOM 中导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！