1

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

, 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()，但如果我只是理解为什么有 2 组看似平行的方法用于包装在附加功能中的本质上的 DOM 元素，那么这些问题可能更有意义。

4

1 回答 1

3

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

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

你会说“哇哦 Nelly！你的意思是不要担心 html？我想要控制！” ExtJS 将响应 OK - 我们有一个名为Element( http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.dom.Element ) 的包装器对象，您可以使用它来进行 DOM 操作，就像你已经习惯了 JQuery .. 但要小心。因为如果您管理自己的 HTML，我们无法对您的布局和组件未由框架管理的情况负责。

我的建议是这样的——在罗马时会像罗马人一样:)

如果您打算使用 ExtJS 来构建应用程序 - 采用 ExtJS 设计的工作方式。了解开箱即用的不同布局机制和众多组件类型。使用 MVC 开发模式来精美地组织您的代码。使用示例对您有利。研究架构和组件指南——这些非常有用。必须了解 ComponentQuery 类（所有这些 up/down 方法和查询）。

最后，当您熟悉使用 ExtJS 组件及其开发风格时，您将非常有效地构建您的 UI 组合，并且可以构建比以前更复杂的应用程序。

祝你好运！

专业提示：帮自己一个忙，并为 Firebug 获得 Illuminations for Developers 插件 - 它会让您大开眼界，使用组件结构而不是 HTML 元素来查看事物。

于 2013-05-20T20:55:16.310 回答