docs/source/Element2.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-Element-method-constructor'><span id='Ext-Element'>/**
  19 </span></span> * @class Ext.Element
  20  * @alternateClassName Ext.core.Element
  21  *
  22  * Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.
  23  *
  24  * All instances of this class inherit the methods of {@link Ext.fx.Anim} making visual effects easily available to all
  25  * DOM elements.
  26  *
  27  * Note that the events documented in this class are not Ext events, they encapsulate browser events. Some older browsers
  28  * may not support the full range of events. Which events are supported is beyond the control of Ext JS.
  29  *
  30  * Usage:
  31  *
  32  *     // by id
  33  *     var el = Ext.get(&quot;my-div&quot;);
  34  *
  35  *     // by DOM element reference
  36  *     var el = Ext.get(myDivElement);
  37  *
  38  * # Animations
  39  *
  40  * When an element is manipulated, by default there is no animation.
  41  *
  42  *     var el = Ext.get(&quot;my-div&quot;);
  43  *
  44  *     // no animation
  45  *     el.setWidth(100);
  46  *
  47  * Many of the functions for manipulating an element have an optional &quot;animate&quot; parameter. This parameter can be
  48  * specified as boolean (true) for default animation effects.
  49  *
  50  *     // default animation
  51  *     el.setWidth(100, true);
  52  *
  53  * To configure the effects, an object literal with animation options to use as the Element animation configuration
  54  * object can also be specified. Note that the supported Element animation configuration options are a subset of the
  55  * {@link Ext.fx.Anim} animation options specific to Fx effects. The supported Element animation configuration options
  56  * are:
  57  *
  58  *     Option    Default   Description
  59  *     --------- --------  ---------------------------------------------
  60  *     {@link Ext.fx.Anim#duration duration}  .35       The duration of the animation in seconds
  61  *     {@link Ext.fx.Anim#easing easing}    easeOut   The easing method
  62  *     {@link Ext.fx.Anim#callback callback}  none      A function to execute when the anim completes
  63  *     {@link Ext.fx.Anim#scope scope}     this      The scope (this) of the callback function
  64  *
  65  * Usage:
  66  *
  67  *     // Element animation options object
  68  *     var opt = {
  69  *         {@link Ext.fx.Anim#duration duration}: 1,
  70  *         {@link Ext.fx.Anim#easing easing}: 'elasticIn',
  71  *         {@link Ext.fx.Anim#callback callback}: this.foo,
  72  *         {@link Ext.fx.Anim#scope scope}: this
  73  *     };
  74  *     // animation with some options set
  75  *     el.setWidth(100, opt);
  76  *
  77  * The Element animation object being used for the animation will be set on the options object as &quot;anim&quot;, which allows
  78  * you to stop or manipulate the animation. Here is an example:
  79  *
  80  *     // using the &quot;anim&quot; property to get the Anim object
  81  *     if(opt.anim.isAnimated()){
  82  *         opt.anim.stop();
  83  *     }
  84  *
  85  * # Composite (Collections of) Elements
  86  *
  87  * For working with collections of Elements, see {@link Ext.CompositeElement}
  88  *
  89  * @constructor
  90  * Creates new Element directly.
  91  * @param {String/HTMLElement} element
  92  * @param {Boolean} forceNew (optional) By default the constructor checks to see if there is already an instance of this
  93  * element in the cache and if there is it returns the same instance. This will skip that check (useful for extending
  94  * this class).
  95  * @return {Object}
  96  */
  97  (function() {
  98     var DOC = document,
  99         EC = Ext.cache;
 100
 101     Ext.Element = Ext.core.Element = function(element, forceNew) {
 102         var dom = typeof element == &quot;string&quot; ? DOC.getElementById(element) : element,
 103         id;
 104
 105         if (!dom) {
 106             return null;
 107         }
 108
 109         id = dom.id;
 110
 111         if (!forceNew &amp;&amp; id &amp;&amp; EC[id]) {
 112             // element object already exists
 113             return EC[id].el;
 114         }
 115
 116 <span id='Ext-Element-property-dom'>        /**
 117 </span>         * @property {HTMLElement} dom
 118          * The DOM element
 119          */
 120         this.dom = dom;
 121
 122 <span id='Ext-Element-property-id'>        /**
 123 </span>         * @property {String} id
 124          * The DOM element ID
 125          */
 126         this.id = id || Ext.id(dom);
 127     };
 128
 129     var DH = Ext.DomHelper,
 130     El = Ext.Element;
 131
 132
 133     El.prototype = {
 134 <span id='Ext-Element-method-set'>        /**
 135 </span>         * Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)
 136          * @param {Object} o The object with the attributes
 137          * @param {Boolean} useSet (optional) false to override the default setAttribute to use expandos.
 138          * @return {Ext.Element} this
 139          */
 140         set: function(o, useSet) {
 141             var el = this.dom,
 142                 attr,
 143                 val;
 144             useSet = (useSet !== false) &amp;&amp; !!el.setAttribute;
 145
 146             for (attr in o) {
 147                 if (o.hasOwnProperty(attr)) {
 148                     val = o[attr];
 149                     if (attr == 'style') {
 150                         DH.applyStyles(el, val);
 151                     } else if (attr == 'cls') {
 152                         el.className = val;
 153                     } else if (useSet) {
 154                         el.setAttribute(attr, val);
 155                     } else {
 156                         el[attr] = val;
 157                     }
 158                 }
 159             }
 160             return this;
 161         },
 162
 163         //  Mouse events
 164 <span id='Ext-Element-event-click'>        /**
 165 </span>         * @event click
 166          * Fires when a mouse click is detected within the element.
 167          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 168          * @param {HTMLElement} t The target of the event.
 169          */
 170 <span id='Ext-Element-event-contextmenu'>        /**
 171 </span>         * @event contextmenu
 172          * Fires when a right click is detected within the element.
 173          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 174          * @param {HTMLElement} t The target of the event.
 175          */
 176 <span id='Ext-Element-event-dblclick'>        /**
 177 </span>         * @event dblclick
 178          * Fires when a mouse double click is detected within the element.
 179          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 180          * @param {HTMLElement} t The target of the event.
 181          */
 182 <span id='Ext-Element-event-mousedown'>        /**
 183 </span>         * @event mousedown
 184          * Fires when a mousedown 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          */
 188 <span id='Ext-Element-event-mouseup'>        /**
 189 </span>         * @event mouseup
 190          * Fires when a mouseup is detected within the element.
 191          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 192          * @param {HTMLElement} t The target of the event.
 193          */
 194 <span id='Ext-Element-event-mouseover'>        /**
 195 </span>         * @event mouseover
 196          * Fires when a mouseover is detected within the element.
 197          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 198          * @param {HTMLElement} t The target of the event.
 199          */
 200 <span id='Ext-Element-event-mousemove'>        /**
 201 </span>         * @event mousemove
 202          * Fires when a mousemove is detected with the element.
 203          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 204          * @param {HTMLElement} t The target of the event.
 205          */
 206 <span id='Ext-Element-event-mouseout'>        /**
 207 </span>         * @event mouseout
 208          * Fires when a mouseout is detected with the element.
 209          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 210          * @param {HTMLElement} t The target of the event.
 211          */
 212 <span id='Ext-Element-event-mouseenter'>        /**
 213 </span>         * @event mouseenter
 214          * Fires when the mouse enters the element.
 215          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 216          * @param {HTMLElement} t The target of the event.
 217          */
 218 <span id='Ext-Element-event-mouseleave'>        /**
 219 </span>         * @event mouseleave
 220          * Fires when the mouse leaves the element.
 221          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 222          * @param {HTMLElement} t The target of the event.
 223          */
 224
 225         //  Keyboard events
 226 <span id='Ext-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          */
 232 <span id='Ext-Element-event-keydown'>        /**
 233 </span>         * @event keydown
 234          * Fires when a keydown is detected within the element.
 235          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 236          * @param {HTMLElement} t The target of the event.
 237          */
 238 <span id='Ext-Element-event-keyup'>        /**
 239 </span>         * @event keyup
 240          * Fires when a keyup is detected within the element.
 241          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 242          * @param {HTMLElement} t The target of the event.
 243          */
 244
 245
 246         //  HTML frame/object events
 247 <span id='Ext-Element-event-load'>        /**
 248 </span>         * @event load
 249          * Fires when the user agent finishes loading all content within the element. Only supported by window, frames,
 250          * objects and images.
 251          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 252          * @param {HTMLElement} t The target of the event.
 253          */
 254 <span id='Ext-Element-event-unload'>        /**
 255 </span>         * @event unload
 256          * Fires when the user agent removes all content from a window or frame. For elements, it fires when the target
 257          * element or any of its content has been removed.
 258          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 259          * @param {HTMLElement} t The target of the event.
 260          */
 261 <span id='Ext-Element-event-abort'>        /**
 262 </span>         * @event abort
 263          * Fires when an object/image is stopped from loading before completely loaded.
 264          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 265          * @param {HTMLElement} t The target of the event.
 266          */
 267 <span id='Ext-Element-event-error'>        /**
 268 </span>         * @event error
 269          * Fires when an object/image/frame cannot be loaded properly.
 270          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 271          * @param {HTMLElement} t The target of the event.
 272          */
 273 <span id='Ext-Element-event-resize'>        /**
 274 </span>         * @event resize
 275          * Fires when a document view is resized.
 276          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 277          * @param {HTMLElement} t The target of the event.
 278          */
 279 <span id='Ext-Element-event-scroll'>        /**
 280 </span>         * @event scroll
 281          * Fires when a document view is scrolled.
 282          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 283          * @param {HTMLElement} t The target of the event.
 284          */
 285
 286         //  Form events
 287 <span id='Ext-Element-event-select'>        /**
 288 </span>         * @event select
 289          * Fires when a user selects some text in a text field, including input and textarea.
 290          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 291          * @param {HTMLElement} t The target of the event.
 292          */
 293 <span id='Ext-Element-event-change'>        /**
 294 </span>         * @event change
 295          * Fires when a control loses the input focus and its value has been modified since gaining focus.
 296          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 297          * @param {HTMLElement} t The target of the event.
 298          */
 299 <span id='Ext-Element-event-submit'>        /**
 300 </span>         * @event submit
 301          * Fires when a form is submitted.
 302          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 303          * @param {HTMLElement} t The target of the event.
 304          */
 305 <span id='Ext-Element-event-reset'>        /**
 306 </span>         * @event reset
 307          * Fires when a form is reset.
 308          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 309          * @param {HTMLElement} t The target of the event.
 310          */
 311 <span id='Ext-Element-event-focus'>        /**
 312 </span>         * @event focus
 313          * Fires when an element receives focus either via the pointing device or by tab navigation.
 314          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 315          * @param {HTMLElement} t The target of the event.
 316          */
 317 <span id='Ext-Element-event-blur'>        /**
 318 </span>         * @event blur
 319          * Fires when an element loses focus either via the pointing device or by tabbing navigation.
 320          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 321          * @param {HTMLElement} t The target of the event.
 322          */
 323
 324         //  User Interface events
 325 <span id='Ext-Element-event-DOMFocusIn'>        /**
 326 </span>         * @event DOMFocusIn
 327          * Where supported. Similar to HTML focus event, but can be applied to any focusable element.
 328          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 329          * @param {HTMLElement} t The target of the event.
 330          */
 331 <span id='Ext-Element-event-DOMFocusOut'>        /**
 332 </span>         * @event DOMFocusOut
 333          * Where supported. Similar to HTML blur event, but can be applied to any focusable element.
 334          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 335          * @param {HTMLElement} t The target of the event.
 336          */
 337 <span id='Ext-Element-event-DOMActivate'>        /**
 338 </span>         * @event DOMActivate
 339          * Where supported. Fires when an element is activated, for instance, through a mouse click or a keypress.
 340          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 341          * @param {HTMLElement} t The target of the event.
 342          */
 343
 344         //  DOM Mutation events
 345 <span id='Ext-Element-event-DOMSubtreeModified'>        /**
 346 </span>         * @event DOMSubtreeModified
 347          * Where supported. Fires when the subtree is modified.
 348          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 349          * @param {HTMLElement} t The target of the event.
 350          */
 351 <span id='Ext-Element-event-DOMNodeInserted'>        /**
 352 </span>         * @event DOMNodeInserted
 353          * Where supported. Fires when a node has been added as a child of another node.
 354          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 355          * @param {HTMLElement} t The target of the event.
 356          */
 357 <span id='Ext-Element-event-DOMNodeRemoved'>        /**
 358 </span>         * @event DOMNodeRemoved
 359          * Where supported. Fires when a descendant node of the element is removed.
 360          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 361          * @param {HTMLElement} t The target of the event.
 362          */
 363 <span id='Ext-Element-event-DOMNodeRemovedFromDocument'>        /**
 364 </span>         * @event DOMNodeRemovedFromDocument
 365          * Where supported. Fires when a node is being removed from a document.
 366          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 367          * @param {HTMLElement} t The target of the event.
 368          */
 369 <span id='Ext-Element-event-DOMNodeInsertedIntoDocument'>        /**
 370 </span>         * @event DOMNodeInsertedIntoDocument
 371          * Where supported. Fires when a node is being inserted into a document.
 372          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 373          * @param {HTMLElement} t The target of the event.
 374          */
 375 <span id='Ext-Element-event-DOMAttrModified'>        /**
 376 </span>         * @event DOMAttrModified
 377          * Where supported. Fires when an attribute has been modified.
 378          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 379          * @param {HTMLElement} t The target of the event.
 380          */
 381 <span id='Ext-Element-event-DOMCharacterDataModified'>        /**
 382 </span>         * @event DOMCharacterDataModified
 383          * Where supported. Fires when the character data has been modified.
 384          * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event.
 385          * @param {HTMLElement} t The target of the event.
 386          */
 387
 388 <span id='Ext-Element-property-defaultUnit'>        /**
 389 </span>         * @property {String} defaultUnit
 390          * The default unit to append to CSS values where a unit isn't provided.
 391          */
 392         defaultUnit: &quot;px&quot;,
 393
 394 <span id='Ext-Element-method-is'>        /**
 395 </span>         * Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)
 396          * @param {String} selector The simple selector to test
 397          * @return {Boolean} True if this element matches the selector, else false
 398          */
 399         is: function(simpleSelector) {
 400             return Ext.DomQuery.is(this.dom, simpleSelector);
 401         },
 402
 403 <span id='Ext-Element-method-focus'>        /**
 404 </span>         * Tries to focus the element. Any exceptions are caught and ignored.
 405          * @param {Number} defer (optional) Milliseconds to defer the focus
 406          * @return {Ext.Element} this
 407          */
 408         focus: function(defer,
 409                         /* private */
 410                         dom) {
 411             var me = this;
 412             dom = dom || me.dom;
 413             try {
 414                 if (Number(defer)) {
 415                     Ext.defer(me.focus, defer, null, [null, dom]);
 416                 } else {
 417                     dom.focus();
 418                 }
 419             } catch(e) {}
 420             return me;
 421         },
 422
 423 <span id='Ext-Element-method-blur'>        /**
 424 </span>         * Tries to blur the element. Any exceptions are caught and ignored.
 425          * @return {Ext.Element} this
 426          */
 427         blur: function() {
 428             try {
 429                 this.dom.blur();
 430             } catch(e) {}
 431             return this;
 432         },
 433
 434 <span id='Ext-Element-method-getValue'>        /**
 435 </span>         * Returns the value of the &quot;value&quot; attribute
 436          * @param {Boolean} asNumber true to parse the value as a number
 437          * @return {String/Number}
 438          */
 439         getValue: function(asNumber) {
 440             var val = this.dom.value;
 441             return asNumber ? parseInt(val, 10) : val;
 442         },
 443
 444 <span id='Ext-Element-method-addListener'>        /**
 445 </span>         * Appends an event handler to this element.
 446          *
 447          * @param {String} eventName The name of event to handle.
 448          *
 449          * @param {Function} fn The handler function the event invokes. This function is passed the following parameters:
 450          *
 451          * - **evt** : EventObject
 452          *
 453          *   The {@link Ext.EventObject EventObject} describing the event.
 454          *
 455          * - **el** : HtmlElement
 456          *
 457          *   The DOM element which was the target of the event. Note that this may be filtered by using the delegate option.
 458          *
 459          * - **o** : Object
 460          *
 461          *   The options object from the addListener call.
 462          *
 463          * @param {Object} scope (optional) The scope (**this** reference) in which the handler function is executed. **If
 464          * omitted, defaults to this Element.**
 465          *
 466          * @param {Object} options (optional) An object containing handler configuration properties. This may contain any of
 467          * the following properties:
 468          *
 469          * - **scope** Object :
 470          *
 471          *   The scope (**this** reference) in which the handler function is executed. **If omitted, defaults to this
 472          *   Element.**
 473          *
 474          * - **delegate** String:
 475          *
 476          *   A simple selector to filter the target or look for a descendant of the target. See below for additional details.
 477          *
 478          * - **stopEvent** Boolean:
 479          *
 480          *   True to stop the event. That is stop propagation, and prevent the default action.
 481          *
 482          * - **preventDefault** Boolean:
 483          *
 484          *   True to prevent the default action
 485          *
 486          * - **stopPropagation** Boolean:
 487          *
 488          *   True to prevent event propagation
 489          *
 490          * - **normalized** Boolean:
 491          *
 492          *   False to pass a browser event to the handler function instead of an Ext.EventObject
 493          *
 494          * - **target** Ext.Element:
 495          *
 496          *   Only call the handler if the event was fired on the target Element, _not_ if the event was bubbled up from a
 497          *   child node.
 498          *
 499          * - **delay** Number:
 500          *
 501          *   The number of milliseconds to delay the invocation of the handler after the event fires.
 502          *
 503          * - **single** Boolean:
 504          *
 505          *   True to add a handler to handle just the next firing of the event, and then remove itself.
 506          *
 507          * - **buffer** Number:
 508          *
 509          *   Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed by the specified number of
 510          *   milliseconds. If the event fires again within that time, the original handler is _not_ invoked, but the new
 511          *   handler is scheduled in its place.
 512          *
 513          * **Combining Options**
 514          *
 515          * In the following examples, the shorthand form {@link #on} is used rather than the more verbose addListener. The
 516          * two are equivalent. Using the options argument, it is possible to combine different types of listeners:
 517          *
 518          * A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the options
 519          * object. The options object is available as the third parameter in the handler function.
 520          *
 521          * Code:
 522          *
 523          *     el.on('click', this.onClick, this, {
 524          *         single: true,
 525          *         delay: 100,
 526          *         stopEvent : true,
 527          *         forumId: 4
 528          *     });
 529          *
 530          * **Attaching multiple handlers in 1 call**
 531          *
 532          * The method also allows for a single argument to be passed which is a config object containing properties which
 533          * specify multiple handlers.
 534          *
 535          * Code:
 536          *
 537          *     el.on({
 538          *         'click' : {
 539          *             fn: this.onClick,
 540          *             scope: this,
 541          *             delay: 100
 542          *         },
 543          *         'mouseover' : {
 544          *             fn: this.onMouseOver,
 545          *             scope: this
 546          *         },
 547          *         'mouseout' : {
 548          *             fn: this.onMouseOut,
 549          *             scope: this
 550          *         }
 551          *     });
 552          *
 553          * Or a shorthand syntax:
 554          *
 555          * Code:
 556          *
 557          *     el.on({
 558          *         'click' : this.onClick,
 559          *         'mouseover' : this.onMouseOver,
 560          *         'mouseout' : this.onMouseOut,
 561          *         scope: this
 562          *     });
 563          *
 564          * **delegate**
 565          *
 566          * This is a configuration option that you can pass along when registering a handler for an event to assist with
 567          * event delegation. Event delegation is a technique that is used to reduce memory consumption and prevent exposure
 568          * to memory-leaks. By registering an event for a container element as opposed to each element within a container.
 569          * By setting this configuration option to a simple selector, the target element will be filtered to look for a
 570          * descendant of the target. For example:
 571          *
 572          *     // using this markup:
 573          *     &lt;div id='elId'&gt;
 574          *         &lt;p id='p1'&gt;paragraph one&lt;/p&gt;
 575          *         &lt;p id='p2' class='clickable'&gt;paragraph two&lt;/p&gt;
 576          *         &lt;p id='p3'&gt;paragraph three&lt;/p&gt;
 577          *     &lt;/div&gt;
 578          *
 579          *     // utilize event delegation to registering just one handler on the container element:
 580          *     el = Ext.get('elId');
 581          *     el.on(
 582          *         'click',
 583          *         function(e,t) {
 584          *             // handle click
 585          *             console.info(t.id); // 'p2'
 586          *         },
 587          *         this,
 588          *         {
 589          *             // filter the target element to be a descendant with the class 'clickable'
 590          *             delegate: '.clickable'
 591          *         }
 592          *     );
 593          *
 594          * @return {Ext.Element} this
 595          */
 596         addListener: function(eventName, fn, scope, options) {
 597             Ext.EventManager.on(this.dom, eventName, fn, scope || this, options);
 598             return this;
 599         },
 600
 601 <span id='Ext-Element-method-removeListener'>        /**
 602 </span>         * Removes an event handler from this element.
 603          *
 604          * **Note**: if a *scope* was explicitly specified when {@link #addListener adding} the listener,
 605          * the same scope must be specified here.
 606          *
 607          * Example:
 608          *
 609          *     el.removeListener('click', this.handlerFn);
 610          *     // or
 611          *     el.un('click', this.handlerFn);
 612          *
 613          * @param {String} eventName The name of the event from which to remove the handler.
 614          * @param {Function} fn The handler function to remove. **This must be a reference to the function passed into the
 615          * {@link #addListener} call.**
 616          * @param {Object} scope If a scope (**this** reference) was specified when the listener was added, then this must
 617          * refer to the same object.
 618          * @return {Ext.Element} this
 619          */
 620         removeListener: function(eventName, fn, scope) {
 621             Ext.EventManager.un(this.dom, eventName, fn, scope || this);
 622             return this;
 623         },
 624
 625 <span id='Ext-Element-method-removeAllListeners'>        /**
 626 </span>         * Removes all previous added listeners from this element
 627          * @return {Ext.Element} this
 628          */
 629         removeAllListeners: function() {
 630             Ext.EventManager.removeAll(this.dom);
 631             return this;
 632         },
 633
 634 <span id='Ext-Element-method-purgeAllListeners'>        /**
 635 </span>         * Recursively removes all previous added listeners from this element and its children
 636          * @return {Ext.Element} this
 637          */
 638         purgeAllListeners: function() {
 639             Ext.EventManager.purgeElement(this);
 640             return this;
 641         },
 642
 643 <span id='Ext-Element-method-addUnits'>        /**
 644 </span>         * Test if size has a unit, otherwise appends the passed unit string, or the default for this Element.
 645          * @param size {Mixed} The size to set
 646          * @param units {String} The units to append to a numeric size value
 647          * @private
 648          */
 649         addUnits: function(size, units) {
 650
 651             // Most common case first: Size is set to a number
 652             if (Ext.isNumber(size)) {
 653                 return size + (units || this.defaultUnit || 'px');
 654             }
 655
 656             // Size set to a value which means &quot;auto&quot;
 657             if (size === &quot;&quot; || size == &quot;auto&quot; || size == null) {
 658                 return size || '';
 659             }
 660
 661             // Otherwise, warn if it's not a valid CSS measurement
 662             if (!unitPattern.test(size)) {
 663                 //&lt;debug&gt;
 664                 if (Ext.isDefined(Ext.global.console)) {
 665                     Ext.global.console.warn(&quot;Warning, size detected as NaN on Element.addUnits.&quot;);
 666                 }
 667                 //&lt;/debug&gt;
 668                 return size || '';
 669             }
 670             return size;
 671         },
 672
 673 <span id='Ext-Element-method-isBorderBox'>        /**
 674 </span>         * Tests various css rules/browsers to determine if this element uses a border box
 675          * @return {Boolean}
 676          */
 677         isBorderBox: function() {
 678             return Ext.isBorderBox || noBoxAdjust[(this.dom.tagName || &quot;&quot;).toLowerCase()];
 679         },
 680
 681 <span id='Ext-Element-method-remove'>        /**
 682 </span>         * Removes this element's dom reference. Note that event and cache removal is handled at {@link Ext#removeNode
 683          * Ext.removeNode}
 684          */
 685         remove: function() {
 686             var me = this,
 687             dom = me.dom;
 688
 689             if (dom) {
 690                 delete me.dom;
 691                 Ext.removeNode(dom);
 692             }
 693         },
 694
 695 <span id='Ext-Element-method-hover'>        /**
 696 </span>         * Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element.
 697          * @param {Function} overFn The function to call when the mouse enters the Element.
 698          * @param {Function} outFn The function to call when the mouse leaves the Element.
 699          * @param {Object} scope (optional) The scope (`this` reference) in which the functions are executed. Defaults
 700          * to the Element's DOM element.
 701          * @param {Object} options (optional) Options for the listener. See {@link Ext.util.Observable#addListener the
 702          * options parameter}.
 703          * @return {Ext.Element} this
 704          */
 705         hover: function(overFn, outFn, scope, options) {
 706             var me = this;
 707             me.on('mouseenter', overFn, scope || me.dom, options);
 708             me.on('mouseleave', outFn, scope || me.dom, options);
 709             return me;
 710         },
 711
 712 <span id='Ext-Element-method-contains'>        /**
 713 </span>         * Returns true if this element is an ancestor of the passed element
 714          * @param {HTMLElement/String} el The element to check
 715          * @return {Boolean} True if this element is an ancestor of el, else false
 716          */
 717         contains: function(el) {
 718             return ! el ? false: Ext.Element.isAncestor(this.dom, el.dom ? el.dom: el);
 719         },
 720
 721 <span id='Ext-Element-method-getAttributeNS'>        /**
 722 </span>         * Returns the value of a namespaced attribute from the element's underlying DOM node.
 723          * @param {String} namespace The namespace in which to look for the attribute
 724          * @param {String} name The attribute name
 725          * @return {String} The attribute value
 726          */
 727         getAttributeNS: function(ns, name) {
 728             return this.getAttribute(name, ns);
 729         },
 730
 731 <span id='Ext-Element-method-getAttribute'>        /**
 732 </span>         * Returns the value of an attribute from the element's underlying DOM node.
 733          * @param {String} name The attribute name
 734          * @param {String} namespace (optional) The namespace in which to look for the attribute
 735          * @return {String} The attribute value
 736          * @method
 737          */
 738         getAttribute: (Ext.isIE &amp;&amp; !(Ext.isIE9 &amp;&amp; document.documentMode === 9)) ?
 739         function(name, ns) {
 740             var d = this.dom,
 741             type;
 742             if(ns) {
 743                 type = typeof d[ns + &quot;:&quot; + name];
 744                 if (type != 'undefined' &amp;&amp; type != 'unknown') {
 745                     return d[ns + &quot;:&quot; + name] || null;
 746                 }
 747                 return null;
 748             }
 749             if (name === &quot;for&quot;) {
 750                 name = &quot;htmlFor&quot;;
 751             }
 752             return d[name] || null;
 753         }: function(name, ns) {
 754             var d = this.dom;
 755             if (ns) {
 756                return d.getAttributeNS(ns, name) || d.getAttribute(ns + &quot;:&quot; + name);
 757             }
 758             return  d.getAttribute(name) || d[name] || null;
 759         },
 760
 761 <span id='Ext-Element-method-update'>        /**
 762 </span>         * Update the innerHTML of this element
 763          * @param {String} html The new HTML
 764          * @return {Ext.Element} this
 765          */
 766         update: function(html) {
 767             if (this.dom) {
 768                 this.dom.innerHTML = html;
 769             }
 770             return this;
 771         }
 772     };
 773
 774     var ep = El.prototype;
 775
 776     El.addMethods = function(o) {
 777         Ext.apply(ep, o);
 778     };
 779
 780 <span id='Ext-Element-method-on'>    /**
 781 </span>     * @method
 782      * @alias Ext.Element#addListener
 783      * Shorthand for {@link #addListener}.
 784      */
 785     ep.on = ep.addListener;
 786
 787 <span id='Ext-Element-method-un'>    /**
 788 </span>     * @method
 789      * @alias Ext.Element#removeListener
 790      * Shorthand for {@link #removeListener}.
 791      */
 792     ep.un = ep.removeListener;
 793
 794 <span id='Ext-Element-method-clearListeners'>    /**
 795 </span>     * @method
 796      * @alias Ext.Element#removeAllListeners
 797      * Alias for {@link #removeAllListeners}.
 798      */
 799     ep.clearListeners = ep.removeAllListeners;
 800
 801 <span id='Ext-Element-method-destroy'>    /**
 802 </span>     * @method destroy
 803      * @member Ext.Element
 804      * Removes this element's dom reference. Note that event and cache removal is handled at {@link Ext#removeNode
 805      * Ext.removeNode}. Alias to {@link #remove}.
 806      */
 807     ep.destroy = ep.remove;
 808
 809 <span id='Ext-Element-property-autoBoxAdjust'>    /**
 810 </span>     * @property {Boolean} autoBoxAdjust
 811      * true to automatically adjust width and height settings for box-model issues (default to true)
 812      */
 813     ep.autoBoxAdjust = true;
 814
 815     // private
 816     var unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,
 817     docEl;
 818
 819 <span id='Ext-Element-static-method-get'>    /**
 820 </span>     * Retrieves Ext.Element objects. {@link Ext#get} is an alias for {@link Ext.Element#get}.
 821      *
 822      * **This method does not retrieve {@link Ext.Component Component}s.** This method retrieves Ext.Element
 823      * objects which encapsulate DOM elements. To retrieve a Component by its ID, use {@link Ext.ComponentManager#get}.
 824      *
 825      * Uses simple caching to consistently return the same object. Automatically fixes if an object was recreated with
 826      * the same id via AJAX or DOM.
 827      *
 828      * @param {String/HTMLElement/Ext.Element} el The id of the node, a DOM Node or an existing Element.
 829      * @return {Ext.Element} The Element object (or null if no matching element was found)
 830      * @static
 831      */
 832     El.get = function(el) {
 833         var ex,
 834         elm,
 835         id;
 836         if (!el) {
 837             return null;
 838         }
 839         if (typeof el == &quot;string&quot;) {
 840             // element id
 841             if (! (elm = DOC.getElementById(el))) {
 842                 return null;
 843             }
 844             if (EC[el] &amp;&amp; EC[el].el) {
 845                 ex = EC[el].el;
 846                 ex.dom = elm;
 847             } else {
 848                 ex = El.addToCache(new El(elm));
 849             }
 850             return ex;
 851         } else if (el.tagName) {
 852             // dom element
 853             if (! (id = el.id)) {
 854                 id = Ext.id(el);
 855             }
 856             if (EC[id] &amp;&amp; EC[id].el) {
 857                 ex = EC[id].el;
 858                 ex.dom = el;
 859             } else {
 860                 ex = El.addToCache(new El(el));
 861             }
 862             return ex;
 863         } else if (el instanceof El) {
 864             if (el != docEl) {
 865                 // refresh dom element in case no longer valid,
 866                 // catch case where it hasn't been appended
 867                 // If an el instance is passed, don't pass to getElementById without some kind of id
 868                 if (Ext.isIE &amp;&amp; (el.id == undefined || el.id == '')) {
 869                     el.dom = el.dom;
 870                 } else {
 871                     el.dom = DOC.getElementById(el.id) || el.dom;
 872                 }
 873             }
 874             return el;
 875         } else if (el.isComposite) {
 876             return el;
 877         } else if (Ext.isArray(el)) {
 878             return El.select(el);
 879         } else if (el == DOC) {
 880             // create a bogus element object representing the document object
 881             if (!docEl) {
 882                 var f = function() {};
 883                 f.prototype = El.prototype;
 884                 docEl = new f();
 885                 docEl.dom = DOC;
 886             }
 887             return docEl;
 888         }
 889         return null;
 890     };
 891
 892 <span id='Ext-Element-method-getById'>    /**
 893 </span>     * Retrieves Ext.Element objects like {@link Ext#get} but is optimized for sub-elements.
 894      * This is helpful for performance, because in IE (prior to IE 9), `getElementById` uses
 895      * an non-optimized search. In those browsers, starting the search for an element with a
 896      * matching ID at a parent of that element will greatly speed up the process.
 897      *
 898      * Unlike {@link Ext#get}, this method only accepts ID's. If the ID is not a child of
 899      * this element, it will still be found if it exists in the document, but will be slower
 900      * than calling {@link Ext#get} directly.
 901      *
 902      * @param {String} id The id of the element to get.
 903      * @return {Ext.Element} The Element object (or null if no matching element was found)
 904      * @member Ext.Element
 905      * @method getById
 906      * @markdown
 907      */
 908     ep.getById = (!Ext.isIE6 &amp;&amp; !Ext.isIE7 &amp;&amp; !Ext.isIE8) ? El.get :
 909         function (id) {
 910             var dom = this.dom,
 911                 cached, el, ret;
 912
 913             if (dom) {
 914                 el = dom.all[id];
 915                 if (el) {
 916                     // calling El.get here is a real hit (2x slower) because it has to
 917                     // redetermine that we are giving it a dom el.
 918                     cached = EC[id];
 919                     if (cached &amp;&amp; cached.el) {
 920                         ret = cached.el;
 921                         ret.dom = el;
 922                     } else {
 923                         ret = El.addToCache(new El(el));
 924                     }
 925                     return ret;
 926                 }
 927             }
 928
 929             return El.get(id);
 930         };
 931
 932     El.addToCache = function(el, id) {
 933         if (el) {
 934             id = id || el.id;
 935             EC[id] = {
 936                 el: el,
 937                 data: {},
 938                 events: {}
 939             };
 940         }
 941         return el;
 942     };
 943
 944     // private method for getting and setting element data
 945     El.data = function(el, key, value) {
 946         el = El.get(el);
 947         if (!el) {
 948             return null;
 949         }
 950         var c = EC[el.id].data;
 951         if (arguments.length == 2) {
 952             return c[key];
 953         } else {
 954             return (c[key] = value);
 955         }
 956     };
 957
 958     // private
 959     // Garbage collection - uncache elements/purge listeners on orphaned elements
 960     // so we don't hold a reference and cause the browser to retain them
 961     function garbageCollect() {
 962         if (!Ext.enableGarbageCollector) {
 963             clearInterval(El.collectorThreadId);
 964         } else {
 965             var eid,
 966             el,
 967             d,
 968             o;
 969
 970             for (eid in EC) {
 971                 if (!EC.hasOwnProperty(eid)) {
 972                     continue;
 973                 }
 974                 o = EC[eid];
 975                 if (o.skipGarbageCollection) {
 976                     continue;
 977                 }
 978                 el = o.el;
 979                 d = el.dom;
 980                 // -------------------------------------------------------
 981                 // Determining what is garbage:
 982                 // -------------------------------------------------------
 983                 // !d
 984                 // dom node is null, definitely garbage
 985                 // -------------------------------------------------------
 986                 // !d.parentNode
 987                 // no parentNode == direct orphan, definitely garbage
 988                 // -------------------------------------------------------
 989                 // !d.offsetParent &amp;&amp; !document.getElementById(eid)
 990                 // display none elements have no offsetParent so we will
 991                 // also try to look it up by it's id. However, check
 992                 // offsetParent first so we don't do unneeded lookups.
 993                 // This enables collection of elements that are not orphans
 994                 // directly, but somewhere up the line they have an orphan
 995                 // parent.
 996                 // -------------------------------------------------------
 997                 if (!d || !d.parentNode || (!d.offsetParent &amp;&amp; !DOC.getElementById(eid))) {
 998                     if (d &amp;&amp; Ext.enableListenerCollection) {
 999                         Ext.EventManager.removeAll(d);
1000                     }
1001                     delete EC[eid];
1002                 }
1003             }
1004             // Cleanup IE Object leaks
1005             if (Ext.isIE) {
1006                 var t = {};
1007                 for (eid in EC) {
1008                     if (!EC.hasOwnProperty(eid)) {
1009                         continue;
1010                     }
1011                     t[eid] = EC[eid];
1012                 }
1013                 EC = Ext.cache = t;
1014             }
1015         }
1016     }
1017     El.collectorThreadId = setInterval(garbageCollect, 30000);
1018
1019     var flyFn = function() {};
1020     flyFn.prototype = El.prototype;
1021
1022     // dom is optional
1023     El.Flyweight = function(dom) {
1024         this.dom = dom;
1025     };
1026
1027     El.Flyweight.prototype = new flyFn();
1028     El.Flyweight.prototype.isFlyweight = true;
1029     El._flyweights = {};
1030
1031 <span id='Ext-Element-static-method-fly'>    /**
1032 </span>     * Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference
1033      * to this element - the dom node can be overwritten by other code. {@link Ext#fly} is alias for
1034      * {@link Ext.Element#fly}.
1035      *
1036      * Use this to make one-time references to DOM elements which are not going to be accessed again either by
1037      * application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link
1038      * Ext#get Ext.get} will be more appropriate to take advantage of the caching provided by the Ext.Element
1039      * class.
1040      *
1041      * @param {String/HTMLElement} el The dom node or id
1042      * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts (e.g.
1043      * internally Ext uses &quot;_global&quot;)
1044      * @return {Ext.Element} The shared Element object (or null if no matching element was found)
1045      * @static
1046      */
1047     El.fly = function(el, named) {
1048         var ret = null;
1049         named = named || '_global';
1050         el = Ext.getDom(el);
1051         if (el) {
1052             (El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el;
1053             ret = El._flyweights[named];
1054         }
1055         return ret;
1056     };
1057
1058 <span id='Ext-method-get'>    /**
1059 </span>     * @member Ext
1060      * @method get
1061      * @alias Ext.Element#get
1062      */
1063     Ext.get = El.get;
1064
1065 <span id='Ext-method-fly'>    /**
1066 </span>     * @member Ext
1067      * @method fly
1068      * @alias Ext.Element#fly
1069      */
1070     Ext.fly = El.fly;
1071
1072     // speedy lookup for elements never to box adjust
1073     var noBoxAdjust = Ext.isStrict ? {
1074         select: 1
1075     }: {
1076         input: 1,
1077         select: 1,
1078         textarea: 1
1079     };
1080     if (Ext.isIE || Ext.isGecko) {
1081         noBoxAdjust['button'] = 1;
1082     }
1083 })();
1084 </pre>
1085 </body>
1086 </html>