Subversion Repositories eFlore/Applications.cel

        <div class="body-wrap">

        <div class="top-tools">

            <a class="inner-link" href="#Ext.Element-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>

            <a class="inner-link" href="#Ext.Element-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a>

            <a class="inner-link" href="#Ext.Element-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a>

                        <a class="bookmark" href="../docs/?class=Ext.Element"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>

        </div>

                <h1>Class Ext.Element</h1>

        <table cellspacing="0">

            <tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr>

            <tr><td class="label">Defined In:</td><td class="hd-info"><a href="../source/core/Element.js" target="_blank">Element.js</a></td></tr>

            <tr><td class="label">Class:</td><td class="hd-info">Element</td></tr>

                        <tr><td class="label">Subclasses:</td><td class="hd-info"><a ext:cls="Ext.Layer" href="output/Ext.Layer.html">Layer</a></td></tr>

                                    <tr><td class="label">Extends:</td><td class="hd-info">Object</td></tr>

                    </table>

        <div class="description">

            Represents an Element in the DOM.<br><br>

Usage:<br>

<pre><code>var el = Ext.get(<em>"my-div"</em>);

<i>// or <b>with</b> getEl</i>

<b>var</b> el = getEl(<em>"my-div"</em>);

<i>// or <b>with</b> a DOM element</i>

<b>var</b> el = Ext.get(myDivElement);</code></pre>

Using Ext.get() or getEl() instead of calling the constructor directly ensures you get the same object

each call instead of constructing a new one.<br><br>

<b>Animations</b><br />

Many of the functions for manipulating an element have an optional "animate" parameter. The animate parameter

should either be a boolean (true) or an object literal with animation options. Note that the supported Element animation

options are a subset of the <a ext:cls="Ext.Fx" href="output/Ext.Fx.html">Ext.Fx</a> animation options specific to Fx effects.  The Element animation options are:

<pre>Option    Default   Description

--------- --------  ---------------------------------------------

duration  .35       The duration of the animation in seconds

easing    easeOut   The easing method

callback  none      A function to execute when the anim completes

scope     this      The scope (this) of the callback function</pre>

Also, the Anim object being used for the animation will be set on your options object as "anim", which allows you to stop or

manipulate the animation. Here's an example:

<pre><code>var el = Ext.get(<em>"my-div"</em>);

<i>// no animation</i>

el.setWidth(100);

<i>// <b>default</b> animation</i>

el.setWidth(100, true);

<i>// animation <b>with</b> some options set</i>

el.setWidth(100, {

    duration: 1,

    callback: <b>this</b>.foo,

    scope: <b>this</b>

});

<i>// using the <em>"anim"</em> property to get the Anim object</i>

<b>var</b> opt = {

    duration: 1,

    callback: <b>this</b>.foo,

    scope: <b>this</b>

};

el.setWidth(100, opt);

...

<b>if</b>(opt.anim.isAnimated()){

    opt.anim.stop();

}</code></pre>

<b> Composite (Collections of) Elements</b><br />

For working with collections of Elements, see <a ext:cls="Ext.CompositeElement" href="output/Ext.CompositeElement.html">Ext.CompositeElement</a>        </div>

        <div class="hr"></div>

                <a id="Ext.Element-props"></a>

        <h2>Public Properties</h2>

                <table cellspacing="0" class="member-table">

            <tr>

                <th class="sig-header" colspan="2">Property</th>

                <th class="msource-header">Defined By</th>

            </tr>

                <tr class="property-row">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-Element.DISPLAY"></a>

            <b>Element.DISPLAY</b> : Number            <div class="mdesc">

                            &lt;static&gt; Visibility mode constant - Use display to hide element                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="property-row alt">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-Element.VISIBILITY"></a>

            <b>Element.VISIBILITY</b> : Number            <div class="mdesc">

                            &lt;static&gt; Visibility mode constant - Use visibility to hide element                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="property-row">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-defaultUnit"></a>

            <b>defaultUnit</b> : String            <div class="mdesc">

                            The default unit to append to CSS values where a unit isn't provided (defaults to px).                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="property-row alt">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-dom"></a>

            <b>dom</b> : HTMLElement            <div class="mdesc">

                            The DOM element                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="property-row">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-id"></a>

            <b>id</b> : String            <div class="mdesc">

                            The DOM element ID                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="property-row alt">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-originalDisplay"></a>

            <b>originalDisplay</b> : String            <div class="mdesc">

                            The element's default display mode  (defaults to "")                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

            </table>

                <a id="Ext.Element-methods"></a>

        <h2>Public Methods</h2>

                <table cellspacing="0" class="member-table">

            <tr>

                <th class="sig-header" colspan="2">Method</th>

                <th class="msource-header">Defined By</th>

            </tr>

                <tr class="method-row expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-Element"></a>

            <b>Element</b>(&nbsp;<code>String/HTMLElement element</code>, <span class="optional" title="Optional">[<code>Boolean forceNew</code>]</span>&nbsp;)            <div class="mdesc">

                        <div class="short">Create a new Element directly.</div>

            <div class="long">

                Create a new Element directly.    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>element</code> : String/HTMLElement<div class="sub-desc"></div></li><li><code>forceNew</code> : Boolean<div class="sub-desc">(optional) By default the constructor checks to see if there is already an instance of this element in the cache and if there is it returns the same instance. This will skip that check (useful for extending this class).</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code></code></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row alt expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-Element.fly"></a>

            <b>Element.fly</b>(&nbsp;<code>String/HTMLElement el</code>, <span class="optional" title="Optional">[<code>String named</code>]</span>&nbsp;) : Element            <div class="mdesc">

                        <div class="short">&lt;static&gt; Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a...</div>

            <div class="long">

                <static> Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -

the dom node can be overwritten by other code.    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>el</code> : String/HTMLElement<div class="sub-desc">The dom node or id</div></li><li><code>named</code> : String<div class="sub-desc">(optional) Allows for creation of named reusable flyweights to

prevent conflicts (e.g. internally Ext uses "_internal")</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Element</code><div class="sub-desc">The shared Element object (or null if no matching element was found)</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-Element.get"></a>

            <b>Element.get</b>(&nbsp;<code>Mixed el</code>&nbsp;) : Element            <div class="mdesc">

                        <div class="short">&lt;static&gt; Static method to retrieve Element objects. Uses simple caching to consistently return the same object....</div>

            <div class="long">

                <static> Static method to retrieve Element objects. Uses simple caching to consistently return the same object.

Automatically fixes if an object was recreated with the same id via AJAX or DOM.    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>el</code> : Mixed<div class="sub-desc">The id of the node, a DOM Node or an existing Element.</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Element</code><div class="sub-desc">The Element object (or null if no matching element was found)</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row alt expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-addClass"></a>

            <b>addClass</b>(&nbsp;<code>String/Array className</code>&nbsp;) : Ext.Element            <div class="mdesc">

                        <div class="short">Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.</div>

            <div class="long">

                Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>className</code> : String/Array<div class="sub-desc">The CSS class to add, or an array of classes</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.Element</code><div class="sub-desc">this</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-addClassOnClick"></a>

            <b>addClassOnClick</b>(&nbsp;<code>String className</code>&nbsp;) : Ext.Element            <div class="mdesc">

                        <div class="short">Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)</div>

            <div class="long">

                Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>className</code> : String<div class="sub-desc"></div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.Element</code><div class="sub-desc">this</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row alt expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-addClassOnFocus"></a>

            <b>addClassOnFocus</b>(&nbsp;<code>String className</code>&nbsp;) : Ext.Element            <div class="mdesc">

                        <div class="short">Sets up event handlers to add and remove a css class when this element has the focus</div>

            <div class="long">

                Sets up event handlers to add and remove a css class when this element has the focus    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>className</code> : String<div class="sub-desc"></div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.Element</code><div class="sub-desc">this</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-addClassOnOver"></a>

            <b>addClassOnOver</b>(&nbsp;<code>String className</code>, <span class="optional" title="Optional">[<code>Boolean preventFlicker</code>]</span>&nbsp;) : Ext.Element            <div class="mdesc">

                        <div class="short">Sets up event handlers to add and remove a css class when the mouse is over this element</div>

            <div class="long">

                Sets up event handlers to add and remove a css class when the mouse is over this element    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>className</code> : String<div class="sub-desc"></div></li><li><code>preventFlicker</code> : Boolean<div class="sub-desc">(optional) If set to true, it prevents flickering by filtering

mouseout events for children elements</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.Element</code><div class="sub-desc">this</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row alt expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-addKeyListener"></a>

            <b>addKeyListener</b>(&nbsp;<code>Number/Array/Object/String key</code>, <code>Function fn</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>&nbsp;) : Ext.KeyMap            <div class="mdesc">

                        <div class="short">Convenience method for constructing a KeyMap</div>

            <div class="long">

                Convenience method for constructing a KeyMap    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>key</code> : Number/Array/Object/String<div class="sub-desc">Either a string with the keys to listen for, the numeric key code, array of key codes or an object with the following options:

{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}</div></li><li><code>fn</code> : Function<div class="sub-desc">The function to call</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope of the function</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.KeyMap</code><div class="sub-desc">The KeyMap created</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-addKeyMap"></a>

            <b>addKeyMap</b>(&nbsp;<code>Object config</code>&nbsp;) : Ext.KeyMap            <div class="mdesc">

                        <div class="short">Creates a KeyMap for this element</div>

            <div class="long">

                Creates a KeyMap for this element    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>config</code> : Object<div class="sub-desc">The KeyMap config. See <a ext:cls="Ext.KeyMap" href="output/Ext.KeyMap.html">Ext.KeyMap</a> for more details</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.KeyMap</code><div class="sub-desc">The KeyMap created</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row alt expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-addListener"></a>

            <b>addListener</b>(&nbsp;<code>String eventName</code>, <code>Function fn</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;) : void            <div class="mdesc">

                        <div class="short">Appends an event handler to this element.  The shorthand version <a ext:cls="Ext.Element" ext:member="on" href="output/Ext.Element.html#on">on</a> is equivalent.</div>

            <div class="long">

                Appends an event handler to this element.  The shorthand version <a ext:cls="Ext.Element" ext:member="on" href="output/Ext.Element.html#on">on</a> is equivalent.    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to handle</div></li><li><code>fn</code> : Function<div class="sub-desc">The handler function the event invokes</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope (this element) of the handler function</div></li><li><code>options</code> : Object<div class="sub-desc">(optional) An object containing handler configuration properties.

This may contain any of the following properties:<ul>

<li>scope {Object} : The scope in which to execute the handler function. The handler function's "this" context.</li>

<li>delegate {String} : A simple selector to filter the target or look for a descendant of the target</li>

<li>stopEvent {Boolean} : True to stop the event. That is stop propagation, and prevent the default action.</li>

<li>preventDefault {Boolean} : True to prevent the default action</li>

<li>stopPropagation {Boolean} : True to prevent event propagation</li>

<li>normalized {Boolean} : False to pass a browser event to the handler function instead of an Ext.EventObject</li>

<li>delay {Number} : The number of milliseconds to delay the invocation of the handler after te event fires.</li>

<li>single {Boolean} : True to add a handler to handle just the next firing of the event, and then remove itself.</li>

<li>buffer {Number} : Causes the handler to be scheduled to run in an <a ext:cls="Ext.util.DelayedTask" href="output/Ext.util.DelayedTask.html">Ext.util.DelayedTask</a> delayed

by the specified number of milliseconds. If the event fires again within that time, the original

handler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>

</ul><br>

<p>

<b>Combining Options</b><br>

In the following examples, the shorthand form <a ext:cls="Ext.Element" ext:member="on" href="output/Ext.Element.html#on">on</a> is used rather than the more verbose

addListener. The two are equivalent. Using the options argument, it is possible to combine different

types of listeners:<br>

<br>

A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)<div style="margin: 5px 20px 20px;">

Code:<pre><code>el.on(<em>'click'</em>, <b>this</b>.onClick, <b>this</b>, {

    single: true,

    delay: 100,

    stopEvent : true,

    forumId: 4

});</code></pre>

<p>

<b>Attaching multiple handlers in 1 call</b><br>

The method also allows for a single argument to be passed which is a config object containing properties

which specify multiple handlers.

<p>

Code:<pre><code>el.on({

    <em>'click'</em> : {

        fn: <b>this</b>.onClick,

        scope: <b>this</b>,

        delay: 100

    },

    <em>'mouseover'</em> : {

        fn: <b>this</b>.onMouseOver,

        scope: <b>this</b>

    },

    <em>'mouseout'</em> : {

        fn: <b>this</b>.onMouseOut,

        scope: <b>this</b>

    }

});</code></pre>

<p>

Or a shorthand syntax:<br>

Code:<pre><code>el.on({

    <em>'click'</em> : <b>this</b>.onClick,

    <em>'mouseover'</em> : <b>this</b>.onMouseOver,

    <em>'mouseout'</em> : <b>this</b>.onMouseOut,

    scope: <b>this</b>

});</code></pre></div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>void</code></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-alignTo"></a>

            <b>alignTo</b>(&nbsp;<code>Mixed element</code>, <code>String position</code>, <span class="optional" title="Optional">[<code>Array offsets</code>]</span>, <span class="optional" title="Optional">[<code>Boolean/Object animate</code>]</span>&nbsp;) : Ext.Element            <div class="mdesc">

                        <div class="short">Aligns this element with another element relative to the specified anchor points. If the other element is the

documen...</div>

            <div class="long">

                Aligns this element with another element relative to the specified anchor points. If the other element is the

document it aligns it to the viewport.

The position parameter is optional, and can be specified in any one of the following formats:

<ul>

<li><b>Blank</b>: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").</li>

<li><b>One anchor (deprecated)</b>: The passed anchor position is used as the target element's anchor point.

The element being aligned will position its top-left corner (tl) to that point.  <i>This method has been

deprecated in favor of the newer two anchor syntax below</i>.</li>

<li><b>Two anchors</b>: If two values from the table below are passed separated by a dash, the first value is used as the

element's anchor point, and the second value is used as the target's anchor point.</li>

</ul>

In addition to the anchor points, the position parameter also supports the "?" character.  If "?" is passed at the end of

the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to

the viewport if necessary.  Note that the element being aligned might be swapped to align to a different position than

that specified in order to enforce the viewport constraints.

Following are all of the supported anchor positions:

<pre>Value  Description

-----  -----------------------------

tl     The top left corner (default)

t      The center of the top edge

tr     The top right corner

l      The center of the left edge

c      In the center of the element

r      The center of the right edge

bl     The bottom left corner

b      The center of the bottom edge

br     The bottom right corner</pre>

Example Usage:

<pre><code><i>// align el to other-el using the <b>default</b> positioning (<em>"tl-bl"</em>, non-constrained)</i>

el.alignTo(<em>"other-el"</em>);

<i>// align the top left corner of el <b>with</b> the top right corner of other-el (constrained to viewport)</i>

el.alignTo(<em>"other-el"</em>, <em>"tr?"</em>);

<i>// align the bottom right corner of el <b>with</b> the center left edge of other-el</i>

el.alignTo(<em>"other-el"</em>, <em>"br-l?"</em>);

<i>// align the center of el <b>with</b> the bottom left corner of other-el and</i>

<i>// adjust the x position by -6 pixels (and the y position by 0)</i>

el.alignTo(<em>"other-el"</em>, <em>"c-bl"</em>, [-6, 0]);</code></pre>    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>element</code> : Mixed<div class="sub-desc">The element to align to.</div></li><li><code>position</code> : String<div class="sub-desc">The position to align to.</div></li><li><code>offsets</code> : Array<div class="sub-desc">(optional) Offset the positioning by [x, y]</div></li><li><code>animate</code> : Boolean/Object<div class="sub-desc">(optional) true for the default animation or a standard Element animation config object</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.Element</code><div class="sub-desc">this</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row alt expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-anchorTo"></a>

            <b>anchorTo</b>(&nbsp;<code>Mixed element</code>, <code>String position</code>, <span class="optional" title="Optional">[<code>Array offsets</code>]</span>, <span class="optional" title="Optional">[<code>Boolean/Object animate</code>]</span>, <span class="optional" title="Optional">[<code>Boolean/Number monitorScroll</code>]</span>, <code>Function callback</code>&nbsp;) : Ext.Element            <div class="mdesc">

                        <div class="short">Anchors an element to another element and realigns it when the window is resized.</div>

            <div class="long">

                Anchors an element to another element and realigns it when the window is resized.    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>element</code> : Mixed<div class="sub-desc">The element to align to.</div></li><li><code>position</code> : String<div class="sub-desc">The position to align to.</div></li><li><code>offsets</code> : Array<div class="sub-desc">(optional) Offset the positioning by [x, y]</div></li><li><code>animate</code> : Boolean/Object<div class="sub-desc">(optional) True for the default animation or a standard Element animation config object</div></li><li><code>monitorScroll</code> : Boolean/Number<div class="sub-desc">(optional) True to monitor body scroll and reposition. If this parameter

is a number, it is used as the buffer delay (defaults to 50ms).</div></li><li><code>callback</code> : Function<div class="sub-desc">The function to call after the animation finishes</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.Element</code><div class="sub-desc">this</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-animate"></a>

            <b>animate</b>(&nbsp;<code>Object args</code>, <span class="optional" title="Optional">[<code>Float duration</code>]</span>, <span class="optional" title="Optional">[<code>Function onComplete</code>]</span>, <span class="optional" title="Optional">[<code>String easing</code>]</span>, <span class="optional" title="Optional">[<code>String animType</code>]</span>&nbsp;) : Ext.Element            <div class="mdesc">

                        <div class="short">Perform animation on this element.</div>

            <div class="long">

                Perform animation on this element.    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>args</code> : Object<div class="sub-desc">The animation control args</div></li><li><code>duration</code> : Float<div class="sub-desc">(optional) How long the animation lasts in seconds (defaults to .35)</div></li><li><code>onComplete</code> : Function<div class="sub-desc">(optional) Function to call when animation completes</div></li><li><code>easing</code> : String<div class="sub-desc">(optional) Easing method to use (defaults to 'easeOut')</div></li><li><code>animType</code> : String<div class="sub-desc">(optional) 'run' is the default. Can also be 'color', 'motion', or 'scroll'</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.Element</code><div class="sub-desc">this</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row alt expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-appendChild"></a>

            <b>appendChild</b>(&nbsp;<code>String/HTMLElement/Array/Element/CompositeElement el</code>&nbsp;) : Ext.Element            <div class="mdesc">

                        <div class="short">Appends the passed element(s) to this element</div>

            <div class="long">

                Appends the passed element(s) to this element    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>el</code> : String/HTMLElement/Array/Element/CompositeElement<div class="sub-desc"></div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.Element</code><div class="sub-desc">this</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-appendTo"></a>

            <b>appendTo</b>(&nbsp;<code>Mixed el</code>&nbsp;) : Ext.Element            <div class="mdesc">

                        <div class="short">Appends this element to the passed element</div>

            <div class="long">

                Appends this element to the passed element    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>el</code> : Mixed<div class="sub-desc">The new parent element</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.Element</code><div class="sub-desc">this</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row alt expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-applyStyles"></a>

            <b>applyStyles</b>(&nbsp;<code>String/Object/Function styles</code>&nbsp;) : Ext.Element            <div class="mdesc">

                        <div class="short">More flexible version of <a ext:cls="Ext.Element" ext:member="setStyle" href="output/Ext.Element.html#setStyle">setStyle</a> for setting style properties.</div>

            <div class="long">

                More flexible version of <a ext:cls="Ext.Element" ext:member="setStyle" href="output/Ext.Element.html#setStyle">setStyle</a> for setting style properties.    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>styles</code> : String/Object/Function<div class="sub-desc">A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or

a function which returns such a specification.</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.Element</code><div class="sub-desc">this</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-autoHeight"></a>

            <b>autoHeight</b>(&nbsp;<span class="optional" title="Optional">[<code>Boolean animate</code>]</span>, <span class="optional" title="Optional">[<code>Float duration</code>]</span>, <span class="optional" title="Optional">[<code>Function onComplete</code>]</span>, <span class="optional" title="Optional">[<code>String easing</code>]</span>&nbsp;) : Ext.Element            <div class="mdesc">

                        <div class="short">Measures the element's content height and updates height to match. Note: this function uses setTimeout so

the new hei...</div>

            <div class="long">

                Measures the element's content height and updates height to match. Note: this function uses setTimeout so

the new height may not be available immediately.    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>animate</code> : Boolean<div class="sub-desc">(optional) Animate the transition (defaults to false)</div></li><li><code>duration</code> : Float<div class="sub-desc">(optional) Length of the animation in seconds (defaults to .35)</div></li><li><code>onComplete</code> : Function<div class="sub-desc">(optional) Function to call when animation completes</div></li><li><code>easing</code> : String<div class="sub-desc">(optional) Easing method to use (defaults to easeOut)</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.Element</code><div class="sub-desc">this</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row alt expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-blur"></a>

            <b>blur</b>() : Ext.Element            <div class="mdesc">

                        <div class="short">Tries to blur the element. Any exceptions are caught and ignored.</div>

            <div class="long">

                Tries to blur the element. Any exceptions are caught and ignored.    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li>None.</li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.Element</code><div class="sub-desc">this</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-boxWrap"></a>

            <b>boxWrap</b>(&nbsp;<span class="optional" title="Optional">[<code>String class</code>]</span>&nbsp;) : Ext.Element            <div class="mdesc">

                        <div class="short">Wraps the specified element with a special markup/CSS block that renders by default as a gray container with a

gradie...</div>

            <div class="long">

                Wraps the specified element with a special markup/CSS block that renders by default as a gray container with a

gradient background, rounded corners and a 4-way shadow.  Example usage:

<pre><code>

// Basic box wrap

Ext.get("foo").boxWrap();

// You can also add a custom class and use CSS inheritance rules to customize the box look.

// 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example

// for how to create a custom box wrap style.

Ext.get("foo").boxWrap().addClass("x-box-blue");</pre></code>    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>class</code> : String<div class="sub-desc">(optional) A base CSS class to apply to the containing wrapper element (defaults to 'x-box').

Note that there are a number of CSS rules that are dependent on this name to make the overall effect work,

so if you supply an alternate base class, make sure you also supply all of the necessary rules.</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.Element</code><div class="sub-desc">this</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row alt expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-center"></a>

            <b>center</b>(&nbsp;<span class="optional" title="Optional">[<code>Mixed centerIn</code>]</span>&nbsp;) : void            <div class="mdesc">

                        <div class="short">Centers the Element in either the viewport, or another Element.</div>

            <div class="long">

                Centers the Element in either the viewport, or another Element.    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>centerIn</code> : Mixed<div class="sub-desc">(optional) The element in which to center the element.</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>void</code></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-child"></a>

            <b>child</b>(&nbsp;<code>String selector</code>, <span class="optional" title="Optional">[<code>Boolean returnDom</code>]</span>&nbsp;) : HTMLElement/Ext.Element            <div class="mdesc">

                        <div class="short">Selects a single child at any depth below this element based on the passed CSS selector (the selector should not cont...</div>

            <div class="long">

                Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>selector</code> : String<div class="sub-desc">The CSS selector</div></li><li><code>returnDom</code> : Boolean<div class="sub-desc">(optional) True to return the DOM node instead of Ext.Element (defaults to false)</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The child Ext.Element (or DOM node if returnDom = true)</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row alt expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-clean"></a>

            <b>clean</b>(&nbsp;<span class="optional" title="Optional">[<code>Boolean forceReclean</code>]</span>&nbsp;) : void            <div class="mdesc">

                        <div class="short">Removes worthless text nodes</div>

            <div class="long">

                Removes worthless text nodes    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>forceReclean</code> : Boolean<div class="sub-desc">(optional) By default the element

keeps track if it has been cleaned already so

you can call this over and over. However, if you update the element and

need to force a reclean, you can pass true.</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>void</code></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-clearOpacity"></a>

            <b>clearOpacity</b>() : Ext.Element            <div class="mdesc">

                        <div class="short">Clears any opacity settings from this element. Required in some cases for IE.</div>

            <div class="long">

                Clears any opacity settings from this element. Required in some cases for IE.    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li>None.</li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.Element</code><div class="sub-desc">this</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row alt expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-clearPositioning"></a>

            <b>clearPositioning</b>(&nbsp;<span class="optional" title="Optional">[<code>String value</code>]</span>&nbsp;) : Ext.Element            <div class="mdesc">

                        <div class="short">Clear positioning back to the default when the document was loaded</div>

            <div class="long">

                Clear positioning back to the default when the document was loaded    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>value</code> : String<div class="sub-desc">(optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'.</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.Element</code><div class="sub-desc">this</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-clip"></a>

            <b>clip</b>() : Ext.Element            <div class="mdesc">

                        <div class="short">Store the current overflow setting and clip overflow on the element - use <a ext:cls="Ext.Element" ext:member="unclip" href="output/Ext.Element.html#unclip">unclip</a> to remove</div>

            <div class="long">

                Store the current overflow setting and clip overflow on the element - use <a ext:cls="Ext.Element" ext:member="unclip" href="output/Ext.Element.html#unclip">unclip</a> to remove    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li>None.</li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.Element</code><div class="sub-desc">this</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row alt expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-contains"></a>

            <b>contains</b>(&nbsp;<code>HTMLElement/String el</code>&nbsp;) : Boolean            <div class="mdesc">

                        <div class="short">Returns true if this element is an ancestor of the passed element</div>

            <div class="long">

                Returns true if this element is an ancestor of the passed element    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>el</code> : HTMLElement/String<div class="sub-desc">The element to check</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Boolean</code><div class="sub-desc">True if this element is an ancestor of el, else false</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-createChild"></a>

            <b>createChild</b>(&nbsp;<code>Object config</code>, <span class="optional" title="Optional">[<code>HTMLElement insertBefore</code>]</span>, <span class="optional" title="Optional">[<code>Boolean returnDom</code>]</span>&nbsp;) : Ext.Element            <div class="mdesc">

                        <div class="short">Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child e...</div>

            <div class="long">

                Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>config</code> : Object<div class="sub-desc">DomHelper element config object. If no tag is specified (e.g., {tag:'input'}) then a div will be

automatically generated with the specified attributes.</div></li><li><code>insertBefore</code> : HTMLElement<div class="sub-desc">(optional) a child element of this element</div></li><li><code>returnDom</code> : Boolean<div class="sub-desc">(optional) true to return the dom node instead of creating an Element</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.Element</code><div class="sub-desc">The new child element</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row alt expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-createProxy"></a>

            <b>createProxy</b>(&nbsp;<code>String/Object config</code>, <span class="optional" title="Optional">[<code>String/HTMLElement renderTo</code>]</span>, <span class="optional" title="Optional">[<code>Boolean matchBox</code>]</span>&nbsp;) : Ext.Element            <div class="mdesc">

                        <div class="short">Creates a proxy element of this element</div>

            <div class="long">

                Creates a proxy element of this element    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>config</code> : String/Object<div class="sub-desc">The class name of the proxy element or a DomHelper config object</div></li><li><code>renderTo</code> : String/HTMLElement<div class="sub-desc">(optional) The element or element id to render the proxy to (defaults to document.body)</div></li><li><code>matchBox</code> : Boolean<div class="sub-desc">(optional) True to align and size the proxy to this element now (defaults to false)</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.Element</code><div class="sub-desc">The new proxy element</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-createShim"></a>

            <b>createShim</b>() : Ext.Element            <div class="mdesc">

                        <div class="short">Creates an iframe shim for this element to keep selects and other windowed objects from

showing through.</div>

            <div class="long">

                Creates an iframe shim for this element to keep selects and other windowed objects from

showing through.    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li>None.</li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.Element</code><div class="sub-desc">The new shim element</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row alt expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-down"></a>

            <b>down</b>(&nbsp;<code>String selector</code>, <span class="optional" title="Optional">[<code>Boolean returnDom</code>]</span>&nbsp;) : HTMLElement/Ext.Element            <div class="mdesc">

                        <div class="short">Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id).</div>

            <div class="long">

                Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id).    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>selector</code> : String<div class="sub-desc">The CSS selector</div></li><li><code>returnDom</code> : Boolean<div class="sub-desc">(optional) True to return the DOM node instead of Ext.Element (defaults to false)</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>HTMLElement/Ext.Element</code><div class="sub-desc">The child Ext.Element (or DOM node if returnDom = true)</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-enableDisplayMode"></a>

            <b>enableDisplayMode</b>(&nbsp;<span class="optional" title="Optional">[<code>String display</code>]</span>&nbsp;) : Ext.Element            <div class="mdesc">

                        <div class="short">Convenience method for setVisibilityMode(Element.DISPLAY)</div>

            <div class="long">

                Convenience method for setVisibilityMode(Element.DISPLAY)    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>display</code> : String<div class="sub-desc">(optional) What to set display to when visible</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.Element</code><div class="sub-desc">this</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row alt expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-findParent"></a>

            <b>findParent</b>(&nbsp;<code>String selector</code>, <span class="optional" title="Optional">[<code>Number/Mixed maxDepth</code>]</span>, <span class="optional" title="Optional">[<code>Boolean returnEl</code>]</span>&nbsp;) : HTMLElement            <div class="mdesc">

                        <div class="short">Looks at this node and then at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:fi...</div>

            <div class="long">

                Looks at this node and then at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>selector</code> : String<div class="sub-desc">The simple selector to test</div></li><li><code>maxDepth</code> : Number/Mixed<div class="sub-desc">(optional) The max depth to

 search as a number or element (defaults to 10 || document.body)</div></li><li><code>returnEl</code> : Boolean<div class="sub-desc">(optional) True to return a Ext.Element object instead of DOM node</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>HTMLElement</code><div class="sub-desc">The matching DOM node (or null if no match was found)</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-findParentNode"></a>

            <b>findParentNode</b>(&nbsp;<code>String selector</code>, <span class="optional" title="Optional">[<code>Number/Mixed maxDepth</code>]</span>, <span class="optional" title="Optional">[<code>Boolean returnEl</code>]</span>&nbsp;) : HTMLElement            <div class="mdesc">

                        <div class="short">Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)</div>

            <div class="long">

                Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>selector</code> : String<div class="sub-desc">The simple selector to test</div></li><li><code>maxDepth</code> : Number/Mixed<div class="sub-desc">(optional) The max depth to

 search as a number or element (defaults to 10 || document.body)</div></li><li><code>returnEl</code> : Boolean<div class="sub-desc">(optional) True to return a Ext.Element object instead of DOM node</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>HTMLElement</code><div class="sub-desc">The matching DOM node (or null if no match was found)</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row alt expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-first"></a>

            <b>first</b>(&nbsp;<span class="optional" title="Optional">[<code>String selector</code>]</span>, <span class="optional" title="Optional">[<code>Boolean returnDom</code>]</span>&nbsp;) : Ext.Element/HTMLElement            <div class="mdesc">

                        <div class="short">Gets the first child, skipping text nodes</div>

            <div class="long">

                Gets the first child, skipping text nodes    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>selector</code> : String<div class="sub-desc">(optional) Find the next sibling that matches the passed simple selector</div></li><li><code>returnDom</code> : Boolean<div class="sub-desc">(optional) True to return a raw dom node instead of an Ext.Element</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.Element/HTMLElement</code><div class="sub-desc">The first child or null</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-focus"></a>

            <b>focus</b>() : Ext.Element            <div class="mdesc">

                        <div class="short">Tries to focus the element. Any exceptions are caught and ignored.</div>

            <div class="long">

                Tries to focus the element. Any exceptions are caught and ignored.    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li>None.</li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Ext.Element</code><div class="sub-desc">this</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row alt expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>

        <td class="sig">

        <a id="Ext.Element-getAlignToXY"></a>

            <b>getAlignToXY</b>(&nbsp;<code>Mixed element</code>, <code>String position</code>, <span class="optional" title="Optional">[<code>Array offsets</code>]</span>&nbsp;) : Array            <div class="mdesc">

                        <div class="short">Gets the x,y coordinates to align this element with another element. See alignTo for more info on the

supported posit...</div>

            <div class="long">

                Gets the x,y coordinates to align this element with another element. See <a ext:cls="Ext.Element" ext:member="alignTo" href="output/Ext.Element.html#alignTo">alignTo</a> for more info on the

supported position values.    <div class="mdetail-params">

        <strong>Parameters:</strong>

        <ul><li><code>element</code> : Mixed<div class="sub-desc">The element to align to.</div></li><li><code>position</code> : String<div class="sub-desc">The position to align to.</div></li><li><code>offsets</code> : Array<div class="sub-desc">(optional) Offset the positioning by [x, y]</div></li>        </ul>

        <strong>Returns:</strong>

        <ul>

            <li><code>Array</code><div class="sub-desc">[x, y]</div></li>

        </ul>

    </div>

                </div>

                        </div>

        </td>

        <td class="msource">Element</td>

    </tr>

        <tr class="method-row expandable">

        <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>