Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h1>Ext.getCmp() VS Ext.get()</h1> <p><code>Ext.getCmp()</code> finds an existing (created) <strong>component</strong> in ExtJS component tree. Note that it is <em>discouraged</em> to use it. Rely on <a href="http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.ComponentQuery" rel="noreferrer">ComponentQuery</a> instead.</p> <p><code>Ext.get()</code> finds a <strong>DOM element</strong> by id. For example:</p> <pre><code>&lt;html&gt; &lt;body&gt; &lt;div id="target"&gt;Hello, world!&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><code>Ext.get('target')</code> will return <code>div#target</code> DOM element.</p> <p>I personally never use either one. Instead, I locate components using ComponentQuery and then retrieve their DOM elements, as described below.</p> <p><br></p> <h1>MyCmp.getEl() VS MyCmp.el</h1> <p>Both just retrieve the top level DOM element of the MyCmp component.</p> <p>Current version of ExtJS (4.2.1) defines the <code>.getEl()</code> function as follows:</p> <pre><code>MyCmp.getEl = function () { return this.el; } </code></pre> <p>Which means that <code>MyCmp.getEl()</code> and <code>MyCmp.el</code> are <strong>absolutely equal</strong>.</p> <p>Use <code>.el</code> if you prefer to keep your code short and sweet. However, <code>.getEl()</code> 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).</p> <p>I prefer <code>.el</code>.</p> <p><br></p> <h1>MyCmp.hide() VS MyCmp.el.hide()</h1> <p><code>MyCmp.hide()</code> and <code>MyCmp.el.hide()</code> are two different functions. Current version of ExtJS (4.2.1) defines them as follows:</p> <pre><code>MyCmp.hide = function (animateTarget, cb, scope) { var me = this, continueHide; if (me.pendingShow) { delete me.pendingShow; } if (!(me.rendered &amp;&amp; !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; } </code></pre> <p>and</p> <pre><code>MyCmp.el.hide = function (animate){ if (typeof animate == 'string'){ this.setVisible(false, animate); return this; } this.setVisible(false, this.anim(animate)); return this; } </code></pre> <p>However, both functions seem to produce <strong>identical results</strong>. They just add a <code>style="display: none;"</code> to the component's DOM element.</p> <p>I use <code>MyCmp.hide()</code>.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload