Class Ext.Element

Create a new Element directly.

<static> Static method to retrieve 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.

Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)

Sets up event handlers to add and remove a css class when the mouse is over this element

Creates a KeyMap for this element

Aligns this element with another element relative to the specified anchor points. If the other element is the document it aligns it to the viewport. The position parameter is optional, and can be specified in any one of the following formats:

• Blank: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").
• One anchor (deprecated): The passed anchor position is used as the target element's anchor point. The element being aligned will position its top-left corner (tl) to that point. This method has been deprecated in favor of the newer two anchor syntax below.
• Two anchors: If two values from the table below are passed separated by a dash, the first value is used as the element's anchor point, and the second value is used as the target's anchor point.

In addition to the anchor points, the position parameter also supports the "?" character. If "?" is passed at the end of the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to the viewport if necessary. Note that the element being aligned might be swapped to align to a different position than that specified in order to enforce the viewport constraints. Following are all of the supported anchor positions:

Value  Description
-----  -----------------------------
tl     The top left corner (default)
t      The center of the top edge
tr     The top right corner
l      The center of the left edge
c      In the center of the element
r      The center of the right edge
bl     The bottom left corner
b      The center of the bottom edge
br     The bottom right corner

Example Usage:

// align el to other-el using the default positioning ("tl-bl", non-constrained)
el.alignTo("other-el");

// align the top left corner of el with the top right corner of other-el (constrained to viewport)
el.alignTo("other-el", "tr?");

// align the bottom right corner of el with the center left edge of other-el
el.alignTo("other-el", "br-l?");

// align the center of el with the bottom left corner of other-el and
// adjust the x position by -6 pixels (and the y position by 0)
el.alignTo("other-el", "c-bl", [-6, 0]);

Perform animation on this element.

Appends this element to the passed element

Measures the element's content height and updates height to match. Note: this function uses setTimeout so the new height may not be available immediately.

Wraps the specified element with a special markup/CSS block that renders by default as a gray container with a gradient background, rounded corners and a 4-way shadow. Example usage:

// Basic box wrap
Ext.get("foo").boxWrap();

// You can also add a custom class and use CSS inheritance rules to customize the box look.
// 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
// for how to create a custom box wrap style.
Ext.get("foo").boxWrap().addClass("x-box-blue");

Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).

Clears any opacity settings from this element. Required in some cases for IE.

Store the current overflow setting and clip overflow on the element - use unclip to remove

Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.

Creates an iframe shim for this element to keep selects and other windowed objects from showing through.

Convenience method for setVisibilityMode(Element.DISPLAY)

Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)

Tries to focus the element. Any exceptions are caught and ignored.

Gets the x,y coordinates specified by the anchor position on the element.

Gets the width of the border(s) for the specified side(s)

Return a box {x, y, width, height} that can be used to set another elements size/location to match this element.

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.

Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements if a width has not been set using CSS.

Returns the offset height of the element

Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed, then it returns the calculated width of the sides (see getPadding)

Gets the width of the padding(s) for the specified side(s)

Returns the region of the given element. The element must be part of the DOM tree to have a region (display:none or elements not appended return false).

Returns the current scroll position of the element.

Normalizes currentStyle and computedStyle.

Returns the width in pixels of the passed text, or the width of the text in this Element.

Gets this element's Updater

Returns the width and height of the viewport.

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).

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).

Hide this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible.

Initializes a Ext.dd.DD drag drop object for this element.

Initializes a Ext.dd.DDTarget object for this element.

Inserts this element before the passed element in the DOM

Inserts an html fragment into this element

Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)

Returns true if display is not "none"

Returns true if this element is scrollable.

Gets the last child, skipping text nodes

Puts a mask over this element to disable user interaction. Requires core.css. This method can only be applied to elements which accept child nodes.

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).

Appends an event handler (shorthand for addListener).

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.

Selects child nodes based on the passed CSS selector (the selector should not contain an id).

Create an event handler on this element such that when the event fires and is handled by this element, it will be relayed to another object (i.e., fired again as if it originated from that object instead).

Removes all previous added listeners from this element

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);

Replaces the passed element with this element

Replaces this element with the passed element

Scrolls this element into view within the passed container.

Creates a Ext.CompositeElement for child nodes based on the passed CSS selector (the selector should not contain an id).

Sets the element's CSS bottom style.

Sets the element's box. Use getBox() on another element to get a box obj. If animate is true then width, height, x and y will be animated concurrently.

Set the height of the element

Quick set left and top adding default units

Set the opacity of the element

Sets the element's position and size the specified region. If animation is true then width, height, x and y will be animated concurrently.

Set the size of the element. If animation is true, both width an height will be animated concurrently.

Sets the element's top position directly using CSS style (instead of setY).

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.

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).

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).

Stops the specified event(s) from bubbling and optionally prevents the default action

Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).

Removes an event handler from this element (shorthand for removeListener).

Removes a previously applied mask.

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.

Creates and wraps this element with another element