docs/source/Element.html

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