Extjs Query

extjs

http://docs.sencha.com/extjs/4.2.2/#!/api/Ext

How to select all matching elements and perform an action on all of them at once?

Ext.select('p').highlight();

What do the query methods return?

The .select() method and other query methods returns a CompositeElement which provides access to every underlying element via the Element interface. This allows you to easily act on every element instance returned by Element.select without looping and touching each one individually.

How to register event handler on DOM elements?

Ext.select('p').on('click',function(){});

How to query for DOM elements?

Ext.query("span");                                                   // get all span tags
Ext.query("span", "foo");                                         // get the span tags who id is foo
Ext.query("#foo");                                                   // get element by id.
Ext.query(".foo");                                                    // get elements by class name
Ext.query("*");                                                        // get all elements
Ext.query("div p")                                                    // get all p tags that are included in a div tag
Ext.query("*[class]");                                              // get all elements that have a class attribute
Ext.query("*[class=bar]");                                      // get all element that have class=bar
Ext.query("*[class!=bar]");                                     // get all elements that have a class not equal bar
Ext.query("*[class ^=b]");                                      // get all elements that have a class that start with b.
Ext.query("*[class $=r]");                                       // get all elements that have a class class that end with r
Ext.query("*[class *=a]");                                      // get all elements that have a class with substring a. 
Ext.query("*{color=red}");                                     // get all elements that are displayed red
Ext.query("*{color=red}{color=pink}");                 // get all elements in pink that are descendants of element in red.

How to query for DOM elements using CSS class name?

var els = Ext.dom.Query.select('.col-header-filter');
Ext.get(els).on('click',displayFilteringWindow);

How to query the DOM using descendant CSS selector?

Ext.select('#filterWindow div.x-column-header-inner').elements[1];
var el = Ext.get(Ext.select('#filterWindow div.x-column-header-inner').elements[1]).el;

How to query the DOM using tag name, CSS selectors, and XPath?, and how to iterate over the result set?

// query by tag name
var nodes = Ext.query('div');

var nodes = Ext.query('div');
Ext.each(nodes, function (item, index, allItems) {
   document.write(index + '<br/>');
});