你能详细解释.el,getEl(),Ext.get()吗？

Question

你能详细解释.el,getEl(),Ext.get()吗？

Siv*_*mar 10 javascript extjs extjs4.2

我是Sencha ExtJs的新手

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

并解释我关于.el的事Ext.get().

Answer 1

Geo*_*Geo 12

Ext.getCmp()VS Ext.get()

Ext.getCmp()在ExtJS组件树中查找现有(已创建)组件.请注意,不鼓励使用它.相反,依靠ComponentQuery.

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

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

Run Code Online (Sandbox Code Playgroud)

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

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

MyCmp.getEl()VS MyCmp.el

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

当前版本的ExtJS(4.2.1)定义了.getEl()如下函数:

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

Run Code Online (Sandbox Code Playgroud)

这意味着,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;
}

Run Code Online (Sandbox Code Playgroud)

和

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

Run Code Online (Sandbox Code Playgroud)

但是,这两种功能似乎都会产生相同的结果.他们只是添加一个style="display: none;"组件的DOM元素.

我用MyCmp.hide().

Answer 2

Mad*_*dhu 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()

归档时间：	13 年，1 月前
查看次数：	21501 次
最近记录：	11 年，7 月前