extjs4中的getEl()有什么意义

时间:2013-05-20 20:20:16

标签: extjs4 extjs4.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()中发现了一些类似的问题,但如果我只是理解为什么有两个看似平行的方法集来解决为什么本质上包含在附加功能中的DOM元素,那么这些问题可能更有意义。

1 个答案:

答案 0 :(得分:3)

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

JQuery完全是关于DOM操作和低级API的。 ExtJS方法非常不同,它希望您将页面结构视为负责呈现适当HTML的ExtJS组件的层次结构。所以ExtJS基本上是这样说的:"不要担心HTML,我们会照顾它 - 你专注于更大的组件,布局,事件等。"

你会说"哇哇哇!你是什​​么意思不担心HTML?我想控制!"并且ExtJS会响应OK - 我们有一个名为Elementhttp://docs.sencha.com/extjs/4.1.3/#!/api/Ext.dom.Element)的包装器对象,您可以使用它来执行DOM操作,就像您习惯使用JQuery一样..但要谨慎。因为如果您管理自己的HTML,我们就无法对未由框架管理的布局和组件发生的事情负责。

我的建议是这样的 - 当在罗马时,罗马人喜欢这样做:)

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

最后,当您使用ExtJS组件及其开发风格获得安慰时,您将非常高效地构建UI组合,并且可以构建比以前更复杂的应用程序。

祝你好运!

专业提示:帮自己一个忙,为Firebug获取Illuminations for Developers插件 - 它会睁开你的眼睛看到使用组件结构而不是HTML元素的东西。