-<div class="body-wrap" xmlns:ext="http://www.extjs.com"><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 <a href="source/Element.fx.html#cls-Ext.Element">Ext.Element</a></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">Element.fx.js, Element.insertion.js, Element.js, Element.position.js, Element.scroll.js, Element.style.js, Element.traversal.js, Element-more.js, Element.alignment.js, Element.dd.js, Element.fx-more.js, Element.insertion-more.js, Element.keys.js, Element.legacy.js, Element.position-more.js, Element.scroll-more.js, Element.style-more.js</td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/Element.fx.html#cls-Ext.Element">Element</a></td></tr><tr><td class="label">Subclasses:</td><td class="hd-info"><a href="output/Ext.Layer.html" ext:cls="Ext.Layer">Layer</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info">Object</td></tr><tr><td class="hd-info"></td></tr></table><div class="description"><p>Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.</p>\r
-<p>All instances of this class inherit the methods of <a href="output/Ext.Fx.html" ext:cls="Ext.Fx">Ext.Fx</a> making visual effects easily available to all DOM elements.</p>\r
-<p>Note that the events documented in this class are not Ext events, they encapsulate browser events. To\r
-access the underlying browser event, see <a href="output/Ext.EventObject.html#Ext.EventObject-browserEvent" ext:member="browserEvent" ext:cls="Ext.EventObject">Ext.EventObject.browserEvent</a>. Some older\r
-browsers may not support the full range of events. Which events are supported is beyond the control of ExtJs.</p>\r
-Usage:<br>\r
-<pre><code><i>// by id\r</i>
-<b>var</b> el = Ext.get(<em>"my-div"</em>);\r
-\r
-<i>// by DOM element reference\r</i>
-<b>var</b> el = Ext.get(myDivElement);</code></pre>\r
-<b>Animations</b><br />\r
-<p>When an element is manipulated, by default there is no animation.</p>\r
-<pre><code><b>var</b> el = Ext.get(<em>"my-div"</em>);\r
-\r
-<i>// no animation\r</i>
-el.setWidth(100);</code></pre>\r
-<p>Many of the functions for manipulating an element have an optional "animate" parameter. This\r
-parameter can be specified as boolean (<tt>true</tt>) for default animation effects.</p>\r
-<pre><code><i>// <b>default</b> animation\r</i>
-el.setWidth(100, true);</code></pre>\r
-<p>To configure the effects, an object literal with animation options to use as the Element animation\r
-configuration object can also be specified. Note that the supported Element animation configuration\r
-options are a subset of the <a href="output/Ext.Fx.html" ext:cls="Ext.Fx">Ext.Fx</a> animation options specific to Fx effects. The supported\r
-Element animation configuration options are:</p>\r
-<pre>\r
-Option Default Description\r
---------- -------- ---------------------------------------------\r
-<a href="output/Ext.Fx.html#Ext.Fx-duration" ext:member="duration" ext:cls="Ext.Fx">duration</a> .35 The duration of the animation in seconds\r
-<a href="output/Ext.Fx.html#Ext.Fx-easing" ext:member="easing" ext:cls="Ext.Fx">easing</a> easeOut The easing method\r
-<a href="output/Ext.Fx.html#Ext.Fx-callback" ext:member="callback" ext:cls="Ext.Fx">callback</a> none A function to execute when the anim completes\r
-<a href="output/Ext.Fx.html#Ext.Fx-scope" ext:member="scope" ext:cls="Ext.Fx">scope</a> this The scope (this) of the callback function\r
-</pre>\r
-<pre><code><i>// Element animation options object\r</i>
-<b>var</b> opt = {\r
- <a href="output/Ext.Fx.html#Ext.Fx-duration" ext:member="duration" ext:cls="Ext.Fx">duration</a>: 1,\r
- <a href="output/Ext.Fx.html#Ext.Fx-easing" ext:member="easing" ext:cls="Ext.Fx">easing</a>: <em>'elasticIn'</em>,\r
- <a href="output/Ext.Fx.html#Ext.Fx-callback" ext:member="callback" ext:cls="Ext.Fx">callback</a>: this.foo,\r
- <a href="output/Ext.Fx.html#Ext.Fx-scope" ext:member="scope" ext:cls="Ext.Fx">scope</a>: this\r
-};\r
-<i>// animation <b>with</b> some options set\r</i>
-el.setWidth(100, opt);</code></pre>\r
-<p>The Element animation object being used for the animation will be set on the options\r
-object as "anim", which allows you to stop or manipulate the animation. Here is an example:</p>\r
-<pre><code><i>// using the <em>"anim"</em> property to get the Anim object\r</i>
-<b>if</b>(opt.anim.isAnimated()){\r
- opt.anim.stop();\r
-}</code></pre>\r
-<p>Also see the <tt><a href="output/Ext.Element.html#Ext.Element-animate" ext:member="animate" ext:cls="Ext.Element">animate</a></tt> method for another animation technique.</p>\r
-<p><b> Composite (Collections of) Elements</b></p>\r
-<p>For working with collections of Elements, see <a href="output/Ext.CompositeElement.html" ext:cls="Ext.CompositeElement">Ext.CompositeElement</a></p></div><div class="hr"></div><a id="Ext.Element-props"></a><h2>Public Properties</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Property</th><th class="msource-header">Defined By</th></tr><tr class="property-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-DISPLAY"></a><b><a href="source/Element.fx.html#prop-Ext.Element-DISPLAY">DISPLAY</a></b> : Number<div class="mdesc">Visibility mode constant for use with <a href="output/Ext.Element.html#Ext.Element-setVisibilityMode" ext:member="setVisibilityMode" ext:cls="Ext.Element">setVisibilityMode</a>. Use display to hide element</div></td><td class="msource">Element</td></tr><tr class="property-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-VISIBILITY"></a><b><a href="source/Element.fx.html#prop-Ext.Element-VISIBILITY">VISIBILITY</a></b> : Number<div class="mdesc">Visibility mode constant for use with <a href="output/Ext.Element.html#Ext.Element-setVisibilityMode" ext:member="setVisibilityMode" ext:cls="Ext.Element">setVisibilityMode</a>. Use visibility to hide element</div></td><td class="msource">Element</td></tr><tr class="property-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-autoBoxAdjust"></a><b><a href="source/Element.html#prop-Ext.Element-autoBoxAdjust">autoBoxAdjust</a></b> : Object<div class="mdesc">true to automatically adjust width and height settings for box-model issues (default to true)</div></td><td class="msource">Element</td></tr><tr class="property-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-defaultUnit"></a><b><a href="source/Element.html#prop-Ext.Element-defaultUnit">defaultUnit</a></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 "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-dom"></a><b><a href="source/Element.html#prop-Ext.Element-dom">dom</a></b> : HTMLElement<div class="mdesc">The DOM element</div></td><td class="msource">Element</td></tr><tr class="property-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-id"></a><b><a href="source/Element.html#prop-Ext.Element-id">id</a></b> : String<div class="mdesc">The DOM element ID</div></td><td class="msource">Element</td></tr><tr class="property-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-originalDisplay"></a><b><a href="source/Element.fx.html#prop-Ext.Element-originalDisplay">originalDisplay</a></b> : String<div class="mdesc">The element's default display mode (defaults to "")</div></td><td class="msource">Element</td></tr></tbody></table><a id="Ext.Element-methods"></a><h2>Public Methods</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Method</th><th class="msource-header">Defined By</th></tr><tr class="method-row expandable"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-Element"></a><b><a href="source/Element.fx.html#cls-Ext.Element">Element</a></b>( <code>String/HTMLElement element</code>, <span title="Optional" class="optional">[<code>Boolean forceNew</code>]</span> )\r
- <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>void</li></ul></div></div></div></td><td class="msource">Element</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-addClass"></a><b><a href="source/Element.style.html#method-Ext.Element-addClass">addClass</a></b>( <code>String/Array className</code> )\r
- :\r
- 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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-addClassOnClick"></a><b><a href="source/Element.style-more.html#method-Ext.Element-addClassOnClick">addClassOnClick</a></b>( <code>String className</code> )\r
- :\r
- 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 effe...</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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-addClassOnFocus"></a><b><a href="source/Element.style-more.html#method-Ext.Element-addClassOnFocus">addClassOnFocus</a></b>( <code>String className</code> )\r
- :\r
- 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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-addClassOnOver"></a><b><a href="source/Element.style-more.html#method-Ext.Element-addClassOnOver">addClassOnOver</a></b>( <code>String className</code> )\r
- :\r
- 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></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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-addKeyListener"></a><b><a href="source/Element.keys.html#method-Ext.Element-addKeyListener">addKeyListener</a></b>( <code>Number/Array/Object/String key</code>, <code>Function fn</code>, <span title="Optional" class="optional">[<code>Object scope</code>]</span> )\r
- :\r
- 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:\r
-{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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-addKeyMap"></a><b><a href="source/Element.keys.html#method-Ext.Element-addKeyMap">addKeyMap</a></b>( <code>Object config</code> )\r
- :\r
- 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 href="output/Ext.KeyMap.html" ext:cls="Ext.KeyMap">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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-addListener"></a><b><a href="source/Element.html#method-Ext.Element-addListener">addListener</a></b>( <code>String eventName</code>, <code>Function fn</code>, <span title="Optional" class="optional">[<code>Object scope</code>]</span>, <span title="Optional" class="optional">[<code>Object options</code>]</span> )\r
- :\r
- Ext.Element<div class="mdesc"><div class="short">Appends an event handler to this element. The shorthand version on is equivalent.</div><div class="long">Appends an event handler to this element. The shorthand version <a href="output/Ext.Element.html#Ext.Element-on" ext:member="on" ext:cls="Ext.Element">on</a> is equivalent.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The name of event to handle.</div></li><li><code>fn</code> : Function<div class="sub-desc">The handler function the event invokes. This function is passed\r
-the following parameters:<ul>\r
-<li><b>evt</b> : EventObject<div class="sub-desc">The <a href="output/Ext.EventObject.html" ext:cls="Ext.EventObject">EventObject</a> describing the event.</div></li>\r
-<li><b>el</b> : HtmlElement<div class="sub-desc">The DOM element which was the target of the event.\r
-Note that this may be filtered by using the <tt>delegate</tt> option.</div></li>\r
-<li><b>o</b> : Object<div class="sub-desc">The options object from the addListener call.</div></li>\r
-</ul></div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.\r
-<b>If omitted, defaults to this Element.</b>.</div></li><li><code>options</code> : Object<div class="sub-desc">(optional) An object containing handler configuration properties.\r
-This may contain any of the following properties:<ul>\r
-<li><b>scope</b> Object : <div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed.\r
-<b>If omitted, defaults to this Element.</b></div></li>\r
-<li><b>delegate</b> String: <div class="sub-desc">A simple selector to filter the target or look for a descendant of the target. See below for additional details.</div></li>\r
-<li><b>stopEvent</b> Boolean: <div class="sub-desc">True to stop the event. That is stop propagation, and prevent the default action.</div></li>\r
-<li><b>preventDefault</b> Boolean: <div class="sub-desc">True to prevent the default action</div></li>\r
-<li><b>stopPropagation</b> Boolean: <div class="sub-desc">True to prevent event propagation</div></li>\r
-<li><b>normalized</b> Boolean: <div class="sub-desc">False to pass a browser event to the handler function instead of an Ext.EventObject</div></li>\r
-<li><b>target</b> Ext.Element: <div class="sub-desc">Only call the handler if the event was fired on the target Element, <i>not</i> if the event was bubbled up from a child node.</div></li>\r
-<li><b>delay</b> Number: <div class="sub-desc">The number of milliseconds to delay the invocation of the handler after the event fires.</div></li>\r
-<li><b>single</b> Boolean: <div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>\r
-<li><b>buffer</b> Number: <div class="sub-desc">Causes the handler to be scheduled to run in an <a href="output/Ext.util.DelayedTask.html" ext:cls="Ext.util.DelayedTask">Ext.util.DelayedTask</a> delayed\r
-by the specified number of milliseconds. If the event fires again within that time, the original\r
-handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>\r
-</ul><br>\r
-<p>\r
-<b>Combining Options</b><br>\r
-In the following examples, the shorthand form <a href="output/Ext.Element.html#Ext.Element-on" ext:member="on" ext:cls="Ext.Element">on</a> is used rather than the more verbose\r
-addListener. The two are equivalent. Using the options argument, it is possible to combine different\r
-types of listeners:<br>\r
-<br>\r
-A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the\r
-options object. The options object is available as the third parameter in the handler function.<div style="margin: 5px 20px 20px;">\r
-Code:<pre><code>el.on(<em>'click'</em>, this.onClick, this, {\r
- single: true,\r
- delay: 100,\r
- stopEvent : true,\r
- forumId: 4\r
-});</code></pre></p>\r
-<p>\r
-<b>Attaching multiple handlers in 1 call</b><br>\r
-The method also allows for a single argument to be passed which is a config object containing properties\r
-which specify multiple handlers.</p>\r
-<p>\r
-Code:<pre><code>el.on({\r
- <em>'click'</em> : {\r
- fn: this.onClick,\r
- scope: this,\r
- delay: 100\r
- },\r
- <em>'mouseover'</em> : {\r
- fn: this.onMouseOver,\r
- scope: this\r
- },\r
- <em>'mouseout'</em> : {\r
- fn: this.onMouseOut,\r
- scope: this\r
- }\r
-});</code></pre>\r
-<p>\r
-Or a shorthand syntax:<br>\r
-Code:<pre><code></p>\r
-el.on({\r
- <em>'click'</em> : this.onClick,\r
- <em>'mouseover'</em> : this.onMouseOver,\r
- <em>'mouseout'</em> : this.onMouseOut,\r
- scope: this\r
-});</code></pre></p>\r
-<p><b>delegate</b></p>\r
-<p>This is a configuration option that you can pass along when registering a handler for\r
-an event to assist with event delegation. Event delegation is a technique that is used to\r
-reduce memory consumption and prevent exposure to memory-leaks. By registering an event\r
-for a container element as opposed to each element within a container. By setting this\r
-configuration option to a simple selector, the target element will be filtered to look for\r
-a descendant of the target.\r
-For example:<pre><code><i>// using this markup:\r</i>
-<div id=<em>'elId'</em>>\r
- <p id=<em>'p1'</em>>paragraph one</p>\r
- <p id=<em>'p2'</em> class=<em>'clickable'</em>>paragraph two</p>\r
- <p id=<em>'p3'</em>>paragraph three</p>\r
-</div>\r
-<i>// utilize event delegation to registering just one handler on the container element: \r</i>
-el = Ext.get(<em>'elId'</em>);\r
-el.on(\r
- <em>'click'</em>,\r
- <b>function</b>(e,t) {\r
- <i>// handle click\r</i>
- console.info(t.id); <i>// <em>'p2'</em>\r</i>
- },\r
- this,\r
- {\r
- <i>// filter the target element to be a descendant <b>with</b> the class <em>'clickable'</em>\r</i>
- delegate: <em>'.clickable'</em> \r
- }\r
-);</code></pre></p></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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-alignTo"></a><b><a href="source/Element.alignment.html#method-Ext.Element-alignTo">alignTo</a></b>( <code>Mixed element</code>, <code>String position</code>, <span title="Optional" class="optional">[<code>Array offsets</code>]</span>, <span title="Optional" class="optional">[<code>Boolean/Object animate</code>]</span> )\r
- :\r
- 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 \r
-docume...</div><div class="long">Aligns this element with another element relative to the specified anchor points. If the other element is the\r
-document it aligns it to the viewport.\r
-The position parameter is optional, and can be specified in any one of the following formats:\r
-<ul>\r
-<li><b>Blank</b>: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").</li>\r
-<li><b>One anchor (deprecated)</b>: The passed anchor position is used as the target element's anchor point.\r
-The element being aligned will position its top-left corner (tl) to that point. <i>This method has been\r
-deprecated in favor of the newer two anchor syntax below</i>.</li>\r
-<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\r
-element's anchor point, and the second value is used as the target's anchor point.</li>\r
-</ul>\r
-In addition to the anchor points, the position parameter also supports the "?" character. If "?" is passed at the end of\r
-the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to\r
-the viewport if necessary. Note that the element being aligned might be swapped to align to a different position than\r
-that specified in order to enforce the viewport constraints.\r
-Following are all of the supported anchor positions:\r
-<pre>\r
-Value Description\r
------ -----------------------------\r
-tl The top left corner (default)\r
-t The center of the top edge\r
-tr The top right corner\r
-l The center of the left edge\r
-c In the center of the element\r
-r The center of the right edge\r
-bl The bottom left corner\r
-b The center of the bottom edge\r
-br The bottom right corner\r
-</pre>\r
-Example Usage:\r
-<pre><code><i>// align el to other-el using the <b>default</b> positioning (<em>"tl-bl"</em>, non-constrained)\r</i>
-el.alignTo(<em>"other-el"</em>);\r
-\r
-<i>// align the top left corner of el <b>with</b> the top right corner of other-el (constrained to viewport)\r</i>
-el.alignTo(<em>"other-el"</em>, <em>"tr?"</em>);\r
-\r
-<i>// align the bottom right corner of el <b>with</b> the center left edge of other-el\r</i>
-el.alignTo(<em>"other-el"</em>, <em>"br-l?"</em>);\r
-\r
-<i>// align the center of el <b>with</b> the bottom left corner of other-el and\r</i>
-<i>// adjust the x position by -6 pixels (and the y position by 0)\r</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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-anchorTo"></a><b><a href="source/Element.alignment.html#method-Ext.Element-anchorTo">anchorTo</a></b>( <code>Mixed element</code>, <code>String position</code>, <span title="Optional" class="optional">[<code>Array offsets</code>]</span>, <span title="Optional" class="optional">[<code>Boolean/Object animate</code>]</span>, <span title="Optional" class="optional">[<code>Boolean/Number monitorScroll</code>]</span>, <code>Function callback</code> )\r
- :\r
- 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\r
-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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-animate"></a><b><a href="source/Element.fx.html#method-Ext.Element-animate">animate</a></b>( <code>Object args</code>, <span title="Optional" class="optional">[<code>Float duration</code>]</span>, <span title="Optional" class="optional">[<code>Function onComplete</code>]</span>, <span title="Optional" class="optional">[<code>String easing</code>]</span>, <span title="Optional" class="optional">[<code>String animType</code>]</span> )\r
- :\r
- Ext.Element<div class="mdesc"><div class="short">Perform custom animation on this element. \r
-<ul class="mdetail-params"> \r
-Animation Properties \r
-The Animation Control O...</div><div class="long">Perform custom animation on this element.\r
-<div><ul class="mdetail-params">\r
-<li><u>Animation Properties</u></li>\r
-<p>The Animation Control Object enables gradual transitions for any member of an\r
-element's style object that takes a numeric value including but not limited to\r
-these properties:</p><div><ul class="mdetail-params">\r
-<li><tt>bottom, top, left, right</tt></li>\r
-<li><tt>height, width</tt></li>\r
-<li><tt>margin, padding</tt></li>\r
-<li><tt>borderWidth</tt></li>\r
-<li><tt>opacity</tt></li>\r
-<li><tt>fontSize</tt></li>\r
-<li><tt>lineHeight</tt></li>\r
-</ul></div>\r
-<li><u>Animation Property Attributes</u></li>\r
-<p>Each Animation Property is a config object with optional properties:</p>\r
-<div><ul class="mdetail-params">\r
-<li><tt>by</tt>* : relative change - start at current value, change by this value</li>\r
-<li><tt>from</tt> : ignore current value, start from this value</li>\r
-<li><tt>to</tt>* : start at current value, go to this value</li>\r
-<li><tt>unit</tt> : any allowable unit specification</li>\r
-<p>* do not specify both <tt>to</tt> and <tt>by</tt> for an animation property</p>\r
-</ul></div>\r
-<li><u>Animation Types</u></li>\r
-<p>The supported animation types:</p><div><ul class="mdetail-params">\r
-<li><tt>'run'</tt> : Default\r
-<pre><code><b>var</b> el = Ext.get(<em>'complexEl'</em>);\r
-el.animate(\r
- <i>// animation control object\r</i>
- {\r
- borderWidth: {to: 3, from: 0},\r
- opacity: {to: .3, from: 1},\r
- height: {to: 50, from: el.getHeight()},\r
- width: {to: 300, from: el.getWidth()},\r
- top : {by: - 100, unit: <em>'px'</em>},\r
- },\r
- 0.35, <i>// animation duration\r</i>
- null, <i>// callback\r</i>
- <em>'easeOut'</em>, <i>// easing method\r</i>
- <em>'run'</em> <i>// animation type (<em>'run'</em>,<em>'color'</em>,<em>'motion'</em>,<em>'scroll'</em>) \r</i>
-);</code></pre>\r
-</li>\r
-<li><tt>'color'</tt>\r
-<p>Animates transition of background, text, or border colors.</p>\r
-<pre><code>el.animate(\r
- <i>// animation control object\r</i>
- {\r
- color: { to: <em>'#06e'</em> },\r
- backgroundColor: { to: <em>'#e06'</em> }\r
- },\r
- 0.35, <i>// animation duration\r</i>
- null, <i>// callback\r</i>
- <em>'easeOut'</em>, <i>// easing method\r</i>
- <em>'color'</em> <i>// animation type (<em>'run'</em>,<em>'color'</em>,<em>'motion'</em>,<em>'scroll'</em>) \r</i>
-);</code></pre> \r
-</li>\r
-<li><tt>'motion'</tt>\r
-<p>Animates the motion of an element to/from specific points using optional bezier\r
-way points during transit.</p>\r
-<pre><code>el.animate(\r
- <i>// animation control object\r</i>
- {\r
- borderWidth: {to: 3, from: 0},\r
- opacity: {to: .3, from: 1},\r
- height: {to: 50, from: el.getHeight()},\r
- width: {to: 300, from: el.getWidth()},\r
- top : {by: - 100, unit: <em>'px'</em>},\r
- points: {\r
- to: [50, 100], <i>// go to this point\r</i>
- control: [ <i>// optional bezier way points\r</i>
- [ 600, 800],\r
- [-100, 200]\r
- ]\r
- }\r
- },\r
- 3000, <i>// animation duration (milliseconds!)\r</i>
- null, <i>// callback\r</i>
- <em>'easeOut'</em>, <i>// easing method\r</i>
- <em>'motion'</em> <i>// animation type (<em>'run'</em>,<em>'color'</em>,<em>'motion'</em>,<em>'scroll'</em>) \r</i>
-);</code></pre> \r
-</li>\r
-<li><tt>'scroll'</tt>\r
-<p>Animate horizontal or vertical scrolling of an overflowing page element.</p>\r
-<pre><code>el.animate(\r
- <i>// animation control object\r</i>
- {\r
- scroll: {to: [400, 300]}\r
- },\r
- 0.35, <i>// animation duration\r</i>
- null, <i>// callback\r</i>
- <em>'easeOut'</em>, <i>// easing method\r</i>
- <em>'scroll'</em> <i>// animation type (<em>'run'</em>,<em>'color'</em>,<em>'motion'</em>,<em>'scroll'</em>) \r</i>
-);</code></pre> \r
-</li>\r
-</ul></div>\r
-</ul></div><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 <tt>.35</tt>)</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) <a href="output/Ext.Fx.html#Ext.Fx-easing" ext:member="easing" ext:cls="Ext.Fx">Ext.Fx.easing</a> method to use (defaults to <tt>'easeOut'</tt>)</div></li><li><code>animType</code> : String<div class="sub-desc">(optional) <tt>'run'</tt> is the default. Can also be <tt>'color'</tt>,\r
-<tt>'motion'</tt>, or <tt>'scroll'</tt></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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-appendChild"></a><b><a href="source/Element.insertion.html#method-Ext.Element-appendChild">appendChild</a></b>( <code>String/HTMLElement/Array/Element/CompositeElement el</code> )\r
- :\r
- 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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-appendTo"></a><b><a href="source/Element.insertion.html#method-Ext.Element-appendTo">appendTo</a></b>( <code>Mixed el</code> )\r
- :\r
- 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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-applyStyles"></a><b><a href="source/Element.style-more.html#method-Ext.Element-applyStyles">applyStyles</a></b>( <code>String/Object/Function styles</code> )\r
- :\r
- Ext.Element<div class="mdesc"><div class="short">More flexible version of setStyle for setting style properties.</div><div class="long">More flexible version of <a href="output/Ext.Element.html#Ext.Element-setStyle" ext:member="setStyle" ext:cls="Ext.Element">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\r
-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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-autoHeight"></a><b><a href="source/Element.legacy.html#method-Ext.Element-autoHeight">autoHeight</a></b>( <span title="Optional" class="optional">[<code>Boolean animate</code>]</span>, <span title="Optional" class="optional">[<code>Float duration</code>]</span>, <span title="Optional" class="optional">[<code>Function onComplete</code>]</span>, <span title="Optional" class="optional">[<code>String easing</code>]</span> )\r
- :\r
- 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 \r
-the new he...</div><div class="long">Measures the element's content height and updates height to match. Note: this function uses setTimeout so\r
-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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-blur"></a><b><a href="source/Element.html#method-Ext.Element-blur">blur</a></b>()\r
- :\r
- 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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-boxWrap"></a><b><a href="source/Element.style-more.html#method-Ext.Element-boxWrap">boxWrap</a></b>( <span title="Optional" class="optional">[<code>String class</code>]</span> )\r
- :\r
- Ext.Element<div class="mdesc"><div class="short">Wraps the specified element with a special 9 element markup/CSS block that renders by default as \r
-a gray container wi...</div><div class="long"><p>Wraps the specified element with a special 9 element markup/CSS block that renders by default as\r
-a gray container with a gradient background, rounded corners and a 4-way shadow.</p>\r
-<p>This special markup is used throughout Ext when box wrapping elements (<a href="output/Ext.Button.html" ext:cls="Ext.Button">Ext.Button</a>,\r
-<a href="output/Ext.Panel.html" ext:cls="Ext.Panel">Ext.Panel</a> when <tt><a href="output/Ext.Panel.html#Ext.Panel-frame" ext:member="frame" ext:cls="Ext.Panel">frame=true</a></tt>, <a href="output/Ext.Window.html" ext:cls="Ext.Window">Ext.Window</a>). The markup\r
-is of this form:</p>\r
-<pre><code>Ext.Element.boxMarkup =\r
- '<div class=<em>"{0}-tl"</em>><div class=<em>"{0}-tr"</em>><div class=<em>"{0}-tc"</em>></div></div></div>\r
- <div class=<em>"{0}-ml"</em>><div class=<em>"{0}-mr"</em>><div class=<em>"{0}-mc"</em>></div></div></div>\r
- <div class=<em>"{0}-bl"</em>><div class=<em>"{0}-br"</em>><div class=<em>"{0}-bc"</em>></div></div></div>';</code></pre>\r
-<p>Example usage:</p>\r
-<pre><code><i>// Basic box wrap\r</i>
-Ext.get(<em>"foo"</em>).boxWrap();\r
-\r
-<i>// You can also add a custom class and use CSS inheritance rules to customize the box look.\r</i>
-<i>// <em>'x-box-blue'</em> is a built-<b>in</b> alternative -- look at the related CSS definitions as an example\r</i>
-<i>// <b>for</b> how to create a custom box wrap style.\r</i>
-Ext.get(<em>"foo"</em>).boxWrap().addClass(<em>"x-box-blue"</em>);</code></pre><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\r
-(defaults to <tt>'x-box'</tt>). Note that there are a number of CSS rules that are dependent on\r
-this name to make the overall effect work, so if you supply an alternate base class, make sure you\r
-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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-center"></a><b><a href="source/Element.alignment.html#method-Ext.Element-center">center</a></b>( <span title="Optional" class="optional">[<code>Mixed centerIn</code>]</span> )\r
- :\r
- 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>void</li></ul></div></div></div></td><td class="msource">Element</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-child"></a><b><a href="source/Element.traversal.html#method-Ext.Element-child">child</a></b>( <code>String selector</code>, <span title="Optional" class="optional">[<code>Boolean returnDom</code>]</span> )\r
- :\r
- 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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-clean"></a><b><a href="source/Element-more.html#method-Ext.Element-clean">clean</a></b>( <span title="Optional" class="optional">[<code>Boolean forceReclean</code>]</span> )\r
- :\r
- 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\r
-keeps track if it has been cleaned already so\r
-you can call this over and over. However, if you update the element and\r
-need to force a reclean, you can pass true.</div></li></ul><strong>Returns:</strong><ul><li>void</li></ul></div></div></div></td><td class="msource">Element</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-clearOpacity"></a><b><a href="source/Element.style.html#method-Ext.Element-clearOpacity">clearOpacity</a></b>()\r
- :\r
- 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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-clearPositioning"></a><b><a href="source/Element.position.html#method-Ext.Element-clearPositioning">clearPositioning</a></b>( <span title="Optional" class="optional">[<code>String value</code>]</span> )\r
- :\r
- 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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-clip"></a><b><a href="source/Element.style.html#method-Ext.Element-clip">clip</a></b>()\r
- :\r
- Ext.Element<div class="mdesc"><div class="short">Store the current overflow setting and clip overflow on the element - use unclip to remove</div><div class="long">Store the current overflow setting and clip overflow on the element - use <tt><a href="output/Ext.Element.html#Ext.Element-unclip" ext:member="unclip" ext:cls="Ext.Element">unclip</a></tt> 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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-contains"></a><b><a href="source/Element.html#method-Ext.Element-contains">contains</a></b>( <code>HTMLElement/String el</code> )\r
- :\r
- 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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-createChild"></a><b><a href="source/Element.insertion.html#method-Ext.Element-createChild">createChild</a></b>( <code>Object config</code>, <span title="Optional" class="optional">[<code>HTMLElement insertBefore</code>]</span>, <span title="Optional" class="optional">[<code>Boolean returnDom</code>]</span> )\r
- :\r
- 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\r
-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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-createProxy"></a><b><a href="source/Element-more.html#method-Ext.Element-createProxy">createProxy</a></b>( <code>String/Object config</code>, <span title="Optional" class="optional">[<code>String/HTMLElement renderTo</code>]</span>, <span title="Optional" class="optional">[<code>Boolean matchBox</code>]</span> )\r
- :\r
- 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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-createShim"></a><b><a href="source/Element.fx-more.html#method-Ext.Element-createShim">createShim</a></b>()\r
- :\r
- Ext.Element<div class="mdesc"><div class="short">Creates an iframe shim for this element to keep selects and other windowed objects from \r
-showing through.</div><div class="long">Creates an iframe shim for this element to keep selects and other windowed objects from\r
-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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-down"></a><b><a href="source/Element.traversal.html#method-Ext.Element-down">down</a></b>( <code>String selector</code>, <span title="Optional" class="optional">[<code>Boolean returnDom</code>]</span> )\r
- :\r
- 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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-enableDisplayMode"></a><b><a href="source/Element.fx-more.html#method-Ext.Element-enableDisplayMode">enableDisplayMode</a></b>( <span title="Optional" class="optional">[<code>String display</code>]</span> )\r
- :\r
- 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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-findParent"></a><b><a href="source/Element.traversal.html#method-Ext.Element-findParent">findParent</a></b>( <code>String selector</code>, <span title="Optional" class="optional">[<code>Number/Mixed maxDepth</code>]</span>, <span title="Optional" class="optional">[<code>Boolean returnEl</code>]</span> )\r
- :\r
- 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 50 || 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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-findParentNode"></a><b><a href="source/Element.traversal.html#method-Ext.Element-findParentNode">findParentNode</a></b>( <code>String selector</code>, <span title="Optional" class="optional">[<code>Number/Mixed maxDepth</code>]</span>, <span title="Optional" class="optional">[<code>Boolean returnEl</code>]</span> )\r
- :\r
- 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\r
- 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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-first"></a><b><a href="source/Element.traversal.html#method-Ext.Element-first">first</a></b>( <span title="Optional" class="optional">[<code>String selector</code>]</span>, <span title="Optional" class="optional">[<code>Boolean returnDom</code>]</span> )\r
- :\r
- 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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-fly"></a><b><a href="source/Element.html#method-Ext.Element-fly">fly</a></b>( <code>String/HTMLElement el</code>, <span title="Optional" class="optional">[<code>String named</code>]</span> )\r
- :\r
- Element<div class="mdesc"><div class="short">Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to t...</div><div class="long"><p>Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -\r
-the dom node can be overwritten by other code. Shorthand of <a href="output/Ext.Element.html#Ext.Element-fly" ext:member="fly" ext:cls="Ext.Element">Ext.Element.fly</a></p>\r
-<p>Use this to make one-time references to DOM elements which are not going to be accessed again either by\r
-application code, or by Ext's classes. If accessing an element which will be processed regularly, then <a href="output/Ext.html#Ext-get" ext:member="get" ext:cls="Ext">Ext.get</a>\r
-will be more appropriate to take advantage of the caching provided by the Ext.Element class.</p><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\r
-(e.g. internally Ext uses "_global")</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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-focus"></a><b><a href="source/Element.html#method-Ext.Element-focus">focus</a></b>( <span title="Optional" class="optional">[<code>Number defer</code>]</span> )\r
- :\r
- 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><code>defer</code> : Number<div class="sub-desc">(optional) Milliseconds to defer the focus</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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-get"></a><b><a href="source/Element.html#method-Ext.Element-get">get</a></b>( <code>Mixed el</code> )\r
- :\r
- Element<div class="mdesc"><div class="short"><static> Retrieves Ext.Element objects. \r
-This method does not retrieve Components. This method \r
-retrieves Ext.Element objects ...</div><div class="long"><static> Retrieves Ext.Element objects.\r
-<p><b>This method does not retrieve <a href="output/Ext.Component.html" ext:cls="Ext.Component">Component</a>s.</b> This method\r
-retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by\r
-its ID, use <a href="output/Ext.ComponentMgr.html#Ext.ComponentMgr-get" ext:member="get" ext:cls="Ext.ComponentMgr">Ext.ComponentMgr.get</a>.</p>\r
-<p>Uses simple caching to consistently return the same object. Automatically fixes if an\r
-object was recreated with the same id via AJAX or DOM.</p><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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-getAlignToXY"></a><b><a href="source/Element.alignment.html#method-Ext.Element-getAlignToXY">getAlignToXY</a></b>( <code>Mixed element</code>, <code>String position</code>, <span title="Optional" class="optional">[<code>Array offsets</code>]</span> )\r
- :\r
- 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 \r
-supported posi...</div><div class="long">Gets the x,y coordinates to align this element with another element. See <a href="output/Ext.Element.html#Ext.Element-alignTo" ext:member="alignTo" ext:cls="Ext.Element">alignTo</a> for more info on the\r
-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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-getAnchorXY"></a><b><a href="source/Element.alignment.html#method-Ext.Element-getAnchorXY">getAnchorXY</a></b>( <span title="Optional" class="optional">[<code>String anchor</code>]</span>, <span title="Optional" class="optional">[<code>Boolean local</code>]</span>, <span title="Optional" class="optional">[<code>Object size</code>]</span> )\r
- :\r
- Array<div class="mdesc"><div class="short">Gets the x,y coordinates specified by the anchor position on the element.</div><div class="long">Gets the x,y coordinates specified by the anchor position on the element.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>anchor</code> : String<div class="sub-desc">(optional) The specified anchor position (defaults to "c"). See <a href="output/Ext.Element.html#Ext.Element-alignTo" ext:member="alignTo" ext:cls="Ext.Element">alignTo</a>\r
-for details on supported anchor positions.</div></li><li><code>local</code> : Boolean<div class="sub-desc">(optional) True to get the local (element top/left-relative) anchor position instead\r
-of page coordinates</div></li><li><code>size</code> : Object<div class="sub-desc">(optional) An object containing the size to use for calculating anchor position\r
-{width: (target width), height: (target height)} (defaults to the element's current size)</div></li></ul><strong>Returns:</strong><ul><li><code>Array</code><div class="sub-desc">[x, y] An array containing the element's x and y coordinates</div></li></ul></div></div></div></td><td class="msource">Element</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-getAttribute"></a><b><a href="source/Element.html#method-Ext.Element-getAttribute">getAttribute</a></b>( <code>String name</code>, <span title="Optional" class="optional">[<code>String namespace</code>]</span> )\r
- :\r
- String<div class="mdesc"><div class="short">Returns the value of an attribute from the element's underlying DOM node.</div><div class="long">Returns the value of an attribute from the element's underlying DOM node.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>name</code> : String<div class="sub-desc">The attribute name</div></li><li><code>namespace</code> : String<div class="sub-desc">(optional) The namespace in which to look for the attribute</div></li></ul><strong>Returns:</strong><ul><li><code>String</code><div class="sub-desc">The attribute value</div></li></ul></div></div></div></td><td class="msource">Element</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-getAttributeNS"></a><b><a href="source/Element.html#method-Ext.Element-getAttributeNS">getAttributeNS</a></b>( <code>String namespace</code>, <code>String name</code> )\r
- :\r
- String<div class="mdesc"><div class="short">Returns the value of a namespaced attribute from the element's underlying DOM node.</div><div class="long">Returns the value of a namespaced attribute from the element's underlying DOM node.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>namespace</code> : String<div class="sub-desc">The namespace in which to look for the attribute</div></li><li><code>name</code> : String<div class="sub-desc">The attribute name</div></li></ul><strong>Returns:</strong><ul><li><code>String</code><div class="sub-desc">The attribute value</div></li></ul></div></div></div></td><td class="msource">Element</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-getBorderWidth"></a><b><a href="source/Element.style.html#method-Ext.Element-getBorderWidth">getBorderWidth</a></b>( <code>String side</code> )\r
- :\r
+<div class="body-wrap" xmlns:ext="http://www.extjs.com"><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 <a href="source/Element.style.html#cls-Ext.Element">Ext.Element</a></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/Element.style.html#cls-Ext.Element">Element.style.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/Element.style.html#cls-Ext.Element">Element</a></td></tr><tr><td class="label">Subclasses:</td><td class="hd-info"><a href="output/Ext.Layer.html" ext:cls="Ext.Layer">Layer</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info">Object</td></tr></table><div class="description"><p>Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.</p>
+<p>All instances of this class inherit the methods of <a href="output/Ext.Fx.html" ext:cls="Ext.Fx">Ext.Fx</a> making visual effects easily available to all DOM elements.</p>
+<p>Note that the events documented in this class are not Ext events, they encapsulate browser events. To
+access the underlying browser event, see <a href="output/Ext.EventObject.html#Ext.EventObject-browserEvent" ext:member="browserEvent" ext:cls="Ext.EventObject">Ext.EventObject.browserEvent</a>. Some older
+browsers may not support the full range of events. Which events are supported is beyond the control of ExtJs.</p>
+Usage:<br>
+<pre><code><i>// by id</i>
+<b>var</b> el = Ext.get(<em>"my-div"</em>);
+
+<i>// by DOM element reference</i>
+<b>var</b> el = Ext.get(myDivElement);</code></pre>
+<b>Animations</b><br />
+<p>When an element is manipulated, by default there is no animation.</p>
+<pre><code><b>var</b> el = Ext.get(<em>"my-div"</em>);
+
+<i>// no animation</i>
+el.setWidth(100);</code></pre>
+<p>Many of the functions for manipulating an element have an optional "animate" parameter. This
+parameter can be specified as boolean (<tt>true</tt>) for default animation effects.</p>
+<pre><code><i>// <b>default</b> animation</i>
+el.setWidth(100, true);</code></pre>
+<p>To configure the effects, an object literal with animation options to use as the Element animation
+configuration object can also be specified. Note that the supported Element animation configuration
+options are a subset of the <a href="output/Ext.Fx.html" ext:cls="Ext.Fx">Ext.Fx</a> animation options specific to Fx effects. The supported
+Element animation configuration options are:</p>
+<pre>
+Option Default Description
+--------- -------- ---------------------------------------------
+<a href="output/Ext.Fx.html#Ext.Fx-duration" ext:member="duration" ext:cls="Ext.Fx">duration</a> .35 The duration of the animation in seconds
+<a href="output/Ext.Fx.html#Ext.Fx-easing" ext:member="easing" ext:cls="Ext.Fx">easing</a> easeOut The easing method
+<a href="output/Ext.Fx.html#Ext.Fx-callback" ext:member="callback" ext:cls="Ext.Fx">callback</a> none A function to execute when the anim completes
+<a href="output/Ext.Fx.html#Ext.Fx-scope" ext:member="scope" ext:cls="Ext.Fx">scope</a> this The scope (this) of the callback function
+</pre>
+<pre><code><i>// Element animation options object</i>
+<b>var</b> opt = {
+ <a href="output/Ext.Fx.html#Ext.Fx-duration" ext:member="duration" ext:cls="Ext.Fx">duration</a>: 1,
+ <a href="output/Ext.Fx.html#Ext.Fx-easing" ext:member="easing" ext:cls="Ext.Fx">easing</a>: <em>'elasticIn'</em>,
+ <a href="output/Ext.Fx.html#Ext.Fx-callback" ext:member="callback" ext:cls="Ext.Fx">callback</a>: this.foo,
+ <a href="output/Ext.Fx.html#Ext.Fx-scope" ext:member="scope" ext:cls="Ext.Fx">scope</a>: this
+};
+<i>// animation <b>with</b> some options set</i>
+el.setWidth(100, opt);</code></pre>
+<p>The Element animation object being used for the animation will be set on the options
+object as "anim", which allows you to stop or manipulate the animation. Here is an example:</p>
+<pre><code><i>// using the <em>"anim"</em> property to get the Anim object</i>
+<b>if</b>(opt.anim.isAnimated()){
+ opt.anim.stop();
+}</code></pre>
+<p>Also see the <tt><a href="output/Ext.Element.html#Ext.Element-animate" ext:member="animate" ext:cls="Ext.Element">animate</a></tt> method for another animation technique.</p>
+<p><b> Composite (Collections of) Elements</b></p>
+<p>For working with collections of Elements, see <a href="output/Ext.CompositeElement.html" ext:cls="Ext.CompositeElement">Ext.CompositeElement</a></p></div><div class="hr"></div><a id="Ext.Element-props"></a><h2>Public Properties</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Property</th><th class="msource-header">Defined By</th></tr><tr class="property-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-DISPLAY"></a><b><a href="source/Element.fx.html#prop-Ext.Element-DISPLAY">DISPLAY</a></b> : Number<div class="mdesc">Visibility mode constant for use with <a href="output/Ext.Element.html#Ext.Element-setVisibilityMode" ext:member="setVisibilityMode" ext:cls="Ext.Element">setVisibilityMode</a>. Use display to hide element</div></td><td class="msource">Element</td></tr><tr class="property-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-VISIBILITY"></a><b><a href="source/Element.fx.html#prop-Ext.Element-VISIBILITY">VISIBILITY</a></b> : Number<div class="mdesc">Visibility mode constant for use with <a href="output/Ext.Element.html#Ext.Element-setVisibilityMode" ext:member="setVisibilityMode" ext:cls="Ext.Element">setVisibilityMode</a>. Use visibility to hide element</div></td><td class="msource">Element</td></tr><tr class="property-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-autoBoxAdjust"></a><b><a href="source/Element.html#prop-Ext.Element-autoBoxAdjust">autoBoxAdjust</a></b> : Object<div class="mdesc">true to automatically adjust width and height settings for box-model issues (default to true)</div></td><td class="msource">Element</td></tr><tr class="property-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-defaultUnit"></a><b><a href="source/Element.html#prop-Ext.Element-defaultUnit">defaultUnit</a></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 "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-dom"></a><b><a href="source/Element.html#prop-Ext.Element-dom">dom</a></b> : HTMLElement<div class="mdesc">The DOM element</div></td><td class="msource">Element</td></tr><tr class="property-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-id"></a><b><a href="source/Element.html#prop-Ext.Element-id">id</a></b> : String<div class="mdesc">The DOM element ID</div></td><td class="msource">Element</td></tr><tr class="property-row "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-originalDisplay"></a><b><a href="source/Element.fx.html#prop-Ext.Element-originalDisplay">originalDisplay</a></b> : String<div class="mdesc">The element's default display mode (defaults to "")</div></td><td class="msource">Element</td></tr></tbody></table><a id="Ext.Element-methods"></a><h2>Public Methods</h2><table cellspacing="0" class="member-table"><tbody><tr><th colspan="2" class="sig-header">Method</th><th class="msource-header">Defined By</th></tr><tr class="method-row expandable"><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-Element"></a><b><a href="source/Element.style.html#cls-Ext.Element">Element</a></b>( <code>String/HTMLElement element</code>, <span title="Optional" class="optional">[<code>Boolean forceNew</code>]</span> )
+ <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>void</li></ul></div></div></div></td><td class="msource">Element</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-addClass"></a><b><a href="source/Element.style.html#method-Ext.Element-addClass">addClass</a></b>( <code>String/Array className</code> )
+ :
+ 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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-addClassOnClick"></a><b><a href="source/Element.style-more.html#method-Ext.Element-addClassOnClick">addClassOnClick</a></b>( <code>String className</code> )
+ :
+ 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 effe...</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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-addClassOnFocus"></a><b><a href="source/Element.style-more.html#method-Ext.Element-addClassOnFocus">addClassOnFocus</a></b>( <code>String className</code> )
+ :
+ 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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-addClassOnOver"></a><b><a href="source/Element.style-more.html#method-Ext.Element-addClassOnOver">addClassOnOver</a></b>( <code>String className</code> )
+ :
+ 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></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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-addKeyListener"></a><b><a href="source/Element.keys.html#method-Ext.Element-addKeyListener">addKeyListener</a></b>( <code>Number/Array/Object/String key</code>, <code>Function fn</code>, <span title="Optional" class="optional">[<code>Object scope</code>]</span> )
+ :
+ 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:
+<code>{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}</code></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 (<code>this</code> reference) in which the specified function is executed. Defaults to this Element.</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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-addKeyMap"></a><b><a href="source/Element.keys.html#method-Ext.Element-addKeyMap">addKeyMap</a></b>( <code>Object config</code> )
+ :
+ 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 href="output/Ext.KeyMap.html" ext:cls="Ext.KeyMap">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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-addListener"></a><b><a href="source/Element.html#method-Ext.Element-addListener">addListener</a></b>( <code>String eventName</code>, <code>Function fn</code>, <span title="Optional" class="optional">[<code>Object scope</code>]</span>, <span title="Optional" class="optional">[<code>Object options</code>]</span> )
+ :
+ Ext.Element<div class="mdesc"><div class="short">Appends an event handler to this element. The shorthand version on is equivalent.</div><div class="long">Appends an event handler to this element. The shorthand version <a href="output/Ext.Element.html#Ext.Element-on" ext:member="on" ext:cls="Ext.Element">on</a> is equivalent.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>eventName</code> : String<div class="sub-desc">The name of event to handle.</div></li><li><code>fn</code> : Function<div class="sub-desc">The handler function the event invokes. This function is passed
+the following parameters:<ul>
+<li><b>evt</b> : EventObject<div class="sub-desc">The <a href="output/Ext.EventObject.html" ext:cls="Ext.EventObject">EventObject</a> describing the event.</div></li>
+<li><b>el</b> : HtmlElement<div class="sub-desc">The DOM element which was the target of the event.
+Note that this may be filtered by using the <tt>delegate</tt> option.</div></li>
+<li><b>o</b> : Object<div class="sub-desc">The options object from the addListener call.</div></li>
+</ul></div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
+<b>If omitted, defaults to this Element.</b>.</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><b>scope</b> Object : <div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed.
+<b>If omitted, defaults to this Element.</b></div></li>
+<li><b>delegate</b> String: <div class="sub-desc">A simple selector to filter the target or look for a descendant of the target. See below for additional details.</div></li>
+<li><b>stopEvent</b> Boolean: <div class="sub-desc">True to stop the event. That is stop propagation, and prevent the default action.</div></li>
+<li><b>preventDefault</b> Boolean: <div class="sub-desc">True to prevent the default action</div></li>
+<li><b>stopPropagation</b> Boolean: <div class="sub-desc">True to prevent event propagation</div></li>
+<li><b>normalized</b> Boolean: <div class="sub-desc">False to pass a browser event to the handler function instead of an Ext.EventObject</div></li>
+<li><b>target</b> Ext.Element: <div class="sub-desc">Only call the handler if the event was fired on the target Element, <i>not</i> if the event was bubbled up from a child node.</div></li>
+<li><b>delay</b> Number: <div class="sub-desc">The number of milliseconds to delay the invocation of the handler after the event fires.</div></li>
+<li><b>single</b> Boolean: <div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>
+<li><b>buffer</b> Number: <div class="sub-desc">Causes the handler to be scheduled to run in an <a href="output/Ext.util.DelayedTask.html" ext:cls="Ext.util.DelayedTask">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.</div></li>
+</ul><br>
+<p>
+<b>Combining Options</b><br>
+In the following examples, the shorthand form <a href="output/Ext.Element.html#Ext.Element-on" ext:member="on" ext:cls="Ext.Element">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 delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the
+options object. The options object is available as the third parameter in the handler function.<div style="margin: 5px 20px 20px;">
+Code:<pre><code>el.on(<em>'click'</em>, this.onClick, this, {
+ single: true,
+ delay: 100,
+ stopEvent : true,
+ forumId: 4
+});</code></pre></p>
+<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>
+<p>
+Code:<pre><code>el.on({
+ <em>'click'</em> : {
+ fn: this.onClick,
+ scope: this,
+ delay: 100
+ },
+ <em>'mouseover'</em> : {
+ fn: this.onMouseOver,
+ scope: this
+ },
+ <em>'mouseout'</em> : {
+ fn: this.onMouseOut,
+ scope: this
+ }
+});</code></pre>
+<p>
+Or a shorthand syntax:<br>
+Code:<pre><code></p>
+el.on({
+ <em>'click'</em> : this.onClick,
+ <em>'mouseover'</em> : this.onMouseOver,
+ <em>'mouseout'</em> : this.onMouseOut,
+ scope: this
+});</code></pre></p>
+<p><b>delegate</b></p>
+<p>This is a configuration option that you can pass along when registering a handler for
+an event to assist with event delegation. Event delegation is a technique that is used to
+reduce memory consumption and prevent exposure to memory-leaks. By registering an event
+for a container element as opposed to each element within a container. By setting this
+configuration option to a simple selector, the target element will be filtered to look for
+a descendant of the target.
+For example:<pre><code><i>// using this markup:</i>
+<div id=<em>'elId'</em>>
+ <p id=<em>'p1'</em>>paragraph one</p>
+ <p id=<em>'p2'</em> class=<em>'clickable'</em>>paragraph two</p>
+ <p id=<em>'p3'</em>>paragraph three</p>
+</div>
+<i>// utilize event delegation to registering just one handler on the container element:</i>
+el = Ext.get(<em>'elId'</em>);
+el.on(
+ <em>'click'</em>,
+ <b>function</b>(e,t) {
+ <i>// handle click</i>
+ console.info(t.id); <i>// <em>'p2'</em></i>
+ },
+ this,
+ {
+ <i>// filter the target element to be a descendant <b>with</b> the class <em>'clickable'</em></i>
+ delegate: <em>'.clickable'</em>
+ }
+);</code></pre></p></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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-alignTo"></a><b><a href="source/Element.alignment.html#method-Ext.Element-alignTo">alignTo</a></b>( <code>Mixed element</code>, <code>String position</code>, <span title="Optional" class="optional">[<code>Array offsets</code>]</span>, <span title="Optional" class="optional">[<code>Boolean/Object animate</code>]</span> )
+ :
+ 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">(optional, defaults to "tl-bl?") 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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-anchorTo"></a><b><a href="source/Element.alignment.html#method-Ext.Element-anchorTo">anchorTo</a></b>( <code>Mixed element</code>, <code>String position</code>, <span title="Optional" class="optional">[<code>Array offsets</code>]</span>, <span title="Optional" class="optional">[<code>Boolean/Object animate</code>]</span>, <span title="Optional" class="optional">[<code>Boolean/Number monitorScroll</code>]</span>, <code>Function callback</code> )
+ :
+ 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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-animate"></a><b><a href="source/Element.fx.html#method-Ext.Element-animate">animate</a></b>( <code>Object args</code>, <span title="Optional" class="optional">[<code>Float duration</code>]</span>, <span title="Optional" class="optional">[<code>Function onComplete</code>]</span>, <span title="Optional" class="optional">[<code>String easing</code>]</span>, <span title="Optional" class="optional">[<code>String animType</code>]</span> )
+ :
+ Ext.Element<div class="mdesc"><div class="short">Perform custom animation on this element.
+<ul class="mdetail-params">
+Animation Properties
+The Animation Control Obje...</div><div class="long">Perform custom animation on this element.
+<div><ul class="mdetail-params">
+<li><u>Animation Properties</u></li>
+<p>The Animation Control Object enables gradual transitions for any member of an
+element's style object that takes a numeric value including but not limited to
+these properties:</p><div><ul class="mdetail-params">
+<li><tt>bottom, top, left, right</tt></li>
+<li><tt>height, width</tt></li>
+<li><tt>margin, padding</tt></li>
+<li><tt>borderWidth</tt></li>
+<li><tt>opacity</tt></li>
+<li><tt>fontSize</tt></li>
+<li><tt>lineHeight</tt></li>
+</ul></div>
+<li><u>Animation Property Attributes</u></li>
+<p>Each Animation Property is a config object with optional properties:</p>
+<div><ul class="mdetail-params">
+<li><tt>by</tt>* : relative change - start at current value, change by this value</li>
+<li><tt>from</tt> : ignore current value, start from this value</li>
+<li><tt>to</tt>* : start at current value, go to this value</li>
+<li><tt>unit</tt> : any allowable unit specification</li>
+<p>* do not specify both <tt>to</tt> and <tt>by</tt> for an animation property</p>
+</ul></div>
+<li><u>Animation Types</u></li>
+<p>The supported animation types:</p><div><ul class="mdetail-params">
+<li><tt>'run'</tt> : Default
+<pre><code><b>var</b> el = Ext.get(<em>'complexEl'</em>);
+el.animate(
+ <i>// animation control object</i>
+ {
+ borderWidth: {to: 3, from: 0},
+ opacity: {to: .3, from: 1},
+ height: {to: 50, from: el.getHeight()},
+ width: {to: 300, from: el.getWidth()},
+ top : {by: - 100, unit: <em>'px'</em>},
+ },
+ 0.35, <i>// animation duration</i>
+ null, <i>// callback</i>
+ <em>'easeOut'</em>, <i>// easing method</i>
+ <em>'run'</em> <i>// animation type (<em>'run'</em>,<em>'color'</em>,<em>'motion'</em>,<em>'scroll'</em>)</i>
+);</code></pre>
+</li>
+<li><tt>'color'</tt>
+<p>Animates transition of background, text, or border colors.</p>
+<pre><code>el.animate(
+ <i>// animation control object</i>
+ {
+ color: { to: <em>'#06e'</em> },
+ backgroundColor: { to: <em>'#e06'</em> }
+ },
+ 0.35, <i>// animation duration</i>
+ null, <i>// callback</i>
+ <em>'easeOut'</em>, <i>// easing method</i>
+ <em>'color'</em> <i>// animation type (<em>'run'</em>,<em>'color'</em>,<em>'motion'</em>,<em>'scroll'</em>)</i>
+);</code></pre>
+</li>
+<li><tt>'motion'</tt>
+<p>Animates the motion of an element to/from specific points using optional bezier
+way points during transit.</p>
+<pre><code>el.animate(
+ <i>// animation control object</i>
+ {
+ borderWidth: {to: 3, from: 0},
+ opacity: {to: .3, from: 1},
+ height: {to: 50, from: el.getHeight()},
+ width: {to: 300, from: el.getWidth()},
+ top : {by: - 100, unit: <em>'px'</em>},
+ points: {
+ to: [50, 100], <i>// go to this point</i>
+ control: [ <i>// optional bezier way points</i>
+ [ 600, 800],
+ [-100, 200]
+ ]
+ }
+ },
+ 3000, <i>// animation duration (milliseconds!)</i>
+ null, <i>// callback</i>
+ <em>'easeOut'</em>, <i>// easing method</i>
+ <em>'motion'</em> <i>// animation type (<em>'run'</em>,<em>'color'</em>,<em>'motion'</em>,<em>'scroll'</em>)</i>
+);</code></pre>
+</li>
+<li><tt>'scroll'</tt>
+<p>Animate horizontal or vertical scrolling of an overflowing page element.</p>
+<pre><code>el.animate(
+ <i>// animation control object</i>
+ {
+ scroll: {to: [400, 300]}
+ },
+ 0.35, <i>// animation duration</i>
+ null, <i>// callback</i>
+ <em>'easeOut'</em>, <i>// easing method</i>
+ <em>'scroll'</em> <i>// animation type (<em>'run'</em>,<em>'color'</em>,<em>'motion'</em>,<em>'scroll'</em>)</i>
+);</code></pre>
+</li>
+</ul></div>
+</ul></div><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 <tt>.35</tt>)</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) <a href="output/Ext.Fx.html#Ext.Fx-easing" ext:member="easing" ext:cls="Ext.Fx">Ext.Fx.easing</a> method to use (defaults to <tt>'easeOut'</tt>)</div></li><li><code>animType</code> : String<div class="sub-desc">(optional) <tt>'run'</tt> is the default. Can also be <tt>'color'</tt>,
+<tt>'motion'</tt>, or <tt>'scroll'</tt></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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-appendChild"></a><b><a href="source/Element.insertion.html#method-Ext.Element-appendChild">appendChild</a></b>( <code>String/HTMLElement/Array/Element/CompositeElement el</code> )
+ :
+ 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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-appendTo"></a><b><a href="source/Element.insertion.html#method-Ext.Element-appendTo">appendTo</a></b>( <code>Mixed el</code> )
+ :
+ 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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-applyStyles"></a><b><a href="source/Element.style-more.html#method-Ext.Element-applyStyles">applyStyles</a></b>( <code>String/Object/Function styles</code> )
+ :
+ Ext.Element<div class="mdesc"><div class="short">More flexible version of setStyle for setting style properties.</div><div class="long">More flexible version of <a href="output/Ext.Element.html#Ext.Element-setStyle" ext:member="setStyle" ext:cls="Ext.Element">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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-autoHeight"></a><b><a href="source/Element.legacy.html#method-Ext.Element-autoHeight">autoHeight</a></b>( <span title="Optional" class="optional">[<code>Boolean animate</code>]</span>, <span title="Optional" class="optional">[<code>Float duration</code>]</span>, <span title="Optional" class="optional">[<code>Function onComplete</code>]</span>, <span title="Optional" class="optional">[<code>String easing</code>]</span> )
+ :
+ 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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-blur"></a><b><a href="source/Element.html#method-Ext.Element-blur">blur</a></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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-boxWrap"></a><b><a href="source/Element.style-more.html#method-Ext.Element-boxWrap">boxWrap</a></b>( <span title="Optional" class="optional">[<code>String class</code>]</span> )
+ :
+ Ext.Element<div class="mdesc"><div class="short">Wraps the specified element with a special 9 element markup/CSS block that renders by default as
+a gray container wit...</div><div class="long"><p>Wraps the specified element with a special 9 element markup/CSS block that renders by default as
+a gray container with a gradient background, rounded corners and a 4-way shadow.</p>
+<p>This special markup is used throughout Ext when box wrapping elements (<a href="output/Ext.Button.html" ext:cls="Ext.Button">Ext.Button</a>,
+<a href="output/Ext.Panel.html" ext:cls="Ext.Panel">Ext.Panel</a> when <tt><a href="output/Ext.Panel.html#Ext.Panel-frame" ext:member="frame" ext:cls="Ext.Panel">frame=true</a></tt>, <a href="output/Ext.Window.html" ext:cls="Ext.Window">Ext.Window</a>). The markup
+is of this form:</p>
+<pre><code>Ext.Element.boxMarkup =
+ '<div class=<em>"{0}-tl"</em>><div class=<em>"{0}-tr"</em>><div class=<em>"{0}-tc"</em>></div></div></div>
+ <div class=<em>"{0}-ml"</em>><div class=<em>"{0}-mr"</em>><div class=<em>"{0}-mc"</em>></div></div></div>
+ <div class=<em>"{0}-bl"</em>><div class=<em>"{0}-br"</em>><div class=<em>"{0}-bc"</em>></div></div></div>';</code></pre>
+<p>Example usage:</p>
+<pre><code><i>// Basic box wrap</i>
+ Ext.get(<em>"foo"</em>).boxWrap();
+
+ <i>// You can also add a custom class and use CSS inheritance rules to customize the box look.</i>
+ <i>// <em>'x-box-blue'</em> is a built-<b>in</b> alternative -- look at the related CSS definitions as an example</i>
+ <i>// <b>for</b> how to create a custom box wrap style.</i>
+ Ext.get(<em>"foo"</em>).boxWrap().addClass(<em>"x-box-blue"</em>);</code></pre><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 <tt>'x-box'</tt>). 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">The outermost wrapping element of the created box structure.</div></li></ul></div></div></div></td><td class="msource">Element</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-center"></a><b><a href="source/Element.alignment.html#method-Ext.Element-center">center</a></b>( <span title="Optional" class="optional">[<code>Mixed centerIn</code>]</span> )
+ :
+ 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>void</li></ul></div></div></div></td><td class="msource">Element</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-child"></a><b><a href="source/Element.traversal.html#method-Ext.Element-child">child</a></b>( <code>String selector</code>, <span title="Optional" class="optional">[<code>Boolean returnDom</code>]</span> )
+ :
+ 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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-clean"></a><b><a href="source/Element-more.html#method-Ext.Element-clean">clean</a></b>( <span title="Optional" class="optional">[<code>Boolean forceReclean</code>]</span> )
+ :
+ 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>void</li></ul></div></div></div></td><td class="msource">Element</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-clearOpacity"></a><b><a href="source/Element.style.html#method-Ext.Element-clearOpacity">clearOpacity</a></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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-clearPositioning"></a><b><a href="source/Element.position.html#method-Ext.Element-clearPositioning">clearPositioning</a></b>( <span title="Optional" class="optional">[<code>String value</code>]</span> )
+ :
+ 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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-clip"></a><b><a href="source/Element.style.html#method-Ext.Element-clip">clip</a></b>()
+ :
+ Ext.Element<div class="mdesc"><div class="short">Store the current overflow setting and clip overflow on the element - use unclip to remove</div><div class="long">Store the current overflow setting and clip overflow on the element - use <tt><a href="output/Ext.Element.html#Ext.Element-unclip" ext:member="unclip" ext:cls="Ext.Element">unclip</a></tt> 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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-contains"></a><b><a href="source/Element.html#method-Ext.Element-contains">contains</a></b>( <code>HTMLElement/String el</code> )
+ :
+ 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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-createChild"></a><b><a href="source/Element.insertion.html#method-Ext.Element-createChild">createChild</a></b>( <code>Object config</code>, <span title="Optional" class="optional">[<code>HTMLElement insertBefore</code>]</span>, <span title="Optional" class="optional">[<code>Boolean returnDom</code>]</span> )
+ :
+ 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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-createProxy"></a><b><a href="source/Element-more.html#method-Ext.Element-createProxy">createProxy</a></b>( <code>String/Object config</code>, <span title="Optional" class="optional">[<code>String/HTMLElement renderTo</code>]</span>, <span title="Optional" class="optional">[<code>Boolean matchBox</code>]</span> )
+ :
+ 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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-createShim"></a><b><a href="source/Element.fx-more.html#method-Ext.Element-createShim">createShim</a></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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-down"></a><b><a href="source/Element.traversal.html#method-Ext.Element-down">down</a></b>( <code>String selector</code>, <span title="Optional" class="optional">[<code>Boolean returnDom</code>]</span> )
+ :
+ 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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-enableDisplayMode"></a><b><a href="source/Element.fx-more.html#method-Ext.Element-enableDisplayMode">enableDisplayMode</a></b>( <span title="Optional" class="optional">[<code>String display</code>]</span> )
+ :
+ 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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-findParent"></a><b><a href="source/Element.traversal.html#method-Ext.Element-findParent">findParent</a></b>( <code>String selector</code>, <span title="Optional" class="optional">[<code>Number/Mixed maxDepth</code>]</span>, <span title="Optional" class="optional">[<code>Boolean returnEl</code>]</span> )
+ :
+ 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 50 || 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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-findParentNode"></a><b><a href="source/Element.traversal.html#method-Ext.Element-findParentNode">findParentNode</a></b>( <code>String selector</code>, <span title="Optional" class="optional">[<code>Number/Mixed maxDepth</code>]</span>, <span title="Optional" class="optional">[<code>Boolean returnEl</code>]</span> )
+ :
+ 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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-first"></a><b><a href="source/Element.traversal.html#method-Ext.Element-first">first</a></b>( <span title="Optional" class="optional">[<code>String selector</code>]</span>, <span title="Optional" class="optional">[<code>Boolean returnDom</code>]</span> )
+ :
+ 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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-fly"></a><b><a href="source/Element.html#method-Ext.Element-fly">fly</a></b>( <code>String/HTMLElement el</code>, <span title="Optional" class="optional">[<code>String named</code>]</span> )
+ :
+ Element<div class="mdesc"><div class="short">Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to t...</div><div class="long"><p>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. Shorthand of <a href="output/Ext.Element.html#Ext.Element-fly" ext:member="fly" ext:cls="Ext.Element">Ext.Element.fly</a></p>
+<p>Use this to make one-time references to DOM elements which are not going to be accessed again either by
+application code, or by Ext's classes. If accessing an element which will be processed regularly, then <a href="output/Ext.html#Ext-get" ext:member="get" ext:cls="Ext">Ext.get</a>
+will be more appropriate to take advantage of the caching provided by the Ext.Element class.</p><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 "_global")</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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-focus"></a><b><a href="source/Element.html#method-Ext.Element-focus">focus</a></b>( <span title="Optional" class="optional">[<code>Number defer</code>]</span> )
+ :
+ 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><code>defer</code> : Number<div class="sub-desc">(optional) Milliseconds to defer the focus</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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-get"></a><b><a href="source/Element.html#method-Ext.Element-get">get</a></b>( <code>Mixed el</code> )
+ :
+ Element<div class="mdesc"><div class="short"><static> Retrieves Ext.Element objects.
+This method does not retrieve Components. This method
+retrieves Ext.Element objects wh...</div><div class="long"><static> Retrieves Ext.Element objects.
+<p><b>This method does not retrieve <a href="output/Ext.Component.html" ext:cls="Ext.Component">Component</a>s.</b> This method
+retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by
+its ID, use <a href="output/Ext.ComponentMgr.html#Ext.ComponentMgr-get" ext:member="get" ext:cls="Ext.ComponentMgr">Ext.ComponentMgr.get</a>.</p>
+<p>Uses simple caching to consistently return the same object. Automatically fixes if an
+object was recreated with the same id via AJAX or DOM.</p><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 expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-getAlignToXY"></a><b><a href="source/Element.alignment.html#method-Ext.Element-getAlignToXY">getAlignToXY</a></b>( <code>Mixed element</code>, <code>String position</code>, <span title="Optional" class="optional">[<code>Array offsets</code>]</span> )
+ :
+ 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 href="output/Ext.Element.html#Ext.Element-alignTo" ext:member="alignTo" ext:cls="Ext.Element">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">(optional, defaults to "tl-bl?") 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 href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-getAnchorXY"></a><b><a href="source/Element.alignment.html#method-Ext.Element-getAnchorXY">getAnchorXY</a></b>( <span title="Optional" class="optional">[<code>String anchor</code>]</span>, <span title="Optional" class="optional">[<code>Boolean local</code>]</span>, <span title="Optional" class="optional">[<code>Object size</code>]</span> )
+ :
+ Array<div class="mdesc"><div class="short">Gets the x,y coordinates specified by the anchor position on the element.</div><div class="long">Gets the x,y coordinates specified by the anchor position on the element.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>anchor</code> : String<div class="sub-desc">(optional) The specified anchor position (defaults to "c"). See <a href="output/Ext.Element.html#Ext.Element-alignTo" ext:member="alignTo" ext:cls="Ext.Element">alignTo</a>
+for details on supported anchor positions.</div></li><li><code>local</code> : Boolean<div class="sub-desc">(optional) True to get the local (element top/left-relative) anchor position instead
+of page coordinates</div></li><li><code>size</code> : Object<div class="sub-desc">(optional) An object containing the size to use for calculating anchor position
+{width: (target width), height: (target height)} (defaults to the element's current size)</div></li></ul><strong>Returns:</strong><ul><li><code>Array</code><div class="sub-desc">[x, y] An array containing the element's x and y coordinates</div></li></ul></div></div></div></td><td class="msource">Element</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-getAttribute"></a><b><a href="source/Element.html#method-Ext.Element-getAttribute">getAttribute</a></b>( <code>String name</code>, <span title="Optional" class="optional">[<code>String namespace</code>]</span> )
+ :
+ String<div class="mdesc"><div class="short">Returns the value of an attribute from the element's underlying DOM node.</div><div class="long">Returns the value of an attribute from the element's underlying DOM node.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>name</code> : String<div class="sub-desc">The attribute name</div></li><li><code>namespace</code> : String<div class="sub-desc">(optional) The namespace in which to look for the attribute</div></li></ul><strong>Returns:</strong><ul><li><code>String</code><div class="sub-desc">The attribute value</div></li></ul></div></div></div></td><td class="msource">Element</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-getAttributeNS"></a><b><a href="source/Element.html#method-Ext.Element-getAttributeNS">getAttributeNS</a></b>( <code>String namespace</code>, <code>String name</code> )
+ :
+ String<div class="mdesc"><div class="short">Returns the value of a namespaced attribute from the element's underlying DOM node.</div><div class="long">Returns the value of a namespaced attribute from the element's underlying DOM node.<div class="mdetail-params"><strong>Parameters:</strong><ul><li><code>namespace</code> : String<div class="sub-desc">The namespace in which to look for the attribute</div></li><li><code>name</code> : String<div class="sub-desc">The attribute name</div></li></ul><strong>Returns:</strong><ul><li><code>String</code><div class="sub-desc">The attribute value</div></li></ul></div></div></div></td><td class="msource">Element</td></tr><tr class="method-row expandable "><td class="micon"><a href="#expand" class="exi"> </a></td><td class="sig"><a id="Ext.Element-getBorderWidth"></a><b><a href="source/Element.style.html#method-Ext.Element-getBorderWidth">getBorderWidth</a></b>( <code>String side</code> )
+ :
git.ithinksw.org / extjs.git / blobdiff