Properties Methods Events Direct Link

Class Ext.Element

Package:Ext
Defined In:Element.traversal.js
Class:Element
Subclasses:Layer
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

When an element is manipulated, by default there is no animation.

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

// no animation
el.setWidth(100);

Many of the functions for manipulating an element have an optional "animate" parameter. This parameter can be specified as boolean (true) for default animation effects.

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

To configure the effects, an object literal with animation options to use as the Element animation configuration object can also be specified. Note that the supported Element animation configuration options are a subset of the Ext.Fx animation options specific to Fx effects. The supported Element animation configuration 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
// Element animation options object
var opt = {
    duration: 1,
    easing: 'elasticIn',
    callback: this.foo,
    scope: this
};
// animation with some options set
el.setWidth(100, opt);

The Element animation object being used for the animation will be set on the options object as "anim", which allows you to stop or manipulate the animation. Here is an example:

// using the "anim" property to get the Anim object
if(opt.anim.isAnimated()){
    opt.anim.stop();
}

Also see the animate method for another animation technique.

Composite (Collections of) Elements

For working with collections of Elements, see Ext.CompositeElement

Public Properties

PropertyDefined By
 DISPLAY : Number
Visibility mode constant for use with setVisibilityMode. Use display to hide element
Element
 OFFSETS : Number
Visibility mode constant for use with setVisibilityMode. Use offsets (x and y positioning offscreen) 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
 visibilityCls : String
Defaults to 'x-hide-nosize'
Element

Public Methods

MethodDefined By

Public Events

EventDefined By