11

我是 Sencha ExtJs 的新手

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

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

4

2 回答 2

14

Ext.getCmp() 与 Ext.get()

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

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

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

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

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


MyCmp.getEl() 与 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;
}

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

我用MyCmp.hide().

于 2013-06-21T18:28:43.107 回答
2

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

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

3) hide() -> 仅将 css (eg: "display:none") 应用于组件的样式

所以

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

相当于

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

于 2013-04-23T09:46:33.470 回答