【问题标题】：Can you please explain .el, getEl(), Ext.get() in detail?你能详细解释一下.el、getEl()、Ext.get()吗？
【发布时间】：2013-04-23 09:41:26
【问题描述】：

我是 Sencha ExtJs 的新手

我不明白Ext.getCmp('component_id').getEl().hide(); 行。 .getEl() 有什么用。可以直接写Ext.getCmp('component_id').hide();吗？

并解释一下.el，Ext.get()。

【问题讨论】：

标签： javascript extjs extjs4.2

【解决方案1】：

Ext.getCmp() VS Ext.get()

Ext.getCmp() 在 ExtJS 组件树中找到一个现有的（创建的）组件。请注意，不鼓励使用它。请改用ComponentQuery。

Ext.get() 通过 id 找到 DOM 元素。例如：

<html>
    <body>
        <div id="target">Hello, world!</div>
    </body>
</html>

Ext.get('target') 将返回 div#target DOM 元素。

我个人从不使用任何一种。相反，我使用 ComponentQuery 定位组件，然后检索它们的 DOM 元素，如下所述。

MyCmp.getEl() VS MyCmp.el

两者都只是检索 MyCmp 组件的顶级 DOM 元素。

ExtJS（4.2.1）的当前版本定义.getEl()函数如下：

MyCmp.getEl = function () {
    return this.el;
}

这意味着MyCmp.getEl() 和MyCmp.el绝对相等。

如果您希望代码简洁明了，请使用.el。但是，.getEl() 可能会在将来 ExtJS 为组件的 DOM 元素检索过程添加额外的逻辑（例如，首先检查它是否存在）时有用。

我更喜欢.el。

MyCmp.hide() VS MyCmp.el.hide()

MyCmp.hide() 和 MyCmp.el.hide() 是两个不同的函数。当前版本的 ExtJS (4.2.1) 将它们定义如下：

MyCmp.hide = function (animateTarget, cb, scope) {
    var me = this,
        continueHide;
    if (me.pendingShow) {
        delete me.pendingShow;
    } if (!(me.rendered && !me.isVisible())) {
        continueHide = (me.fireEvent('beforehide', me) !== false);
        if (me.hierarchicallyHidden || continueHide) {
            me.hidden = true;
            me.getHierarchyState().hidden = true;
            if (me.rendered) {
                me.onHide.apply(me, arguments);
            }
        }
    }
    return me;
}

和

MyCmp.el.hide = function (animate){
    if (typeof animate == 'string'){
        this.setVisible(false, animate);
        return this;
    }
    this.setVisible(false, this.anim(animate));
    return this;
}

但是，这两个函数似乎产生相同的结果。他们只是将style="display: none;" 添加到组件的 DOM 元素中。

我使用MyCmp.hide()。

【讨论】：

哈哈，我认为 el 可能是因为他们有一些西班牙开发人员之类的。有点像 var that = 这个东西。它实际上与 dom 元素有关吗？
哈哈哈.el - 这很有趣！至于你的问题：有 3 个不同的对象。一个 Ext.Component、一个 Ext.Element 和一个普通的 DOM 元素。它们像这样相互关联：cmp.el.dom。所以Ext.Element封装了DOM元素，Ext.Component又封装了Ext.Element。

【解决方案2】：

1) Ext.getCmp('') -> ExtJS 在页面构建时维护组件列表。使用 getCmp('unique ID') 从列表中获取组件

2) getEl() -> 返回组件的 HTML 元素/DOM

3) hide() -> 只对组件的样式应用 css（例如："display:none"）

所以

Ext.getCmp('component_id').hide()

等价于

Ext.getCmp('component_id').getEl().hide()

【讨论】：

Component 有一个hide() 方法。
很抱歉很久没有参考文档了。让我编辑
"Ext.getCmp('component_id').hide() 与使用 Ext.getCmp('component_id').getEl().hide() 完全不正确。