Class Ext.Element
Package: | Ext |
Defined In: | Element.js |
Class: | Element |
Subclasses: | Layer |
Extends: | Object |
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 functionAlso, 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
Public Methods
Method | Defined By | |
---|---|---|
Element ( String/HTMLElement element , [Boolean forceNew ] )
Create a new Element directly.
Create a new Element directly.
Parameters:
| Element | |
Element.fly ( String/HTMLElement el , [String named ] ) : Element
<static> Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a...
<static> 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.
Parameters:
| Element | |
Element.get ( Mixed el ) : Element
<static> Static method to retrieve Ext.Element objects. This method does not retrieve Components. This method r...
<static> Static method to retrieve Ext.Element objects.
This method does not retrieve Component s. 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:
| 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:
| Element | |
addClassOnClick ( String className ) : Ext.Element
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 down and then up on this element (a click effect)
Parameters:
| Element | |
addClassOnFocus ( String className ) : Ext.Element
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 this element has the focus
Parameters:
| Element | |
addClassOnOver ( String className ) : Ext.Element
Sets up event handlers to add and remove a css class when the mouse is over this element
Sets up event handlers to add and remove a css class when the mouse is over this element
Parameters:
| Element | |
addKeyListener ( Number/Array/Object/String key , Function fn , [Object scope ] ) : Ext.KeyMap
Convenience method for constructing a KeyMap
Convenience method for constructing a KeyMap
Parameters:
| Element | |
addKeyMap ( Object config ) : Ext.KeyMap
Creates a KeyMap for this element
Creates a KeyMap for this element
Parameters:
| Element | |
addListener ( String eventName , Function fn , [Object scope ] , [Object options ] ) : void
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:
| Element | |
alignTo ( Mixed element , String position , [Array offsets ] , [Boolean/Object animate ] ) : Ext.Element
Aligns this element with another element relative to the specified anchor points. If the other element is the documen...
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:
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 cornerExample Usage:
Parameters:
| Element | |
anchorTo ( Mixed element , String position , [Array offsets ] , [Boolean/Object animate ] , [Boolean/Number monitorScroll ] , Function callback ) : Ext.Element
Anchors an element to another element and realigns it when the window is resized.
Anchors an element to another element and realigns it when the window is resized.
Parameters:
| 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:
| 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:
| Element | |
appendTo ( Mixed el ) : Ext.Element
Appends this element to the passed element
Appends this element to the passed element
Parameters:
| Element | |
applyStyles ( String/Object/Function styles ) : Ext.Element
More flexible version of
setStyle for setting style properties.
More flexible version of
setStyle for setting style properties.
Parameters:
| Element | |
autoHeight ( [Boolean animate ] , [Float duration ] , [Function onComplete ] , [String easing ] ) : Ext.Element
Measures the element's content height and updates height to match. Note: this function uses setTimeout so the new hei...
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.
Parameters:
| 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:
| Element | |
boxWrap ( [String class ] ) : Ext.Element
Wraps the specified element with a special markup/CSS block that renders by default as a gray container with a gradie...
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:
Parameters:
| Element | |
center ( [Mixed centerIn ] ) : void
Centers the Element in either the viewport, or another Element.
Centers the Element in either the viewport, or another Element.
Parameters:
| 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:
| Element | |
clean ( [Boolean forceReclean ] ) : void
Removes worthless text nodes
Removes worthless text nodes
Parameters:
| 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:
| 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:
| Element | |
clip () : Ext.Element | 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:
| 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:
| Element | |
createProxy ( String/Object config , [String/HTMLElement renderTo ] , [Boolean matchBox ] ) : Ext.Element
Creates a proxy element of this element
Creates a proxy element of this element
Parameters:
| Element | |
createShim () : Ext.Element
Creates an iframe shim for this element to keep selects and other windowed objects from showing through.
Creates an iframe shim for this element to keep selects and other windowed objects from showing through.
Parameters:
| 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:
| Element | |
enableDisplayMode ( [String display ] ) : Ext.Element
Convenience method for setVisibilityMode(Element.DISPLAY)
Convenience method for setVisibilityMode(Element.DISPLAY)
Parameters:
| 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:
| 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:
| Element | |
first ( [String selector ] , [Boolean returnDom ] ) : Ext.Element/HTMLElement
Gets the first child, skipping text nodes
Gets the first child, skipping text nodes
Parameters:
| Element | |
focus () : 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:
| Element | |
getAlignToXY ( Mixed element , String position , [Array offsets ] ) : Array
Gets the x,y coordinates to align this element with another element. See alignTo for more info on the supported posit...
Gets the x,y coordinates to align this element with another element. See
alignTo for more info on the supported position values.
Parameters:
| Element | |
getAnchorXY ( [String anchor ] , [Boolean local ] , [Object size ] ) : Array
Gets the x,y coordinates specified by the anchor position on the element.
Gets the x,y coordinates specified by the anchor position on the element.
Parameters:
| 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:
| 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:
| 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:
| Element | |
getBox ( [Boolean contentBox ] , [Boolean local ] ) : Object
Return a box {x, y, width, height} that can be used to set another elements size/location to match this element.
Return a box {x, y, width, height} that can be used to set another elements size/location to match this element.
Parameters:
| Element |