Navigating through DOM with Extjs

Question

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

        
                      

              相关标签:
       
      

Answer 1

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

Answer 2

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.