extjs 4 - get VS select VS query

Question

I am working on ExtJS 4.2 now. There are 3 ways to access DOM elements - get, select, query.

I want to know the difference between them. Why three separate methods?

we have a question here: SVO

But it doesn't give me any clear answers. Looking for something specific / detailed answer.

Will be grateful if you can help with the explanation.

Thanks in advance :-)

EDIT based on answer below:

I am not much into jQuery so can't understand through comparison. Can anyone help me with the difference between an Ext.element and a composite element?

EDIT 2:

What is Ext.dom.Element? Any different from Ext.element? and if anyone could throw some light on "Ext.fx.Anim" package?

Answer 1

Ext.get

Ext.get is analogous to document.getElementById in that you can provide the ID of a DOM node and retrieve that element wrapped as Ext.dom.Element. You can also provide a DOM node or an existing Element.

// Main usage: DOM ID
var someEl = Ext.get('myDivId');

// Wrap a DOM node as an Element
var someDom = document.getElementById('myDivId');
someEl = Ext.get(someDom);

// Identity function, essentially
var sameEl = Ext.get(someEl);

Ext.query

Ext.query allows you to select an array of DOM nodes using CSS/XPath selectors. This is handy when working with custom components or data views and you need a more robust selection mechanism than DOM IDs.

// Get all DOM nodes with class "oddRow" that are children of
// my component's top-level element.
var someNodes = Ext.query('.oddRow', myCustomComponent.getEl().dom);

Ext.select

Ext.select is essentially Ext JS's answer to jQuery's selectors. Given some CSS/XPath selector, it returns a single object representing a collection of Elements. This CompositeElement has methods for filtering, iterating, slicing the collection.

Most importantly, the CompositeElement supports chainable versions of all methods of Ext.dom.Element and Ext.fx.Anim that operate on each element in the collection, making this method very powerful.

Edit 1: An Ext.Element represents a single DOM node, while an Ext.dom.CompositeElement represents a collection of DOM nodes that can be affected through a single interface. So, given the following example:

// Set the height of each table row using Ext.query
var tableRowNodes = Ext.query('tr', document.getElementById('myTable'));
Ext.Array.each(tableRowNodes, function (node) {
    Ext.fly(node).setHeight(25);
});

// Set the height of each table row using Ext.select
var compositeEl = Ext.select('#myTable tr');
compositeEl.setHeight(25);

You can see how much easier it is to work with Ext.dom.CompositeElement.

Edit 2: Ext JS supports the concept of alternate class names. Think of them as shortcuts for commonly used classes. Ext.Element is the alternate class name for Ext.dom.Element and can be used interchangeably.

Ext.fx.Anim is a class representing an animation. Usually not used directly, it is created behind the scenes when performing animations on elements or components. For example, the first parameter of Ext.Component#hide is the animation target.