Properties Methods Events Direct Link

# Class Ext.Element

Package: | Ext
Defined In: | Element.js, Element.insertion.js, Element.scroll.js, Element.style.js, Element.position.js, Element.traversal.js
Class: | Element
Extends: | Object

Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.

All instances of this class inherit the methods of Ext.Fx making visual effects easily available to all DOM elements.

Note that the events documented in this class are not Ext events, they encapsulate browser events. To access the underlying browser event, see Ext.EventObject.browserEvent. Some older browsers may not support the full range of events. Which events are supported is beyond the control of ExtJs.

Usage:

    // by id
    var el = Ext.get("my-div");

    // by DOM element reference
    var el = Ext.get(myDivElement);

Animations
Many of the functions for manipulating an element have an optional "animate" parameter. The animate parameter should either be a boolean (true) or an object literal with animation options. Note that the supported Element animation options are a subset of the Ext.Fx animation options specific to Fx effects. The Element animation options are:

    Option    Default   Description
    --------- --------  ---------------------------------------------
    duration  .35       The duration of the animation in seconds
    easing    easeOut   The easing method
    callback  none      A function to execute when the anim completes
    scope     this      The scope (this) of the callback function

Also, the Anim object being used for the animation will be set on your options object as "anim", which allows you to stop or manipulate the animation. Here's an example:

    var el = Ext.get("my-div");

    // no animation
    el.setWidth(100);

    // default animation
    el.setWidth(100, true);

    // animation with some options set
    el.setWidth(100, {
        duration: 1,
        callback: this.foo,
        scope: this
    });

    // using the "anim" property to get the Anim object
    var opt = {
        duration: 1,
        callback: this.foo,
        scope: this
    };
    el.setWidth(100, opt);
    ...
    if(opt.anim.isAnimated()){
        opt.anim.stop();
    }

Composite (Collections of) Elements
For working with collections of Elements, see Ext.CompositeElement

## Public Properties

Property | Defined By
--- | ---
| DISPLAY : Number Visibility mode constant for use with setVisibilityMode. Use display to hide element | Element
| VISIBILITY : Number Visibility mode constant for use with setVisibilityMode. Use visibility to hide element | Element
| autoBoxAdjust : Object true to automatically adjust width and height settings for box-model issues (default to true) | Element
| defaultUnit : String The default unit to append to CSS values where a unit isn't provided (defaults to px). | Element
| dom : HTMLElement The DOM element | Element
| id : String The DOM element ID | Element
| originalDisplay : String The element's default display mode (defaults to "") | Element

## Public Methods

Method | Defined By
--- | ---
| Element( `String/HTMLElement element`, [`Boolean forceNew`] ) Create a new Element directly. Create a new Element directly. Parameters: `element` : String/HTMLElement `forceNew` : Boolean (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). Returns: void | Element
| addClass( `String/Array className` ) : Ext.Element Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out. Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out. Parameters: `className` : String/Array The CSS class to add, or an array of classes Returns: `Ext.Element` this | Element
- | addListener( `String eventName`, `Function fn`, [`Object scope`], [`Object options`] ) : Ext.Element Appends an event handler to this element. The shorthand version on is equivalent. Appends an event handler to this element. The shorthand version on is equivalent. Parameters: `eventName` : String The type of event to handle `fn` : Function The handler function the event invokes. This function is passed the following parameters: evt : EventObject The EventObject describing the event. t : Element The Element which was the target of the event. Note that this may be filtered by using the `delegate` option. o : Object The options object from the addListener call. `scope` : Object (optional) The scope (The `this` reference) of the handler function. Defaults to this Element. `options` : Object (optional) An object containing handler configuration properties. This may contain any of the following properties: scope {Object} : The scope in which to execute the handler function. The handler function's "this" context. delegate {String} : A simple selector to filter the target or look for a descendant of the target stopEvent {Boolean} : True to stop the event. That is stop propagation, and prevent the default action. preventDefault {Boolean} : True to prevent the default action stopPropagation {Boolean} : True to prevent event propagation normalized {Boolean} : False to pass a browser event to the handler function instead of an Ext.EventObject delay {Number} : The number of milliseconds to delay the invocation of the handler after te event fires. single {Boolean} : True to add a handler to handle just the next firing of the event, and then remove itself. buffer {Number} : Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place. Combining Options In the following examples, the shorthand form on is used rather than the more verbose addListener. The two are equivalent. Using the options argument, it is possible to combine different types of listeners: A normalized, delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the options object. The options object is available as the third parameter in the handler function. Code:
      el.on('click', this.onClick, this, {
          single: true,
          delay: 100,
          stopEvent : true,
          forumId: 4
      });
  Attaching multiple handlers in 1 call The method also allows for a single argument to be passed which is a config object containing properties which specify multiple handlers. Code:
      el.on({
          'click' : {
              fn: this.onClick,
              scope: this,
              delay: 100
          },
          'mouseover' : {
              fn: this.onMouseOver,
              scope: this
          },
          'mouseout' : {
              fn: this.onMouseOut,
              scope: this
          }
      });
  Or a shorthand syntax: Code:
      el.on({
          'click' : this.onClick,
          'mouseover' : this.onMouseOver,
          'mouseout' : this.onMouseOut,
          scope: this
      });
Returns: `Ext.Element` this | Element
| animate( `Object args`, [`Float duration`], [`Function onComplete`], [`String easing`], [`String animType`] ) : Ext.Element Perform animation on this element. Perform animation on this element. Parameters: `args` : Object The animation control args `duration` : Float (optional) How long the animation lasts in seconds (defaults to .35) `onComplete` : Function (optional) Function to call when animation completes `easing` : String (optional) Easing method to use (defaults to 'easeOut') `animType` : String (optional) 'run' is the default. Can also be 'color', 'motion', or 'scroll' Returns: `Ext.Element` this | Element
| appendChild( `String/HTMLElement/Array/Element/CompositeElement el` ) : Ext.Element Appends the passed element(s) to this element Appends the passed element(s) to this element Parameters: `el` : String/HTMLElement/Array/Element/CompositeElement Returns: `Ext.Element` this | Element
| appendTo( `Mixed el` ) : Ext.Element Appends this element to the passed element Appends this element to the passed element Parameters: `el` : Mixed The new parent element Returns: `Ext.Element` this | Element
| blur() : Ext.Element Tries to blur the element. Any exceptions are caught and ignored. Tries to blur the element. Any exceptions are caught and ignored. Parameters: None. Returns: `Ext.Element` this | Element
| child( `String selector`, [`Boolean returnDom`] ) : HTMLElement/Ext.Element Selects a single child at any depth below this element based on the passed CSS selector (the selector should not cont... Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id). Parameters: `selector` : String The CSS selector `returnDom` : Boolean (optional) True to return the DOM node instead of Ext.Element (defaults to false) Returns: `HTMLElement/Ext.Element` The child Ext.Element (or DOM node if returnDom = true) | Element
| clearOpacity() : Ext.Element Clears any opacity settings from this element. Required in some cases for IE. Clears any opacity settings from this element. Required in some cases for IE. Parameters: None. Returns: `Ext.Element` this | Element
| clearPositioning( [`String value`] ) : Ext.Element Clear positioning back to the default when the document was loaded Clear positioning back to the default when the document was loaded Parameters: `value` : String (optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'. Returns: `Ext.Element` this | Element
| clip() : Ext.Element Store the current overflow setting and clip overflow on the element - use unclip to remove Store the current overflow setting and clip overflow on the element - use unclip to remove Parameters: None. Returns: `Ext.Element` this | Element
| contains( `HTMLElement/String el` ) : Boolean Returns true if this element is an ancestor of the passed element Returns true if this element is an ancestor of the passed element Parameters: `el` : HTMLElement/String The element to check Returns: `Boolean` True if this element is an ancestor of el, else false | Element
| createChild( `Object config`, [`HTMLElement insertBefore`], [`Boolean returnDom`] ) : Ext.Element Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child e... Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element. Parameters: `config` : Object DomHelper element config object. If no tag is specified (e.g., {tag:'input'}) then a div will be automatically generated with the specified attributes. `insertBefore` : HTMLElement (optional) a child element of this element `returnDom` : Boolean (optional) true to return the dom node instead of creating an Element Returns: `Ext.Element` The new child element | Element
| down( `String selector`, [`Boolean returnDom`] ) : HTMLElement/Ext.Element Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id). Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id). Parameters: `selector` : String The CSS selector `returnDom` : Boolean (optional) True to return the DOM node instead of Ext.Element (defaults to false) Returns: `HTMLElement/Ext.Element` The child Ext.Element (or DOM node if returnDom = true) | Element
| findParent( `String selector`, [`Number/Mixed maxDepth`], [`Boolean returnEl`] ) : HTMLElement Looks at this node and then at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:fi... Looks at this node and then at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child) Parameters: `selector` : String The simple selector to test `maxDepth` : Number/Mixed (optional) The max depth to search as a number or element (defaults to 10 || document.body) `returnEl` : Boolean (optional) True to return a Ext.Element object instead of DOM node Returns: `HTMLElement` The matching DOM node (or null if no match was found) | Element
| findParentNode( `String selector`, [`Number/Mixed maxDepth`], [`Boolean returnEl`] ) : HTMLElement Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child) Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child) Parameters: `selector` : String The simple selector to test `maxDepth` : Number/Mixed (optional) The max depth to search as a number or element (defaults to 10 || document.body) `returnEl` : Boolean (optional) True to return a Ext.Element object instead of DOM node Returns: `HTMLElement` The matching DOM node (or null if no match was found) | Element
| first( [`String selector`], [`Boolean returnDom`] ) : Ext.Element/HTMLElement Gets the first child, skipping text nodes Gets the first child, skipping text nodes Parameters: `selector` : String (optional) Find the next sibling that matches the passed simple selector `returnDom` : Boolean (optional) True to return a raw dom node instead of an Ext.Element Returns: `Ext.Element/HTMLElement` The first child or null | Element
| fly( `String/HTMLElement el`, [`String named`] ) : Element Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to t... Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element - the dom node can be overwritten by other code. Shorthand of Ext.Element.fly Use this to make one-time references to DOM elements which are not going to be accessed again either by application code, or by Ext's classes. If accessing an element which will be processed regularly, then Ext.get will be more appropriate to take advantage of the caching provided by the Ext.Element class. Parameters: `el` : String/HTMLElement The dom node or id `named` : String (optional) Allows for creation of named reusable flyweights to prevent conflicts (e.g. internally Ext uses "_global") Returns: `Element` The shared Element object (or null if no matching element was found) | Element
| focus( [`Number defer`] ) : Ext.Element Tries to focus the element. Any exceptions are caught and ignored. Tries to focus the element. Any exceptions are caught and ignored. Parameters: `defer` : Number (optional) Milliseconds to defer the focus Returns: `Ext.Element` this | Element
| get( `Mixed el` ) : Element <static> Retrieves Ext.Element objects. This method does not retrieve Components. This method retrieves Ext.Element objects wh... <static> Retrieves Ext.Element objects. This method does not retrieve Components. This method retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by its ID, use Ext.ComponentMgr.get. Uses simple caching to consistently return the same object. Automatically fixes if an object was recreated with the same id via AJAX or DOM. Parameters: `el` : Mixed The id of the node, a DOM Node or an existing Element. Returns: `Element` The Element object (or null if no matching element was found) | Element
| getAttributeNS( `String namespace`, `String name` ) : String Returns the value of a namespaced attribute from the element's underlying DOM node. Returns the value of a namespaced attribute from the element's underlying DOM node. Parameters: `namespace` : String The namespace in which to look for the attribute `name` : String The attribute name Returns: `String` The attribute value | Element
| getBorderWidth( `String side` ) : Number Gets the width of the border(s) for the specified side(s) Gets the width of the border(s) for the specified side(s) Parameters: `side` : String Can be t, l, r, b or any combination of those to add multiple values. For example, passing lr would get the border (l)eft width + the border (r)ight width. Returns: `Number` The width of the sides passed added together | Element
| getBottom( `Boolean local` ) : Number Gets the bottom Y coordinate of the element (element Y position + element height) Gets the bottom Y coordinate of the element (element Y position + element height) Parameters: `local` : Boolean True to get the local css position instead of page coordinate Returns: `Number` | Element
| getColor( `String attr`, `String defaultValue`, [`String prefix`] ) : void Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values are convert to stand... Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values are convert to standard 6 digit hex color. Parameters: `attr` : String The css attribute `defaultValue` : String The default value to use when a valid color isn't found `prefix` : String (optional) defaults to #. Use an empty string when working with color anims. Returns: void | Element
| getHeight( [`Boolean contentHeight`] ) : Number Returns the offset height of the element Returns the offset height of the element Parameters: `contentHeight` : Boolean (optional) true to get the height minus borders and padding Returns: `Number` The element's height | Element
| getLeft( `Boolean local` ) : Number Gets the left X coordinate Gets the left X coordinate Parameters: `local` : Boolean True to get the local css position instead of page coordinate Returns: `Number` | Element
| getOffsetsTo( `Mixed element` ) : Array Returns the offsets of this element from the passed element. Both element must be part of the DOM tree and not have d... Returns the offsets of this element from the passed element. Both element must be part of the DOM tree and not have display:none to have page coordinates. Parameters: `element` : Mixed The element to get the offsets from. Returns: `Array` The XY page offsets (e.g. [100, -200]) | Element
| getPadding( `String side` ) : Number Gets the width of the padding(s) for the specified side(s) Gets the width of the padding(s) for the specified side(s) Parameters: `side` : String Can be t, l, r, b or any combination of those to add multiple values. For example, passing lr would get the padding (l)eft + the padding (r)ight. Returns: `Number` The padding of the sides passed added together | Element
| getPositioning() : Object Gets an object with all CSS positioning properties. Useful along with setPostioning to get snapshot before performin... Gets an object with all CSS positioning properties. Useful along with setPostioning to get snapshot before performing an update and then restoring the element. Parameters: None. Returns: `Object` | Element
| getRight( `Boolean local` ) : Number Gets the right X coordinate of the element (element X position + element width) Gets the right X coordinate of the element (element X position + element width) Parameters: `local` : Boolean True to get the local css position instead of page coordinate Returns: `Number` | Element
| getScroll() : Object Returns the current scroll position of the element. Returns the current scroll position of the element. Parameters: None. Returns: `Object` An object containing the scroll position in the format {left: (scrollLeft), top: (scrollTop)} | Element
| getStyle( `String property` ) : String Normalizes currentStyle and computedStyle. Normalizes currentStyle and computedStyle. Parameters: `property` : String The style property whose value is returned. Returns: `String` The current value of the style property for this element. | Element
| getTop( `Boolean local` ) : Number Gets the top Y coordinate Gets the top Y coordinate Parameters: `local` : Boolean True to get the local css position instead of page coordinate Returns: `Number` | Element
| getValue( `Boolean asNumber` ) : String/Number Returns the value of the "value" attribute Returns the value of the "value" attribute Parameters: `asNumber` : Boolean true to parse the value as a number Returns: `String/Number` | Element
| getWidth( [`Boolean contentWidth`] ) : Number Returns the offset width of the element Returns the offset width of the element Parameters: `contentWidth` : Boolean (optional) true to get the width minus borders and padding Returns: `Number` The element's width | Element
| getX() : Number Gets the current X position of the element based on page coordinates. Element must be part of the DOM tree to have p... Gets the current X position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). Parameters: None. Returns: `Number` The X position of the element | Element
| getXY() : Array Gets the current position of the element based on page coordinates. Element must be part of the DOM tree to have pag... Gets the current position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). Parameters: None. Returns: `Array` The XY position of the element | Element
| getY() : Number Gets the current Y position of the element based on page coordinates. Element must be part of the DOM tree to have p... Gets the current Y position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). Parameters: None. Returns: `Number` The Y position of the element | Element
| hasClass( `String className` ) : Boolean Checks if the specified CSS class exists on this element's DOM node. Checks if the specified CSS class exists on this element's DOM node. Parameters: `className` : String The CSS class to check for Returns: `Boolean` True if the class exists, else false | Element
| hide( [`Boolean/Object animate`] ) : Ext.Element Hide this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible. Hide this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible. Parameters: `animate` : Boolean/Object (optional) true for the default animation or a standard Element animation config object Returns: `Ext.Element` this | Element
| hover( `Function overFn`, `Function outFn`, [`Object scope`], [`Object options`] ) : Ext.Element Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element. Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element. Parameters: `overFn` : Function The function to call when the mouse enters the Element. `outFn` : Function The function to call when the mouse leaves the Element. `scope` : Object (optional) The scope (`this` reference) in which the functions are executed. Defaults to the Element's DOM element. `options` : Object (optional) Options for the listener. See the `options` parameter. Returns: `Ext.Element` this | Element
| insertAfter( `Mixed el` ) : Ext.Element Inserts this element after the passed element in the DOM Inserts this element after the passed element in the DOM Parameters: `el` : Mixed The element to insert after Returns: `Ext.Element` this | Element
| insertBefore( `Mixed el` ) : Ext.Element Inserts this element before the passed element in the DOM Inserts this element before the passed element in the DOM Parameters: `el` : Mixed The element before which this element will be inserted Returns: `Ext.Element` this | Element
| insertFirst( `Mixed/Object el` ) : Ext.Element Inserts (or creates) an element (or DomHelper config) as the first child of this element Inserts (or creates) an element (or DomHelper config) as the first child of this element Parameters: `el` : Mixed/Object The id or element to insert or a DomHelper config to create and insert Returns: `Ext.Element` The new child | Element
| insertHtml( `String where`, `String html`, [`Boolean returnEl`] ) : HTMLElement/Ext.Element Inserts an html fragment into this element Inserts an html fragment into this element Parameters: `where` : String Where to insert the html in relation to this element - beforeBegin, afterBegin, beforeEnd, afterEnd. `html` : String The HTML fragment `returnEl` : Boolean (optional) True to return an Ext.Element (defaults to false) Returns: `HTMLElement/Ext.Element` The inserted node (or nearest related if more than 1 inserted) | Element
| is( `String selector` ) : Boolean Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child) Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child) Parameters: `selector` : String The simple selector to test Returns: `Boolean` True if this element matches the selector, else false | Element
| isBorderBox() : Boolean Tests various css rules/browsers to determine if this element uses a border box Tests various css rules/browsers to determine if this element uses a border box Parameters: None. Returns: `Boolean` | Element
| isScrollable() : Boolean Returns true if this element is scrollable. Returns true if this element is scrollable. Parameters: None. Returns: `Boolean` | Element
| isVisible() : Boolean Checks whether the element is currently visible using both visibility and display properties. Checks whether the element is currently visible using both visibility and display properties. Parameters: None. Returns: `Boolean` True if the element is currently visible, else false | Element
| last( [`String selector`], [`Boolean returnDom`] ) : Ext.Element/HTMLElement Gets the last child, skipping text nodes Gets the last child, skipping text nodes Parameters: `selector` : String (optional) Find the previous sibling that matches the passed simple selector `returnDom` : Boolean (optional) True to return a raw dom node instead of an Ext.Element Returns: `Ext.Element/HTMLElement` The last child or null | Element
| load( `Mixed options.` ) : Ext.Element Updates the <a href="http://developer.mozilla.org/en/DOM/element.innerHTML">innerHTML of this Element from a specifie... Updates the innerHTML of this Element from a specified URL. Note that this is subject to the Same Origin Policy Updating innerHTML of an element will not execute embedded `<script>` elements. This is a browser restriction. Parameters: `options.` : Mixed Either a sring containing the URL from which to load the HTML, or an Ext.Ajax.request options object specifying exactly how to request the HTML. Returns: `Ext.Element` this | Element
| moveTo( `Number x`, `Number y`, [`Boolean/Object animate`] ) : Ext.Element Sets the position of the element in page coordinates, regardless of how the element is positioned. The element must ... Sets the position of the element in page coordinates, regardless of how the element is positioned. The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). Parameters: `x` : Number X value for new position (coordinates are page-based) `y` : Number Y value for new position (coordinates are page-based) `animate` : Boolean/Object (optional) True for the default animation, or a standard Element animation config object Returns: `Ext.Element` this | Element
| next( [`String selector`], [`Boolean returnDom`] ) : Ext.Element/HTMLElement Gets the next sibling, skipping text nodes Gets the next sibling, skipping text nodes Parameters: `selector` : String (optional) Find the next sibling that matches the passed simple selector `returnDom` : Boolean (optional) True to return a raw dom node instead of an Ext.Element Returns: `Ext.Element/HTMLElement` The next sibling or null | Element
| on( `String eventName`, `Function fn`, [`Object scope`], [`Object options`] ) : void Appends an event handler (shorthand for addListener). Appends an event handler (shorthand for addListener). Parameters: `eventName` : String The type of event to handle `fn` : Function The handler function the event invokes `scope` : Object (optional) The scope (this element) of the handler function `options` : Object (optional) An object containing standard addListener options Returns: void | Element
| parent( [`String selector`], [`Boolean returnDom`] ) : Ext.Element/HTMLElement Gets the parent node for this element, optionally chaining up trying to match a selector Gets the parent node for this element, optionally chaining up trying to match a selector Parameters: `selector` : String (optional) Find a parent node that matches the passed simple selector `returnDom` : Boolean (optional) True to return a raw dom node instead of an Ext.Element Returns: `Ext.Element/HTMLElement` The parent node or null | Element
| position( [`String pos`], [`Number zIndex`], [`Number x`], [`Number y`] ) : void Initializes positioning on this element. If a desired position is not passed, it will make the the element positione... Initializes positioning on this element. If a desired position is not passed, it will make the the element positioned relative IF it is not already positioned. Parameters: `pos` : String (optional) Positioning to use "relative", "absolute" or "fixed" `zIndex` : Number (optional) The zIndex to apply `x` : Number (optional) Set the page X position `y` : Number (optional) Set the page Y position Returns: void | Element
| prev( [`String selector`], [`Boolean returnDom`] ) : Ext.Element/HTMLElement Gets the previous sibling, skipping text nodes Gets the previous sibling, skipping text nodes Parameters: `selector` : String (optional) Find the previous sibling that matches the passed simple selector `returnDom` : Boolean (optional) True to return a raw dom node instead of an Ext.Element Returns: `Ext.Element/HTMLElement` The previous sibling or null | Element
| query( `String selector` ) : Array Selects child nodes based on the passed CSS selector (the selector should not contain an id). Selects child nodes based on the passed CSS selector (the selector should not contain an id). Parameters: `selector` : String The CSS selector Returns: `Array` An array of the matched nodes | Element
| radioClass( `String/Array className` ) : Ext.Element Adds one or more CSS classes to this element and removes the same class(es) from all siblings. Adds one or more CSS classes to this element and removes the same class(es) from all siblings. Parameters: `className` : String/Array The CSS class to add, or an array of classes Returns: `Ext.Element` this | Element
| remove() : void Removes this element from the DOM and deletes it from the cache Removes this element from the DOM and deletes it from the cache Parameters: None. Returns: void | Element
| removeAllListeners() : Ext.Element Removes all previous added listeners from this element Removes all previous added listeners from this element Parameters: None. Returns: `Ext.Element` this | Element
| removeClass( `String/Array className` ) : Ext.Element Removes one or more CSS classes from the element. Removes one or more CSS classes from the element. Parameters: `className` : String/Array The CSS class to remove, or an array of classes Returns: `Ext.Element` this | Element
| removeListener( `String eventName`, `Function fn`, [`Object scope`] ) : Ext.Element Removes an event handler from this element. The shorthand version un is equivalent. Example: el.removeListener('cli... Removes an event handler from this element. The shorthand version un is equivalent. Example:
    el.removeListener('click', this.handlerFn);
    // or
    el.un('click', this.handlerFn);
Parameters: `eventName` : String the type of event to remove `fn` : Function the method the event invokes `scope` : Object (optional) The scope (The `this` reference) of the handler function. Defaults to this Element. Returns: `Ext.Element` this | Element
| replace( `Mixed el` ) : Ext.Element Replaces the passed element with this element Replaces the passed element with this element Parameters: `el` : Mixed The element to replace Returns: `Ext.Element` this | Element
| replaceClass( `String oldClassName`, `String newClassName` ) : Ext.Element Replaces a CSS class on the element with another. If the old name does not exist, the new name will simply be added. Replaces a CSS class on the element with another. If the old name does not exist, the new name will simply be added. Parameters: `oldClassName` : String The CSS class to replace `newClassName` : String The replacement CSS class Returns: `Ext.Element` this | Element
| replaceWith( `Mixed/Object el` ) : Ext.Element Replaces this element with the passed element Replaces this element with the passed element Parameters: `el` : Mixed/Object The new element or a DomHelper config of an element to create Returns: `Ext.Element` this | Element
| scrollTo( `String side`, `Number value`, [`Boolean/Object animate`] ) : Element Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it ... Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it will try to do it. For auto bounds checking, use scroll(). Parameters: `side` : String Either "left" for scrollLeft values or "top" for scrollTop values. `value` : Number The new scroll value `animate` : Boolean/Object (optional) true for the default animation or a standard Element animation config object Returns: `Element` this | Element
| select( `String/Array selector`, [`Boolean unique`], [`HTMLElement/String root`] ) : CompositeElementLite/CompositeElement Selects elements based on the passed CSS selector to enable Element methods to be applied to many related elements i... Selects elements based on the passed CSS selector to enable Element methods to be applied to many related elements in one statement through the returned CompositeElement or CompositeElementLite object. Parameters: `selector` : String/Array The CSS selector or an array of elements `unique` : Boolean (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object) Not supported in core `root` : HTMLElement/String (optional) The root element of the query or id of the root Returns: `CompositeElementLite/CompositeElement` | Element
| select( `String/Array selector`, [`Boolean unique`], [`HTMLElement/String root`] ) : CompositeElementLite/CompositeElement Selects elements based on the passed CSS selector to enable Element methods to be applied to many related elements i... Selects elements based on the passed CSS selector to enable Element methods to be applied to many related elements in one statement through the returned CompositeElement or CompositeElementLite object. Parameters: `selector` : String/Array The CSS selector or an array of elements `unique` : Boolean (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object) `root` : HTMLElement/String (optional) The root element of the query or id of the root Returns: `CompositeElementLite/CompositeElement` | Element
| select( `String selector`, [`Boolean unique`] ) : CompositeElement/CompositeElementLite Creates a Ext.CompositeElement for child nodes based on the passed CSS selector (the selector should not contain an i... Creates a Ext.CompositeElement for child nodes based on the passed CSS selector (the selector should not contain an id). Parameters: `selector` : String The CSS selector `unique` : Boolean (optional) True to create a unique Ext.Element for each child (defaults to false, which creates a single shared flyweight object) Returns: `CompositeElement/CompositeElementLite` The composite element | Element
| set( `Object o`, [`Boolean useSet`] ) : Ext.Element Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function) Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function) Parameters: `o` : Object The object with the attributes `useSet` : Boolean (optional) false to override the default setAttribute to use expandos. Returns: `Ext.Element` this | Element
| setBottom( `String bottom` ) : Ext.Element Sets the element's CSS bottom style. Sets the element's CSS bottom style. Parameters: `bottom` : String The bottom CSS property value Returns: `Ext.Element` this | Element
| setDisplayed( `Mixed value` ) : Ext.Element Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true. Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true. Parameters: `value` : Mixed Boolean value to display the element using its default display, or a string to set the display directly. Returns: `Ext.Element` this | Element
| setHeight( `Mixed height`, [`Boolean/Object animate`] ) : Ext.Element Set the height of this Element. Set the height of this Element. Parameters: `height` : Mixed The new height. This may be one of: A Number specifying the new height in this Element's defaultUnits (by default, pixels.) A String used to set the CSS height style. Animation may not be used. `animate` : Boolean/Object (optional) true for the default animation or a standard Element animation config object Returns: `Ext.Element` this | Element
| setLeft( `String left` ) : Ext.Element Sets the element's left position directly using CSS style (instead of setX). Sets the element's left position directly using CSS style (instead of setX). Parameters: `left` : String The left CSS property value Returns: `Ext.Element` this | Element
| setLocation( `Number x`, `Number y`, [`Boolean/Object animate`] ) : Ext.Element Sets the position of the element in page coordinates, regardless of how the element is positioned. The element must ... Sets the position of the element in page coordinates, regardless of how the element is positioned. The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). Parameters: `x` : Number X value for new position (coordinates are page-based) `y` : Number Y value for new position (coordinates are page-based) `animate` : Boolean/Object (optional) True for the default animation, or a standard Element animation config object Returns: `Ext.Element` this | Element
| setOpacity( `Float opacity`, [`Boolean/Object animate`] ) : Ext.Element Set the opacity of the element Set the opacity of the element Parameters: `opacity` : Float The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc `animate` : Boolean/Object (optional) true for the default animation or a standard Element animation config object Returns: `Ext.Element` this | Element
| setPositioning( `Object posCfg` ) : Ext.Element Set positioning with an object returned by getPositioning(). Set positioning with an object returned by getPositioning(). Parameters: `posCfg` : Object Returns: `Ext.Element` this | Element
| setRight( `String right` ) : Ext.Element Sets the element's CSS right style. Sets the element's CSS right style. Parameters: `right` : String The right CSS property value Returns: `Ext.Element` this | Element
| setStyle( `String/Object property`, [`String value`] ) : Ext.Element Wrapper for setting style properties, also takes single object parameter of multiple styles. Wrapper for setting style properties, also takes single object parameter of multiple styles. Parameters: `property` : String/Object The style property to be set, or an object of multiple styles. `value` : String (optional) The value to apply to the given property, or null if an object was passed. Returns: `Ext.Element` this | Element
| setTop( `String top` ) : Ext.Element Sets the element's top position directly using CSS style (instead of setY). Sets the element's top position directly using CSS style (instead of setY). Parameters: `top` : String The top CSS property value Returns: `Ext.Element` this | Element
| setVisibilityMode( `visMode Ext.Element.VISIBILITY` ) : Ext.Element Sets the element's visibility mode. When setVisible() is called it will use this to determine whether to set the vis... Sets the element's visibility mode. When setVisible() is called it will use this to determine whether to set the visibility or the display property. Parameters: `Ext.Element.VISIBILITY` : visMode or Ext.Element.DISPLAY Returns: `Ext.Element` this | Element
| setVisible( `Boolean visible`, [`Boolean/Object animate`] ) : Ext.Element Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use the d... Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property. Parameters: `visible` : Boolean Whether the element is visible `animate` : Boolean/Object (optional) True for the default animation, or a standard Element animation config object Returns: `Ext.Element` this | Element
| setWidth( `Mixed width`, [`Boolean/Object animate`] ) : Ext.Element Set the width of this Element. Set the width of this Element. Parameters: `width` : Mixed The new width. This may be one of: A Number specifying the new width in this Element's defaultUnits (by default, pixels). A String used to set the CSS width style. Animation may not be used. `animate` : Boolean/Object (optional) true for the default animation or a standard Element animation config object Returns: `Ext.Element` this | Element
| setX( `Number The`, [`Boolean/Object animate`] ) : Ext.Element Sets the X position of the element based on page coordinates. Element must be part of the DOM tree to have page coor... Sets the X position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). Parameters: `The` : Number X position of the element `animate` : Boolean/Object (optional) True for the default animation, or a standard Element animation config object Returns: `Ext.Element` this | Element
| setXY( `Array pos`, [`Boolean/Object animate`] ) : Ext.Element Sets the position of the element in page coordinates, regardless of how the element is positioned. The element must ... Sets the position of the element in page coordinates, regardless of how the element is positioned. The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). Parameters: `pos` : Array Contains X & Y [x, y] values for new position (coordinates are page-based) `animate` : Boolean/Object (optional) True for the default animation, or a standard Element animation config object Returns: `Ext.Element` this | Element
| setY( `Number The`, [`Boolean/Object animate`] ) : Ext.Element Sets the Y position of the element based on page coordinates. Element must be part of the DOM tree to have page coor... Sets the Y position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false). Parameters: `The` : Number Y position of the element `animate` : Boolean/Object (optional) True for the default animation, or a standard Element animation config object Returns: `Ext.Element` this | Element
| show( [`Boolean/Object animate`] ) : Ext.Element Show this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible. Show this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible. Parameters: `animate` : Boolean/Object (optional) true for the default animation or a standard Element animation config object Returns: `Ext.Element` this | Element
| toggle( [`Boolean/Object animate`] ) : Ext.Element Toggles the element's visibility or display, depending on visibility mode. Toggles the element's visibility or display, depending on visibility mode. Parameters: `animate` : Boolean/Object (optional) True for the default animation, or a standard Element animation config object Returns: `Ext.Element` this | Element
| toggleClass( `String className` ) : Ext.Element Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it). Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it). Parameters: `className` : String The CSS class to toggle Returns: `Ext.Element` this | Element
| translatePoints( `Number/Array x`, [`Number y`] ) : Object Translates the passed page coordinates into left/top css values for this element Translates the passed page coordinates into left/top css values for this element Parameters: `x` : Number/Array The page x or an array containing [x, y] `y` : Number (optional) The page y, required if x is not an array Returns: `Object` An object with left and top properties. e.g. {left: (value), top: (value)} | Element
| un( `String eventName`, `Function fn` ) : Ext.Element Removes an event handler from this element (shorthand for removeListener). Removes an event handler from this element (shorthand for removeListener). Parameters: `eventName` : String the type of event to remove `fn` : Function the method the event invokes Returns: `Ext.Element` this | Element
| unclip() : Ext.Element Return clipping (overflow) to original clipping before clip() was called Return clipping (overflow) to original clipping before clip() was called Parameters: None. Returns: `Ext.Element` this | Element
| up( `String selector`, [`Number/Mixed maxDepth`] ) : Ext.Element Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first... Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child). This is a shortcut for findParentNode() that always returns an Ext.Element. Parameters: `selector` : String The simple selector to test `maxDepth` : Number/Mixed (optional) The max depth to search as a number or element (defaults to 10 || document.body) Returns: `Ext.Element` The matching DOM node (or null if no match was found) | Element
| wrap( [`Object config`], [`Boolean returnDom`] ) : HTMLElement/Element Creates and wraps this element with another element Creates and wraps this element with another element Parameters: `config` : Object (optional) DomHelper element config object for the wrapper element or null for an empty div `returnDom` : Boolean (optional) True to return the raw DOM element instead of Ext.Element Returns: `HTMLElement/Element` The newly created wrapper element | Element

## Public Events

Event | Defined By
--- | ---
| DOMActivate : ( `Ext.EventObject e` ) Where supported. Fires when an element is activated, for instance, through a mouse click or a keypress. Where supported. Fires when an element is activated, for instance, through a mouse click or a keypress. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| DOMAttrModified : ( `Ext.EventObject e` ) Where supported. Fires when an attribute has been modified. Where supported. Fires when an attribute has been modified. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| DOMCharacterDataModified : ( `Ext.EventObject e` ) Where supported. Fires when the character data has been modified. Where supported. Fires when the character data has been modified. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| DOMFocusIn : ( `Ext.EventObject e` ) Where supported. Similar to HTML focus event, but can be applied to any focusable element. Where supported. Similar to HTML focus event, but can be applied to any focusable element. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event. | Element
| DOMFocusOut : ( `Ext.EventObject e` ) Where supported. Similar to HTML blur event, but can be applied to any focusable element. Where supported. Similar to HTML blur event, but can be applied to any focusable element. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| DOMNodeInserted : ( `Ext.EventObject e` ) Where supported. Fires when a node has been added as a child of another node. Where supported. Fires when a node has been added as a child of another node. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| DOMNodeInsertedIntoDocument : ( `Ext.EventObject e` ) Where supported. Fires when a node is being inserted into a document. Where supported. Fires when a node is being inserted into a document. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| DOMNodeRemoved : ( `Ext.EventObject e` ) Where supported. Fires when a descendant node of the element is removed. Where supported. Fires when a descendant node of the element is removed. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| DOMNodeRemovedFromDocument : ( `Ext.EventObject e` ) Where supported. Fires when a node is being removed from a document. Where supported. Fires when a node is being removed from a document. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| DOMSubtreeModified : ( `Ext.EventObject e` ) Where supported. Fires when the subtree is modified. Where supported. Fires when the subtree is modified. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| abort : ( `Ext.EventObject e` ) Fires when an object/image is stopped from loading before completely loaded. Fires when an object/image is stopped from loading before completely loaded. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| blur : ( `Ext.EventObject e` ) Fires when an element loses focus either via the pointing device or by tabbing navigation. Fires when an element loses focus either via the pointing device or by tabbing navigation. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| change : ( `Ext.EventObject e` ) Fires when a control loses the input focus and its value has been modified since gaining focus. Fires when a control loses the input focus and its value has been modified since gaining focus. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| click : ( `Ext.EventObject e` ) Fires when a mouse click is detected with the element. Fires when a mouse click is detected with the element. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| dblclick : ( `Ext.EventObject e` ) Fires when a mouse double click is detected with the element. Fires when a mouse double click is detected with the element. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| error : ( `Ext.EventObject e` ) Fires when an object/image/frame cannot be loaded properly. Fires when an object/image/frame cannot be loaded properly. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| focus : ( `Ext.EventObject e` ) Fires when an element receives focus either via the pointing device or by tab navigation. Fires when an element receives focus either via the pointing device or by tab navigation. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| keydown : ( `Ext.EventObject e` ) Fires when a keydown is detected with the element. Fires when a keydown is detected with the element. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| keypress : ( `Ext.EventObject e` ) Fires when a keypress is detected with the element. Fires when a keypress is detected with the element. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| keyup : ( `Ext.EventObject e` ) Fires when a keyup is detected with the element. Fires when a keyup is detected with the element. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| load : ( `Ext.EventObject e` ) Fires when the user agent finishes loading all content within the element. Only supported by window, frames, objects ... Fires when the user agent finishes loading all content within the element. Only supported by window, frames, objects and images. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| mousedown : ( `Ext.EventObject e` ) Fires when a mousedown is detected with the element. Fires when a mousedown is detected with the element. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| mouseenter : ( `Ext.EventObject e` ) Fires when a mouseenter is detected with the element. Fires when a mouseenter is detected with the element. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| mouseleave : ( `Ext.EventObject e` ) Fires when a mouseleave is detected with the element. Fires when a mouseleave is detected with the element. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| mousemove : ( `Ext.EventObject e` ) Fires when a mousemove is detected with the element. Fires when a mousemove is detected with the element. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| mouseout : ( `Ext.EventObject e` ) Fires when a mouseout is detected with the element. Fires when a mouseout is detected with the element. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| mouseover : ( `Ext.EventObject e` ) Fires when a mouseover is detected with the element. Fires when a mouseover is detected with the element. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| mouseup : ( `Ext.EventObject e` ) Fires when a mouseup is detected with the element. Fires when a mouseup is detected with the element. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| reset : ( `Ext.EventObject e` ) Fires when a form is reset. Fires when a form is reset. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| resize : ( `Ext.EventObject e` ) Fires when a document view is resized. Fires when a document view is resized. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| scroll : ( `Ext.EventObject e` ) Fires when a document view is scrolled. Fires when a document view is scrolled. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| select : ( `Ext.EventObject e` ) Fires when a user selects some text in a text field, including input and textarea. Fires when a user selects some text in a text field, including input and textarea. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| submit : ( `Ext.EventObject e` ) Fires when a form is submitted. Fires when a form is submitted. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element
| unload : ( `Ext.EventObject e` ) Fires when the user agent removes all content from a window or frame. For elements, it fires when the target element ... 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. Listeners will be called with the following arguments: `e` : Ext.EventObject The Ext.EventObject encapsulating the DOM event | Element