Class Ext.Element

Create a new Element directly.

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

Gets the top Y coordinate

Returns the value of the "value" attribute

Returns the offset width of the element

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

Checks if the specified CSS class exists on this element's DOM node.

Sets up event handlers to call the passed functions when the mouse is over this element. Automatically filters child element mouse events.

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

Inserts this element after the passed element in the DOM

Inserts (or creates) an element (or DomHelper config) as the first child of the this element

Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element

Tests various css rules/browsers to determine if this element uses a border box

Returns true if this element is masked

Checks whether the element is currently visible using both visibility and display properties.

Direct access to the Updater Ext.Updater.update method (takes the same parameters).

Move this element relative to its current position.

Gets the next sibling, skipping text nodes

Gets the parent node for this element, optionally chaining up trying to match a selector

Gets the previous sibling, skipping text nodes

Adds one or more CSS classes to this element and removes the same class(es) from all siblings.

Removes this element from the DOM and deletes it from the cache

Removes one or more CSS classes from the element.

Forces the browser to repaint this element

Replaces a CSS class on the element with another. If the old name does not exist, the new name will simply be added.

Scrolls this element the specified direction. Does bounds checking to make sure the scroll is within this element's scrollable range.

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

Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)

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

Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.

Sets the element's left position directly using CSS style (instead of setX).

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

Set positioning with an object returned by getPositioning().

Sets the element's CSS right style.

Wrapper for setting style properties, also takes single object parameter of multiple styles.

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.

Set the width of the element

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

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

Toggles the element's visibility or display, depending on visibility mode.

Translates the passed page coordinates into left/top css values for this element

Return clipping (overflow) to original clipping before clip() was called

Disables text selection for this element (normalized across browsers)

Update the innerHTML of this element, optionally searching for and processing scripts