It is important to be able to move around the DOM based on the current context and retrieve references to surrounding elements. In this recipe, we will discover how to use Ext JS to traverse the DOM and access elements based on the context of the current element we are working with.
We will use the HTML snippet from the previous recipe, Selecting DOM elements, to demonstrate how to traverse the DOM, so make sure it is handy!
We will first discuss how to access a DOM element's siblings.
First we retrieve the
Ext.Element
instance that will be the root of our traversal. In this case we will use the Data Package item in the "What's new in Ext JS 4" list, simply because it is in the middle of the list. We do this using theitem
method which returns the item at the specified position in our returned collection:var dataPackageEl = Ext.select('ul#whats-new li').item(2);
Get the previous list item ('Drawing') using the
prev
method:var drawingEl = dataPackageEl...