Login/Register
Can you please explain .el, getEl(), Ext.get() in detail?
Asked Answered
javascriptextjsextjs4.2
A

2

11

I am new to Sencha ExtJs

I did not understand the line Ext.getCmp('component_id').getEl().hide();. what is the use of .getEl(). Can i write Ext.getCmp('component_id').hide(); directly?

And explain me about .el, Ext.get() also.

Autocratic answered 23/4, 2013 at 9:41 Comment(0)
T
14

Ext.getCmp() VS Ext.get()

Ext.getCmp() finds an existing (created) component in ExtJS component tree. Note that it is discouraged to use it. Rely on ComponentQuery instead.

Ext.get() finds a DOM element by id. For example:

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

Ext.get('target') will return div#target DOM element.

I personally never use either one. Instead, I locate components using ComponentQuery and then retrieve their DOM elements, as described below.


MyCmp.getEl() VS MyCmp.el

Both just retrieve the top level DOM element of the MyCmp component.

Current version of ExtJS (4.2.1) defines the .getEl() function as follows:

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

Which means that MyCmp.getEl() and MyCmp.el are absolutely equal.

Use .el if you prefer to keep your code short and sweet. However, .getEl() might be useful in case if in the future ExtJS adds additional logic to the component's DOM element retrieval process (e.g. checking whether it exists or not first).

I prefer .el.


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

MyCmp.hide() and MyCmp.el.hide() are two different functions. Current version of ExtJS (4.2.1) defines them as follows:

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;
}

and

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

However, both functions seem to produce identical results. They just add a style="display: none;" to the component's DOM element.

I use MyCmp.hide().

Tenpenny answered 21/6, 2013 at 18:28 Comment(2)
haha I thought that el was maybe because they had some spanish developers or something. Kindof like the var that = this thing. It's actually to do with the dom element instead? – Kaltman
hahaha .el - that's funny! As to your question: there are 3 different objects. An Ext.Component, an Ext.Element, and a plain DOM element. They relate to each other like this: cmp.el.dom. So Ext.Element encapsulates the DOM element, and the Ext.Component in turn encapsulates the Ext.Element. – Tenpenny
N
2

1) Ext.getCmp('') -> ExtJS maintains component list when page is constructed. Using getCmp('unique ID') fetches component from the list

2) getEl() -> returns HTML element / DOM of the component

3) hide() -> just applies css (e.g.: "display:none") to the style of the component

So

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

is equivalent to

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

Narvaez answered 23/4, 2013 at 9:46 Comment(3)
Component has a hide() method. – Galimatias
I am sorry its long time since i refered the docs. let me edit – Narvaez
"Ext.getCmp('component_id').hide() is same as using Ext.getCmp('component_id').getEl().hide()" Not correct at all. – Cymogene

© 2022 - 2024 — McMap. All rights reserved.