Now you'll see how to run queries against the DOM using Ext JS—a must-have when you need to manipulate or perform actions on multiple, related DOM elements. The examples show how to reference all the div elements in a document, obtain all the elements with a CSS class name msg, and iterate over the options of a select element.
The following code snippets are examples of how to run high-performance queries against the DOM using Ext JS:
When you need to retrieve the elements that match the div selector to find the div elements in the document, use the following code snippet:
Ext.onReady(function() { // Get all the div elements. var nodes = Ext.query('div'); Ext.each(nodes, function(item, index, allItems) { document.write(index + '<br/>'); }); });When you need to reference the elements with the class name
msg, use the following code snippet:var msgLinks = Ext.query('.msg'); Ext.each(msgLinks, function(item,index) { // Do something with the element here. });When you want to iterate over the options of a select element, use the following code snippet:
var select = Ext.get('countries-select'); Ext.each(select.options, function(item,index) { // Do something with the item here. });
The previous examples use Ext.query(path, [root]), a shorthand of Ext.DomQuery.select(path, [root]), to retrieve an array of DOM nodes that match a given selector.
DomQuery provides high-performance selector/XPath processing by compiling queries into reusable functions. It works on HTML and XML documents, supports most of the CSS3 selector's specification as well as some custom selectors and basic XPath, and allows you to plug new pseudo classes and matchers.
The Retrieving DOM nodes and elements recipe, covered earlier in this chapter, shows how you can use Ext JS to get a handle on any DOM element.
The Acquiring references to Ext JS components recipe, covered earlier in this chapter, explains how to acquire a reference to any component in your code.