extjs 4 - 获取VS选择VS查询

Question

我现在正在研究ExtJS 4.2.有三种方法可以访问DOM元素 - 获取,选择,查询.

我想知道它们之间的区别.为什么三种不同的方法

我们在这里有一个问题:SVO

但它没有给我任何明确的答案.寻找具体/详细的答案.

如果您能帮助解释,将不胜感激.

提前致谢 :-)

编辑基于以下答案:

我对jQuery并不多,所以通过比较无法理解.任何人都可以帮助我解决Ext.element和复合元素之间的区别吗？

编辑2:

什么是Ext.dom.Element？与Ext.element有什么不同？如果有人可以对"Ext.fx.Anim"包装有所了解吗？

Answer 1

Ext.get

Ext.get类似于document.getElementById你可以提供DOM节点的ID并检索包裹的元素Ext.dom.Element.您还可以提供DOM节点或现有元素.

// 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允许您使用CSS/XPath选择器选择DOM节点数组.这在使用自定义组件或数据视图时很方便,并且您需要比DOM ID更强大的选择机制.

// 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本质上是Ext JS对jQuery选择器的回答.给定一些CSS/XPath选择器,它返回一个表示Elements集合的对象.这CompositeElement有用于过滤,迭代,切片集合的方法.

最重要的是,CompositeElement支持可链接的版本所有的方法Ext.dom.Element和Ext.fx.Anim集合中的每个元素上进行操作,使得这种方法非常强大.

编辑1:一个Ext.Element表示单个DOM节点,而一个Ext.dom.CompositeElement表示可以通过单个接口影响的DOM节点的集合.因此,给出以下示例:

// 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);

您可以看到它更容易使用Ext.dom.CompositeElement.

编辑2:Ext JS支持备用类名的概念.将它们视为常用类的快捷方式.Ext.Element是替代类名Ext.dom.Element,可以互换使用.

Ext.fx.Anim是一个代表动画的类.通常不直接使用,它是在对元素或组件执行动画时在幕后创建的.例如,第一个参数Ext.Component#hide是动画目标.