Class Ext.Element

Create a new Element directly.

Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.

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 this element has the focus

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

Convenience method for constructing a KeyMap

Creates a KeyMap for this element

Appends an event handler to this element. The shorthand version on is equivalent.

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

Anchors an element to another element and realigns it when the window is resized.

Perform custom animation on this element.

Appends the passed element(s) to this element

Appends this element to the passed element

More flexible version of setStyle for setting style properties.

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.

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

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

This special markup is used throughout Ext when box wrapping elements (Ext.Button, Ext.Panel when frame=true, Ext.Window). The markup is of this form:

Ext.Element.boxMarkup =
    '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>
     <div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>
     <div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';

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

Centers the Element in either the viewport, or another Element.

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

Removes worthless text nodes

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

Clear positioning back to the default when the document was loaded

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

Returns true if this element is an ancestor of the passed element

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

Creates a proxy element of this element

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

Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id).

Convenience method for setVisibilityMode(Element.DISPLAY)

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)

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

Gets the first child, skipping text nodes

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.

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

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

Gets the x,y coordinates to align this element with another element. See alignTo for more info on the supported position values.

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

Returns the value of an attribute from the element's underlying DOM node.

Returns the value of a namespaced attribute from the element's underlying DOM node.

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

Gets the bottom Y coordinate of the element (element Y position + element height)

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

Calculates the x, y to center this element on the screen

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 offsetHeight or the height of this element based on CSS height adjusted by padding or borders when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements if a height has not been set using CSS.

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 sum width of the padding and borders for the passed "sides". See getBorderWidth() for more information about the sides.

Returns the offset height of the element

Gets the left X coordinate

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)

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.

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

Gets an object with all CSS positioning properties. Useful along with setPostioning to get snapshot before performing an update and then restoring the element.

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

Gets the right X coordinate of the element (element X position + element width)

Returns the current scroll position of the element.

Returns the size of the element.

Normalizes currentStyle and computedStyle.

Returns an object with properties matching the styles requested. For example, el.getStyles('color', 'font-size', 'width') might return {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.

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

Gets the top Y coordinate

Gets this element's Updater

Returns the value of the "value" attribute

Returns the width and height of the viewport.

var vpSize = Ext.getBody().getViewSize();

        // all Windows created afterwards will have a default value of 90% height and 95% width

        Ext.Window.override({
            width: vpSize.width * 0.9,
            height: vpSize.height * 0.95
        });
        // To handle window resizing you would have to hook onto onWindowResize.

Returns the offset width of the element

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

Framework-wide error-handler. Developers can override this method to provide custom exception-handling. Framework errors will often extend from the base Ext.Error class.

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

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

Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element.

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

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

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

Inserts this element after the passed element in the DOM

Inserts this element before the passed element in the DOM

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

Inserts an html fragment into this element

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

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

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

Returns true if display is not "none"

Returns true if this element is masked

Returns true if this element is scrollable.

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

Gets the last child, skipping text nodes

Direct access to the Updater Ext.Updater.update method. The method takes the same object parameter as Ext.Updater.update

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.

Move this element relative to its current position.

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

Gets the next sibling, skipping text nodes

Appends an event handler (shorthand for addListener).

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

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.

Gets the previous sibling, skipping text nodes

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

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

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 this element from the DOM and deletes it from the cache

Removes all previous added listeners from this element

Removes one or more CSS classes from the element.

Removes an event handler from this element. The shorthand version un is equivalent. Note: if a scope was explicitly specified when adding the listener, the same scope must be specified here. Example:

el.removeListener('click', this.handlerFn);
// or

el.un('click', this.handlerFn);

Forces the browser to repaint this element

Replaces the passed element with 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.

Replaces this element with the passed element

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

Scrolls this element into view within the passed container.

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

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.

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

Sets the element's CSS bottom style.

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

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

Set the height of this Element.

// change the height to 200px and animate with default configuration

Ext.fly('elementId').setHeight(200, true);

// change the height to 150px and animate with a custom configuration

Ext.fly('elId').setHeight(150, {
    duration : .5, // animation will have a duration of .5 seconds

    // will change the content to "finished"

    callback: function(){ this.update("finished"); } 
});

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

Quick set left and top adding default units

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 the opacity of the element

Set positioning with an object returned by getPositioning().

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

Sets the element's CSS right style.

Set the size of this Element. If animation is true, both width and height will be animated concurrently.

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

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

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.

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.

Set the width of this Element.

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

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

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

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

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

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

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

Removes an event handler from this element (see removeListener for additional notes).

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

Removes a previously applied mask.

Disables text selection for this element (normalized across browsers)

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.

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

Creates and wraps this element with another element

Where supported. Fires when an element is activated, for instance, through a mouse click or a keypress.

Where supported. Fires when an attribute has been modified.

Where supported. Fires when the character data has been modified.

Where supported. Similar to HTML focus event, but can be applied to any focusable element.

Where supported. Similar to HTML blur event, but can be applied to any focusable element.

Where supported. Fires when a node has been added as a child of another node.

Where supported. Fires when a node is being inserted into a document.

Where supported. Fires when a descendant node of the element is removed.

Where supported. Fires when a node is being removed from a document.

Where supported. Fires when the subtree is modified.

Fires when an object/image is stopped from loading before completely loaded.

Fires when an element loses focus either via the pointing device or by tabbing navigation.

Fires when a control loses the input focus and its value has been modified since gaining focus.

Fires when a mouse click is detected within the element.

Fires when a mouse double click is detected within the element.

Fires when an object/image/frame cannot be loaded properly.

Fires when an element receives focus either via the pointing device or by tab navigation.

Fires when a keydown is detected within the element.

Fires when a keypress is detected within the element.

Fires when a keyup is detected within the element.

Fires when the user agent finishes loading all content within the element. Only supported by window, frames, objects and images.

Fires when a mousedown is detected within the element.

Fires when the mouse enters the element.

Fires when the mouse leaves the element.

Fires when a mousemove is detected with the element.

Fires when a mouseout is detected with the element.

Fires when a mouseover is detected within the element.

Fires when a mouseup is detected within the element.

Fires when a form is reset.

Fires when a document view is resized.

Fires when a document view is scrolled.

Fires when a user selects some text in a text field, including input and textarea.

Fires when a form is submitted.

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.