The composite elements class Ext.dom.CompositeElement wraps multiple Ext.dom.Element instances. It includes methods which manipulate this group of Ext.dom.Element instances in a single call so that we don't have to get the reference of each Ext.dom.Element and perform the same operation for each elements separately.
The composite elements can be retrieved using Ext.select() method. The Ext.select() method takes CSS selector as a string parameter and returns an instance of Ext.dom.CompositeElement or Ext.dom.CompositeElementLite.
Ext.select(selector, [unique], [root] )
The following example demonstrates how to manipulate multiple DOM elements in a single method call.
<!DOCTYPE html> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <title></title> <script src="../../ext-4.2.1/ext-4.2.1.883/ext-debug.js"></script> <script> Ext.onReady(function () { // get all input elements and set their bgcolor to yellow var inputElements = Ext.select("input"); inputElements.set({ 'style': 'background-color:yellow' }); }); </script> </head> <body> First Name: <input type="text" id="txtFirstName" class="myclass"/> <br /><br /> Last Name: <input type="text" id="txtLastName" class="myclass" /> </body> </html>
Try it on https://fiddle.sencha.com/#fiddle/s7r
In the above example, Ext.select() returns Ext.dom.CompositeElement that includes all the input elements. You can then manipulate all the elements in a single statement. The set() method sets the style attribute of all the selected elements.
The same way you can select other elements by passing different CSS selectors into select() method and use various methods of Ext.dom.CompositeElement. Visit sencha docs to know all the methods of Ext.dom.CompositeElement.