docs/source/Element.html

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