docs/source/Element2.html

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