docs/source/Element.html

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