4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>The source code</title>
6 <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
7 <script type="text/javascript" src="../prettify/prettify.js"></script>
8 <style type="text/css">
9 .highlight { display: block; background-color: #ddd; }
11 <script type="text/javascript">
12 function highlight() {
13 document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
17 <body onload="prettyPrint(); highlight();">
18 <pre class="prettyprint lang-js"><span id='Ext-core-Element-method-constructor'><span id='Ext-core-Element'>/**
19 </span></span> * @class Ext.core.Element
20 * <p>Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.</p>
21 * <p>All instances of this class inherit the methods of {@link Ext.fx.Anim} making visual effects easily available to all DOM elements.</p>
22 * <p>Note that the events documented in this class are not Ext events, they encapsulate browser events. To
23 * access the underlying browser event, see {@link Ext.EventObject#browserEvent}. Some older
24 * browsers may not support the full range of events. Which events are supported is beyond the control of ExtJs.</p>
26 <pre><code>
28 var el = Ext.get("my-div");
30 // by DOM element reference
31 var el = Ext.get(myDivElement);
32 </code></pre>
33 * <b>Animations</b><br />
34 * <p>When an element is manipulated, by default there is no animation.</p>
35 * <pre><code>
36 var el = Ext.get("my-div");
40 * </code></pre>
41 * <p>Many of the functions for manipulating an element have an optional "animate" parameter. This
42 * parameter can be specified as boolean (<tt>true</tt>) for default animation effects.</p>
43 * <pre><code>
45 el.setWidth(100, true);
46 * </code></pre>
48 * <p>To configure the effects, an object literal with animation options to use as the Element animation
49 * configuration object can also be specified. Note that the supported Element animation configuration
50 * options are a subset of the {@link Ext.fx.Anim} animation options specific to Fx effects. The supported
51 * Element animation configuration options are:</p>
53 Option Default Description
54 --------- -------- ---------------------------------------------
55 {@link Ext.fx.Anim#duration duration} .35 The duration of the animation in seconds
56 {@link Ext.fx.Anim#easing easing} easeOut The easing method
57 {@link Ext.fx.Anim#callback callback} none A function to execute when the anim completes
58 {@link Ext.fx.Anim#scope scope} this The scope (this) of the callback function
61 * <pre><code>
62 // Element animation options object
64 {@link Ext.fx.Anim#duration duration}: 1,
65 {@link Ext.fx.Anim#easing easing}: 'elasticIn',
66 {@link Ext.fx.Anim#callback callback}: this.foo,
67 {@link Ext.fx.Anim#scope scope}: this
69 // animation with some options set
70 el.setWidth(100, opt);
71 * </code></pre>
72 * <p>The Element animation object being used for the animation will be set on the options
73 * object as "anim", which allows you to stop or manipulate the animation. Here is an example:</p>
74 * <pre><code>
75 // using the "anim" property to get the Anim object
76 if(opt.anim.isAnimated()){
79 * </code></pre>
80 * <p>Also see the <tt>{@link #animate}</tt> method for another animation technique.</p>
81 * <p><b> Composite (Collections of) Elements</b></p>
82 * <p>For working with collections of Elements, see {@link Ext.CompositeElement}</p>
83 * @constructor Create a new Element directly.
84 * @param {String/HTMLElement} element
85 * @param {Boolean} forceNew (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).
91 Ext.Element = Ext.core.Element = function(element, forceNew) {
92 var dom = typeof element == "string" ? DOC.getElementById(element) : element,
101 if (!forceNew && id && EC[id]) {
102 // element object already exists
106 <span id='Ext-core-Element-property-dom'> /**
107 </span> * The DOM element
112 <span id='Ext-core-Element-property-id'> /**
113 </span> * The DOM element ID
116 this.id = id || Ext.id(dom);
119 var DH = Ext.core.DomHelper,
120 El = Ext.core.Element;
124 <span id='Ext-core-Element-method-set'> /**
125 </span> * Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)
126 * @param {Object} o The object with the attributes
127 * @param {Boolean} useSet (optional) false to override the default setAttribute to use expandos.
128 * @return {Ext.core.Element} this
130 set: function(o, useSet) {
134 useSet = (useSet !== false) && !!el.setAttribute;
137 if (o.hasOwnProperty(attr)) {
139 if (attr == 'style') {
140 DH.applyStyles(el, val);
141 } else if (attr == 'cls') {
144 el.setAttribute(attr, val);
154 <span id='Ext-core-Element-event-click'> /**
155 </span> * @event click
156 * Fires when a mouse click is detected within the element.
157 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
158 * @param {HtmlElement} t The target of the event.
159 * @param {Object} o The options configuration passed to the {@link #addListener} call.
161 <span id='Ext-core-Element-event-contextmenu'> /**
162 </span> * @event contextmenu
163 * Fires when a right click is detected within the element.
164 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
165 * @param {HtmlElement} t The target of the event.
166 * @param {Object} o The options configuration passed to the {@link #addListener} call.
168 <span id='Ext-core-Element-event-dblclick'> /**
169 </span> * @event dblclick
170 * Fires when a mouse double click is detected within the element.
171 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
172 * @param {HtmlElement} t The target of the event.
173 * @param {Object} o The options configuration passed to the {@link #addListener} call.
175 <span id='Ext-core-Element-event-mousedown'> /**
176 </span> * @event mousedown
177 * Fires when a mousedown is detected within the element.
178 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
179 * @param {HtmlElement} t The target of the event.
180 * @param {Object} o The options configuration passed to the {@link #addListener} call.
182 <span id='Ext-core-Element-event-mouseup'> /**
183 </span> * @event mouseup
184 * Fires when a mouseup is detected within the element.
185 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
186 * @param {HtmlElement} t The target of the event.
187 * @param {Object} o The options configuration passed to the {@link #addListener} call.
189 <span id='Ext-core-Element-event-mouseover'> /**
190 </span> * @event mouseover
191 * Fires when a mouseover is detected within the element.
192 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
193 * @param {HtmlElement} t The target of the event.
194 * @param {Object} o The options configuration passed to the {@link #addListener} call.
196 <span id='Ext-core-Element-event-mousemove'> /**
197 </span> * @event mousemove
198 * Fires when a mousemove is detected with the element.
199 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
200 * @param {HtmlElement} t The target of the event.
201 * @param {Object} o The options configuration passed to the {@link #addListener} call.
203 <span id='Ext-core-Element-event-mouseout'> /**
204 </span> * @event mouseout
205 * Fires when a mouseout is detected with the element.
206 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
207 * @param {HtmlElement} t The target of the event.
208 * @param {Object} o The options configuration passed to the {@link #addListener} call.
210 <span id='Ext-core-Element-event-mouseenter'> /**
211 </span> * @event mouseenter
212 * Fires when the mouse enters the element.
213 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
214 * @param {HtmlElement} t The target of the event.
215 * @param {Object} o The options configuration passed to the {@link #addListener} call.
217 <span id='Ext-core-Element-event-mouseleave'> /**
218 </span> * @event mouseleave
219 * Fires when the mouse leaves the element.
220 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
221 * @param {HtmlElement} t The target of the event.
222 * @param {Object} o The options configuration passed to the {@link #addListener} call.
226 <span id='Ext-core-Element-event-keypress'> /**
227 </span> * @event keypress
228 * Fires when a keypress is detected within the element.
229 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
230 * @param {HtmlElement} t The target of the event.
231 * @param {Object} o The options configuration passed to the {@link #addListener} call.
233 <span id='Ext-core-Element-event-keydown'> /**
234 </span> * @event keydown
235 * Fires when a keydown is detected within the element.
236 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
237 * @param {HtmlElement} t The target of the event.
238 * @param {Object} o The options configuration passed to the {@link #addListener} call.
240 <span id='Ext-core-Element-event-keyup'> /**
241 </span> * @event keyup
242 * Fires when a keyup is detected within the element.
243 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
244 * @param {HtmlElement} t The target of the event.
245 * @param {Object} o The options configuration passed to the {@link #addListener} call.
249 // HTML frame/object events
250 <span id='Ext-core-Element-event-load'> /**
251 </span> * @event load
252 * Fires when the user agent finishes loading all content within the element. Only supported by window, frames, objects and images.
253 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
254 * @param {HtmlElement} t The target of the event.
255 * @param {Object} o The options configuration passed to the {@link #addListener} call.
257 <span id='Ext-core-Element-event-unload'> /**
258 </span> * @event unload
259 * Fires when the user agent removes all content from a window or frame. For elements, it fires when the target element or any of its content has been removed.
260 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
261 * @param {HtmlElement} t The target of the event.
262 * @param {Object} o The options configuration passed to the {@link #addListener} call.
264 <span id='Ext-core-Element-event-abort'> /**
265 </span> * @event abort
266 * Fires when an object/image is stopped from loading before completely loaded.
267 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
268 * @param {HtmlElement} t The target of the event.
269 * @param {Object} o The options configuration passed to the {@link #addListener} call.
271 <span id='Ext-core-Element-event-error'> /**
272 </span> * @event error
273 * Fires when an object/image/frame cannot be loaded properly.
274 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
275 * @param {HtmlElement} t The target of the event.
276 * @param {Object} o The options configuration passed to the {@link #addListener} call.
278 <span id='Ext-core-Element-event-resize'> /**
279 </span> * @event resize
280 * Fires when a document view is resized.
281 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
282 * @param {HtmlElement} t The target of the event.
283 * @param {Object} o The options configuration passed to the {@link #addListener} call.
285 <span id='Ext-core-Element-event-scroll'> /**
286 </span> * @event scroll
287 * Fires when a document view is scrolled.
288 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
289 * @param {HtmlElement} t The target of the event.
290 * @param {Object} o The options configuration passed to the {@link #addListener} call.
294 <span id='Ext-core-Element-event-select'> /**
295 </span> * @event select
296 * Fires when a user selects some text in a text field, including input and textarea.
297 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
298 * @param {HtmlElement} t The target of the event.
299 * @param {Object} o The options configuration passed to the {@link #addListener} call.
301 <span id='Ext-core-Element-event-change'> /**
302 </span> * @event change
303 * Fires when a control loses the input focus and its value has been modified since gaining focus.
304 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
305 * @param {HtmlElement} t The target of the event.
306 * @param {Object} o The options configuration passed to the {@link #addListener} call.
308 <span id='Ext-core-Element-event-submit'> /**
309 </span> * @event submit
310 * Fires when a form is submitted.
311 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
312 * @param {HtmlElement} t The target of the event.
313 * @param {Object} o The options configuration passed to the {@link #addListener} call.
315 <span id='Ext-core-Element-event-reset'> /**
316 </span> * @event reset
317 * Fires when a form is reset.
318 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
319 * @param {HtmlElement} t The target of the event.
320 * @param {Object} o The options configuration passed to the {@link #addListener} call.
322 <span id='Ext-core-Element-event-focus'> /**
323 </span> * @event focus
324 * Fires when an element receives focus either via the pointing device or by tab navigation.
325 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
326 * @param {HtmlElement} t The target of the event.
327 * @param {Object} o The options configuration passed to the {@link #addListener} call.
329 <span id='Ext-core-Element-event-blur'> /**
330 </span> * @event blur
331 * Fires when an element loses focus either via the pointing device or by tabbing navigation.
332 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
333 * @param {HtmlElement} t The target of the event.
334 * @param {Object} o The options configuration passed to the {@link #addListener} call.
337 // User Interface events
338 <span id='Ext-core-Element-event-DOMFocusIn'> /**
339 </span> * @event DOMFocusIn
340 * Where supported. Similar to HTML focus event, but can be applied to any focusable element.
341 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
342 * @param {HtmlElement} t The target of the event.
343 * @param {Object} o The options configuration passed to the {@link #addListener} call.
345 <span id='Ext-core-Element-event-DOMFocusOut'> /**
346 </span> * @event DOMFocusOut
347 * Where supported. Similar to HTML blur event, but can be applied to any focusable element.
348 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
349 * @param {HtmlElement} t The target of the event.
350 * @param {Object} o The options configuration passed to the {@link #addListener} call.
352 <span id='Ext-core-Element-event-DOMActivate'> /**
353 </span> * @event DOMActivate
354 * Where supported. Fires when an element is activated, for instance, through a mouse click or a keypress.
355 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
356 * @param {HtmlElement} t The target of the event.
357 * @param {Object} o The options configuration passed to the {@link #addListener} call.
360 // DOM Mutation events
361 <span id='Ext-core-Element-event-DOMSubtreeModified'> /**
362 </span> * @event DOMSubtreeModified
363 * Where supported. Fires when the subtree is modified.
364 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
365 * @param {HtmlElement} t The target of the event.
366 * @param {Object} o The options configuration passed to the {@link #addListener} call.
368 <span id='Ext-core-Element-event-DOMNodeInserted'> /**
369 </span> * @event DOMNodeInserted
370 * Where supported. Fires when a node has been added as a child of another node.
371 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
372 * @param {HtmlElement} t The target of the event.
373 * @param {Object} o The options configuration passed to the {@link #addListener} call.
375 <span id='Ext-core-Element-event-DOMNodeRemoved'> /**
376 </span> * @event DOMNodeRemoved
377 * Where supported. Fires when a descendant node of the element is removed.
378 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
379 * @param {HtmlElement} t The target of the event.
380 * @param {Object} o The options configuration passed to the {@link #addListener} call.
382 <span id='Ext-core-Element-event-DOMNodeRemovedFromDocument'> /**
383 </span> * @event DOMNodeRemovedFromDocument
384 * Where supported. Fires when a node is being removed from a document.
385 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
386 * @param {HtmlElement} t The target of the event.
387 * @param {Object} o The options configuration passed to the {@link #addListener} call.
389 <span id='Ext-core-Element-event-DOMNodeInsertedIntoDocument'> /**
390 </span> * @event DOMNodeInsertedIntoDocument
391 * Where supported. Fires when a node is being inserted into a document.
392 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
393 * @param {HtmlElement} t The target of the event.
394 * @param {Object} o The options configuration passed to the {@link #addListener} call.
396 <span id='Ext-core-Element-event-DOMAttrModified'> /**
397 </span> * @event DOMAttrModified
398 * Where supported. Fires when an attribute has been modified.
399 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
400 * @param {HtmlElement} t The target of the event.
401 * @param {Object} o The options configuration passed to the {@link #addListener} call.
403 <span id='Ext-core-Element-event-DOMCharacterDataModified'> /**
404 </span> * @event DOMCharacterDataModified
405 * Where supported. Fires when the character data has been modified.
406 * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
407 * @param {HtmlElement} t The target of the event.
408 * @param {Object} o The options configuration passed to the {@link #addListener} call.
411 <span id='Ext-core-Element-property-defaultUnit'> /**
412 </span> * The default unit to append to CSS values where a unit isn't provided (defaults to px).
415 defaultUnit: "px",
417 <span id='Ext-core-Element-method-is'> /**
418 </span> * Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)
419 * @param {String} selector The simple selector to test
420 * @return {Boolean} True if this element matches the selector, else false
422 is: function(simpleSelector) {
423 return Ext.DomQuery.is(this.dom, simpleSelector);
426 <span id='Ext-core-Element-method-focus'> /**
427 </span> * Tries to focus the element. Any exceptions are caught and ignored.
428 * @param {Number} defer (optional) Milliseconds to defer the focus
429 * @return {Ext.core.Element} this
431 focus: function(defer,
438 Ext.defer(me.focus, defer, null, [null, dom]);
446 <span id='Ext-core-Element-method-blur'> /**
447 </span> * Tries to blur the element. Any exceptions are caught and ignored.
448 * @return {Ext.core.Element} this
457 <span id='Ext-core-Element-method-getValue'> /**
458 </span> * Returns the value of the "value" attribute
459 * @param {Boolean} asNumber true to parse the value as a number
460 * @return {String/Number}
462 getValue: function(asNumber) {
463 var val = this.dom.value;
464 return asNumber ? parseInt(val, 10) : val;
467 <span id='Ext-core-Element-method-addListener'> /**
468 </span> * Appends an event handler to this element. The shorthand version {@link #on} is equivalent.
469 * @param {String} eventName The name of event to handle.
470 * @param {Function} fn The handler function the event invokes. This function is passed
471 * the following parameters:<ul>
472 * <li><b>evt</b> : EventObject<div class="sub-desc">The {@link Ext.EventObject EventObject} describing the event.</div></li>
473 * <li><b>el</b> : HtmlElement<div class="sub-desc">The DOM element which was the target of the event.
474 * Note that this may be filtered by using the <tt>delegate</tt> option.</div></li>
475 * <li><b>o</b> : Object<div class="sub-desc">The options object from the addListener call.</div></li>
477 * @param {Object} scope (optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
478 * <b>If omitted, defaults to this Element.</b>.
479 * @param {Object} options (optional) An object containing handler configuration properties.
480 * This may contain any of the following properties:<ul>
481 * <li><b>scope</b> Object : <div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed.
482 * <b>If omitted, defaults to this Element.</b></div></li>
483 * <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>
484 * <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>
485 * <li><b>preventDefault</b> Boolean: <div class="sub-desc">True to prevent the default action</div></li>
486 * <li><b>stopPropagation</b> Boolean: <div class="sub-desc">True to prevent event propagation</div></li>
487 * <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>
488 * <li><b>target</b> Ext.core.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>
489 * <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>
490 * <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>
491 * <li><b>buffer</b> Number: <div class="sub-desc">Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
492 * by the specified number of milliseconds. If the event fires again within that time, the original
493 * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>
494 * </ul><br>
496 * <b>Combining Options</b><br>
497 * In the following examples, the shorthand form {@link #on} is used rather than the more verbose
498 * addListener. The two are equivalent. Using the options argument, it is possible to combine different
499 * types of listeners:<br>
501 * A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the
502 * options object. The options object is available as the third parameter in the handler function.<div style="margin: 5px 20px 20px;">
503 * Code:<pre><code>
504 el.on('click', this.onClick, this, {
509 });</code></pre></p>
511 * <b>Attaching multiple handlers in 1 call</b><br>
512 * The method also allows for a single argument to be passed which is a config object containing properties
513 * which specify multiple handlers.</p>
515 * Code:<pre><code>
523 fn: this.onMouseOver,
530 });</code></pre>
532 * Or a shorthand syntax:<br>
533 * Code:<pre><code></p>
535 'click' : this.onClick,
536 'mouseover' : this.onMouseOver,
537 'mouseout' : this.onMouseOut,
540 * </code></pre></p>
541 * <p><b>delegate</b></p>
542 * <p>This is a configuration option that you can pass along when registering a handler for
543 * an event to assist with event delegation. Event delegation is a technique that is used to
544 * reduce memory consumption and prevent exposure to memory-leaks. By registering an event
545 * for a container element as opposed to each element within a container. By setting this
546 * configuration option to a simple selector, the target element will be filtered to look for
547 * a descendant of the target.
548 * For example:<pre><code>
549 // using this markup:
550 &lt;div id='elId'>
551 &lt;p id='p1'>paragraph one&lt;/p>
552 &lt;p id='p2' class='clickable'>paragraph two&lt;/p>
553 &lt;p id='p3'>paragraph three&lt;/p>
555 // utilize event delegation to registering just one handler on the container element:
556 el = Ext.get('elId');
561 console.info(t.id); // 'p2'
565 // filter the target element to be a descendant with the class 'clickable'
566 delegate: '.clickable'
569 * </code></pre></p>
570 * @return {Ext.core.Element} this
572 addListener: function(eventName, fn, scope, options) {
573 Ext.EventManager.on(this.dom, eventName, fn, scope || this, options);
577 <span id='Ext-core-Element-method-removeListener'> /**
578 </span> * Removes an event handler from this element. The shorthand version {@link #un} is equivalent.
579 * <b>Note</b>: if a <i>scope</i> was explicitly specified when {@link #addListener adding} the
580 * listener, the same scope must be specified here.
582 * <pre><code>
583 el.removeListener('click', this.handlerFn);
585 el.un('click', this.handlerFn);
586 </code></pre>
587 * @param {String} eventName The name of the event from which to remove the handler.
588 * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>
589 * @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,
590 * then this must refer to the same object.
591 * @return {Ext.core.Element} this
593 removeListener: function(eventName, fn, scope) {
594 Ext.EventManager.un(this.dom, eventName, fn, scope || this);
598 <span id='Ext-core-Element-method-removeAllListeners'> /**
599 </span> * Removes all previous added listeners from this element
600 * @return {Ext.core.Element} this
602 removeAllListeners: function() {
603 Ext.EventManager.removeAll(this.dom);
607 <span id='Ext-core-Element-method-purgeAllListeners'> /**
608 </span> * Recursively removes all previous added listeners from this element and its children
609 * @return {Ext.core.Element} this
611 purgeAllListeners: function() {
612 Ext.EventManager.purgeElement(this);
616 <span id='Ext-core-Element-method-addUnits'> /**
617 </span> * @private Test if size has a unit, otherwise appends the passed unit string, or the default for this Element.
618 * @param size {Mixed} The size to set
619 * @param units {String} The units to append to a numeric size value
621 addUnits: function(size, units) {
623 // Most common case first: Size is set to a number
624 if (Ext.isNumber(size)) {
625 return size + (units || this.defaultUnit || 'px');
628 // Size set to a value which means "auto"
629 if (size === "" || size == "auto" || size === undefined || size === null) {
633 // Otherwise, warn if it's not a valid CSS measurement
634 if (!unitPattern.test(size)) {
636 if (Ext.isDefined(Ext.global.console)) {
637 Ext.global.console.warn("Warning, size detected as NaN on Element.addUnits.");
645 <span id='Ext-core-Element-method-isBorderBox'> /**
646 </span> * Tests various css rules/browsers to determine if this element uses a border box
649 isBorderBox: function() {
650 return Ext.isBorderBox || noBoxAdjust[(this.dom.tagName || "").toLowerCase()];
653 <span id='Ext-core-Element-method-remove'> /**
654 </span> * <p>Removes this element's dom reference. Note that event and cache removal is handled at {@link Ext#removeNode Ext.removeNode}</p>
666 <span id='Ext-core-Element-method-hover'> /**
667 </span> * Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element.
668 * @param {Function} overFn The function to call when the mouse enters the Element.
669 * @param {Function} outFn The function to call when the mouse leaves the Element.
670 * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the functions are executed. Defaults to the Element's DOM element.
671 * @param {Object} options (optional) Options for the listener. See {@link Ext.util.Observable#addListener the <tt>options</tt> parameter}.
672 * @return {Ext.core.Element} this
674 hover: function(overFn, outFn, scope, options) {
676 me.on('mouseenter', overFn, scope || me.dom, options);
677 me.on('mouseleave', outFn, scope || me.dom, options);
681 <span id='Ext-core-Element-method-contains'> /**
682 </span> * Returns true if this element is an ancestor of the passed element
683 * @param {HTMLElement/String} el The element to check
684 * @return {Boolean} True if this element is an ancestor of el, else false
686 contains: function(el) {
687 return ! el ? false: Ext.core.Element.isAncestor(this.dom, el.dom ? el.dom: el);
690 <span id='Ext-core-Element-method-getAttributeNS'> /**
691 </span> * Returns the value of a namespaced attribute from the element's underlying DOM node.
692 * @param {String} namespace The namespace in which to look for the attribute
693 * @param {String} name The attribute name
694 * @return {String} The attribute value
697 getAttributeNS: function(ns, name) {
698 return this.getAttribute(name, ns);
701 <span id='Ext-core-Element-method-getAttribute'> /**
702 </span> * Returns the value of an attribute from the element's underlying DOM node.
703 * @param {String} name The attribute name
704 * @param {String} namespace (optional) The namespace in which to look for the attribute
705 * @return {String} The attribute value
708 getAttribute: (Ext.isIE && !(Ext.isIE9 && document.documentMode === 9)) ?
713 type = typeof d[ns + ":" + name];
714 if (type != 'undefined' && type != 'unknown') {
715 return d[ns + ":" + name] || null;
719 if (name === "for") {
720 name = "htmlFor";
722 return d[name] || null;
723 }: function(name, ns) {
726 return d.getAttributeNS(ns, name) || d.getAttribute(ns + ":" + name);
728 return d.getAttribute(name) || d[name] || null;
731 <span id='Ext-core-Element-method-update'> /**
732 </span> * Update the innerHTML of this element
733 * @param {String} html The new HTML
734 * @return {Ext.core.Element} this
736 update: function(html) {
738 this.dom.innerHTML = html;
744 var ep = El.prototype;
746 El.addMethods = function(o) {
750 <span id='Ext-core-Element-method-on'> /**
751 </span> * Appends an event handler (shorthand for {@link #addListener}).
752 * @param {String} eventName The name of event to handle.
753 * @param {Function} fn The handler function the event invokes.
754 * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the handler function is executed.
755 * @param {Object} options (optional) An object containing standard {@link #addListener} options
756 * @member Ext.core.Element
759 ep.on = ep.addListener;
761 <span id='Ext-core-Element-method-un'> /**
762 </span> * Removes an event handler from this element (see {@link #removeListener} for additional notes).
763 * @param {String} eventName The name of the event from which to remove the handler.
764 * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>
765 * @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added,
766 * then this must refer to the same object.
767 * @return {Ext.core.Element} this
768 * @member Ext.core.Element
771 ep.un = ep.removeListener;
773 <span id='Ext-core-Element-method-clearListeners'> /**
774 </span> * Removes all previous added listeners from this element
775 * @return {Ext.core.Element} this
776 * @member Ext.core.Element
777 * @method clearListeners
779 ep.clearListeners = ep.removeAllListeners;
781 <span id='Ext-core-Element-method-destroy'> /**
782 </span> * Removes this element's dom reference. Note that event and cache removal is handled at {@link Ext#removeNode Ext.removeNode}.
783 * Alias to {@link #remove}.
784 * @member Ext.core.Element
787 ep.destroy = ep.remove;
789 <span id='Ext-core-Element-property-autoBoxAdjust'> /**
790 </span> * true to automatically adjust width and height settings for box-model issues (default to true)
792 ep.autoBoxAdjust = true;
795 var unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,
798 <span id='Ext-core-Element-method-get'> /**
799 </span> * Retrieves Ext.core.Element objects.
800 * <p><b>This method does not retrieve {@link Ext.Component Component}s.</b> This method
801 * retrieves Ext.core.Element objects which encapsulate DOM elements. To retrieve a Component by
802 * its ID, use {@link Ext.ComponentManager#get}.</p>
803 * <p>Uses simple caching to consistently return the same object. Automatically fixes if an
804 * object was recreated with the same id via AJAX or DOM.</p>
805 * @param {Mixed} el The id of the node, a DOM Node or an existing Element.
806 * @return {Element} The Element object (or null if no matching element was found)
808 * @member Ext.core.Element
811 El.get = function(el) {
818 if (typeof el == "string") {
820 if (! (elm = DOC.getElementById(el))) {
823 if (EC[el] && EC[el].el) {
827 ex = El.addToCache(new El(elm));
830 } else if (el.tagName) {
832 if (! (id = el.id)) {
835 if (EC[id] && EC[id].el) {
839 ex = El.addToCache(new El(el));
842 } else if (el instanceof El) {
844 // refresh dom element in case no longer valid,
845 // catch case where it hasn't been appended
846 // If an el instance is passed, don't pass to getElementById without some kind of id
847 if (Ext.isIE && (el.id == undefined || el.id == '')) {
850 el.dom = DOC.getElementById(el.id) || el.dom;
854 } else if (el.isComposite) {
856 } else if (Ext.isArray(el)) {
857 return El.select(el);
858 } else if (el == DOC) {
859 // create a bogus element object representing the document object
861 var f = function() {};
862 f.prototype = El.prototype;
871 El.addToCache = function(el, id) {
883 // private method for getting and setting element data
884 El.data = function(el, key, value) {
889 var c = EC[el.id].data;
890 if (arguments.length == 2) {
893 return (c[key] = value);
898 // Garbage collection - uncache elements/purge listeners on orphaned elements
899 // so we don't hold a reference and cause the browser to retain them
900 function garbageCollect() {
901 if (!Ext.enableGarbageCollector) {
902 clearInterval(El.collectorThreadId);
910 if (!EC.hasOwnProperty(eid)) {
914 if (o.skipGarbageCollection) {
919 // -------------------------------------------------------
920 // Determining what is garbage:
921 // -------------------------------------------------------
923 // dom node is null, definitely garbage
924 // -------------------------------------------------------
926 // no parentNode == direct orphan, definitely garbage
927 // -------------------------------------------------------
928 // !d.offsetParent && !document.getElementById(eid)
929 // display none elements have no offsetParent so we will
930 // also try to look it up by it's id. However, check
931 // offsetParent first so we don't do unneeded lookups.
932 // This enables collection of elements that are not orphans
933 // directly, but somewhere up the line they have an orphan
935 // -------------------------------------------------------
936 if (!d || !d.parentNode || (!d.offsetParent && !DOC.getElementById(eid))) {
937 if (d && Ext.enableListenerCollection) {
938 Ext.EventManager.removeAll(d);
943 // Cleanup IE Object leaks
947 if (!EC.hasOwnProperty(eid)) {
956 El.collectorThreadId = setInterval(garbageCollect, 30000);
958 var flyFn = function() {};
959 flyFn.prototype = El.prototype;
962 El.Flyweight = function(dom) {
966 El.Flyweight.prototype = new flyFn();
967 El.Flyweight.prototype.isFlyweight = true;
970 <span id='Ext-core-Element-method-fly'> /**
971 </span> * <p>Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
972 * the dom node can be overwritten by other code. Shorthand of {@link Ext.core.Element#fly}</p>
973 * <p>Use this to make one-time references to DOM elements which are not going to be accessed again either by
974 * application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get Ext.get}
975 * will be more appropriate to take advantage of the caching provided by the Ext.core.Element class.</p>
976 * @param {String/HTMLElement} el The dom node or id
977 * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts
978 * (e.g. internally Ext uses "_global")
979 * @return {Element} The shared Element object (or null if no matching element was found)
980 * @member Ext.core.Element
983 El.fly = function(el, named) {
985 named = named || '_global';
988 (El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el;
989 ret = El._flyweights[named];
994 <span id='Ext-method-get'> /**
995 </span> * Retrieves Ext.core.Element objects.
996 * <p><b>This method does not retrieve {@link Ext.Component Component}s.</b> This method
997 * retrieves Ext.core.Element objects which encapsulate DOM elements. To retrieve a Component by
998 * its ID, use {@link Ext.ComponentManager#get}.</p>
999 * <p>Uses simple caching to consistently return the same object. Automatically fixes if an
1000 * object was recreated with the same id via AJAX or DOM.</p>
1001 * Shorthand of {@link Ext.core.Element#get}
1002 * @param {Mixed} el The id of the node, a DOM Node or an existing Element.
1003 * @return {Element} The Element object (or null if no matching element was found)
1009 <span id='Ext-method-fly'> /**
1010 </span> * <p>Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
1011 * the dom node can be overwritten by other code. Shorthand of {@link Ext.core.Element#fly}</p>
1012 * <p>Use this to make one-time references to DOM elements which are not going to be accessed again either by
1013 * application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link Ext#get Ext.get}
1014 * will be more appropriate to take advantage of the caching provided by the Ext.core.Element class.</p>
1015 * @param {String/HTMLElement} el The dom node or id
1016 * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts
1017 * (e.g. internally Ext uses "_global")
1018 * @return {Element} The shared Element object (or null if no matching element was found)
1024 // speedy lookup for elements never to box adjust
1025 var noBoxAdjust = Ext.isStrict ? {
1032 if (Ext.isIE || Ext.isGecko) {
1033 noBoxAdjust['button'] = 1;