extjs4中getEl（）的作用是什么

我有一个在激活选项卡时调用的侦听器

, listeners: {
     activate: function(tab){
         var first = tab.down('input'),                 // will be null
             firstEl = tab.getEl().down('input');       // will contain first input element

我很难理解tab和tab.getEl（）之间的关系。如果这是jquery，$（tab）将给我一个jquery元素，它将在很大程度上扩展我的选项集。在这方面，extjs几乎是落后的，或者至少更复杂

我试图理解何时以及为什么我需要

getEl（）

，这样它就不那么像是一个关于什么会起作用和什么不会起作用的开发废话。在其他地方，我会做以下事情：

showFieldHelpOnBlur = function(ctrl) {
    ctrl.up('form').down('#helptext').update("");
}

没有getEl（）。在本例中，表单是一个元素标记，就像上面的输入一样，但是在使用它之前我不需要getEl（）。一般来说，这两组功能共享相同的名称，但工作方式不同，这令人沮丧，而且文档似乎没有给出任何线索，说明为什么有多个同名方法可以执行不同的操作，或者以不同的方式执行类似的操作

---

在

focus（）

中发现了一些类似的问题，但是如果我理解了为什么有两组看似并行的方法，它们本质上是附加功能中包装的DOM元素。

我认为您困惑的核心是如何使用ExtJS和JQuery进行开发

JQuery是关于DOM操作和低级API的。ExtJS方法非常不同，它希望您将页面结构看作负责呈现适当HTML的ExtJS组件的层次结构。所以ExtJS本质上是在说：“不要担心html，我们会处理它的——您关注更大的组件、布局、事件等。”

你会说“哇，耐莉！什么意思？别担心html？我想要控制！”ExtJS会回答OK-我们有一个名为

Element

（）的包装器对象，你可以用它来做DOM操作，就像你习惯于JQuery一样。。但要谨慎。因为，如果您管理自己的HTML，我们就不能对框架未管理的布局和组件的情况负责

我的建议是——在罗马时要像罗马人一样：）

如果您打算使用ExtJS构建应用程序，请接受ExtJS的工作方式。了解不同的布局机制和多种现成的组件类型。使用MVC开发模式完美地组织代码。利用这些例子对你有利。研究体系结构和组件指南-它们非常有用。必须理解ComponentQuery类（所有那些向上/向下的方法和查询）

最后，当您熟悉使用ExtJS组件及其开发风格后，您将能够非常高效地构建UI组合，并可以构建比以前复杂得多的应用程序

祝你好运

---

专业提示：帮你自己一个忙，为Firebug的开发者插件获取启发-它会让你看到使用组件结构而不是HTML元素的东西。

在上面的代码中，我没有试图修改DOM，我只是试图将焦点设置为字段。阅读您所说的内容使我尝试了

tab.down（'field'）

，它没有返回null。我怎么知道

字段

是任何类型字段的有效选择器？这是field/Base的xtype/alias，但所有派生字段都有自己的别名，文档（）中没有任何内容表明可以使用任何部分基类名称进行查找。我的问题更多地是因为为什么有时必须使用

getEl（）

来完成查找，为什么会有这样的双重功能路径，其中x并不总是起作用，因此您必须猜测是否应该破解

getEl（）

，这样您就可以实际访问元素来设置焦点。不过我会尝试一些说明，区别在于三种方式：组件、元素、实际的DOM元素以及它们各自的API。在处理组件时，可以使用组件查询和API集等工具，这些工具通过继承属性、行为和事件的层次结构公开。在它下面，您可以进入组件的外壳，并在HTML元素包装器级别进行操作。这组API将与实际的DOM API非常匹配，但会添加自己的一组方法和事件。方法将为您提供要操作的元素对象。dom公开了实际的domapi。根据您编写代码的方式，您将使用一个或所有这些api。我更喜欢在组件API的最高级别上操作，并扩展ootb组件以添加特定功能。在少数情况下，HTML元素的功能或行为没有通过更高级别的API公开，我将继续深入元素级别并在那里操作。