Package: | Roo |
Defined In: | Roo/Element.js. |
Class: | Element |
Subclasses: | Roo.Layer |
var el = Roo.get("my-div");
// or with getEl
var el = getEl("my-div");
// or with a DOM element
var el = Roo.get(myDivElement);
Option Default Description
--------- -------- ---------------------------------------------
duration .35 The duration of the animation in seconds
easing easeOut The YUI easing method
callback none A function to execute when the anim completes
scope this The scope (this) of the callback function
var el = Roo.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();
}
Property | Description | Defined By | |
---|---|---|---|
Roo.Element.DISPLAY :
Number
|
Visibility mode constant - Use display to hide element
Visibility mode constant - Use display to hide element
|
Roo.Element | |
Roo.Element.VISIBILITY :
Number
|
Visibility mode constant - Use visibility to hide element
Visibility mode constant - Use visibility to hide element
|
Roo.Element |
Method | Defined By | |
---|---|---|
Create a new Roo.Element
Create a new Roo.Element
|
||
Gets the globally shared flyweight Element, with the passed node as the active element.
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.
|
Roo.Element | |
Roo.Element.get
(String/HTMLElement/Element el)
:
Element
Static method to retrieve Element objects.
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.
|
Roo.Element | |
addClass
(String/Array className)
:
Roo.Element
Adds one or more CSS classes to the element.
Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
|
Roo.Element | |
addClassOnClick
(String className)
:
Roo.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)
|
Roo.Element | |
addClassOnFocus
(String className)
:
Roo.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
|
Roo.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
|
Roo.Element | |
Convenience method for constructing a KeyMap
Convenience method for constructing a KeyMap
|
Roo.Element | |
addKeyMap
(Object config)
:
Roo.KeyMap
Creates a KeyMap for this element
Creates a KeyMap for this element
|
Roo.Element | |
Roo.Element | ||
alignTo
(String/HTMLElement/Roo.Element element, String position, Array offsets, Boolean/Object animate)
:
Roo.Element
Aligns this element with another element relative to the specified anchor points.
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:
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:
Example Usage:
|
Roo.Element | |
anchorTo
(String/HTMLElement/Roo.Element element, String position, Array offsets, Boolean/Object animate, Boolean/Number monitorScroll, Function callback)
:
Roo.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.
|
Roo.Element | |
animate
(Object args, Float duration, Function onComplete, String easing, String animType)
:
Roo.Element
Perform animation on this element.
Perform animation on this element.
|
Roo.Element | |
appendChild
(String/HTMLElement/Array/Element/CompositeElement el)
:
Roo.Element
Appends the passed element(s) to this element
Appends the passed element(s) to this element
|
Roo.Element | |
appendTo
(String/HTMLElement/Element el)
:
Roo.Element
Appends this element to the passed element
Appends this element to the passed element
|
Roo.Element | |
applyStyles
(String/Object/Function styles)
:
Roo.Element
More flexible version of {link setStyle} for setting style properties.
More flexible version of {link setStyle} for setting style properties.
|
Roo.Element | |
Roo.Element | ||
Measures the element's content height and updates height to match.
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.
|
Roo.Element | |
beginMeasure
()
:
Roo.Element
Temporarily enables offsets (width,height,x,y) for an element with display:none, use endMeasure() when done.
Temporarily enables offsets (width,height,x,y) for an element with display:none, use endMeasure() when done.
|
Roo.Element | |
blur
()
:
Roo.Element
Tries to blur the element.
Tries to blur the element. Any exceptions are caught and ignored.
|
Roo.Element | |
boxWrap
(String class)
:
Roo.Element
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.
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.
|
Roo.Element | |
center
(String/HTMLElement/Roo.Element centerIn)
Centers the Element in either the viewport, or another Element.
Centers the Element in either the viewport, or another Element.
|
Roo.Element | |
Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).
Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).
|
Roo.Element | |
clean
(Boolean forceReclean)
Removes worthless text nodes
Removes worthless text nodes
|
Roo.Element | |
clearOpacity
()
:
Roo.Element
Clears any opacity settings from this element.
Clears any opacity settings from this element. Required in some cases for IE.
|
Roo.Element | |
clearPositioning
(String value)
:
Roo.Element
Clear positioning back to the default when the document was loaded
Clear positioning back to the default when the document was loaded
|
Roo.Element | |
clip
()
:
Roo.Element
Store the current overflow setting and clip overflow on the element - use {link unclip} to remove
Store the current overflow setting and clip overflow on the element - use {link unclip} to remove
|
Roo.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
|
Roo.Element | |
Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.
Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.
|
Roo.Element | |
Creates a proxy element of this element
Creates a proxy element of this element
|
Roo.Element | |
createShim
()
:
Roo.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.
|
Roo.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).
|
Roo.Element | |
enableDisplayMode
(String display)
:
Roo.Element
Convenience method for setVisibilityMode(Element.DISPLAY)
Convenience method for setVisibilityMode(Element.DISPLAY)
|
Roo.Element | |
endMeasure
()
:
Roo.Element
Restores displays to before beginMeasure was called
Restores displays to before beginMeasure was called
|
Roo.Element | |
findParent
(String selector, Number/String/HTMLElement/Element maxDepth, Boolean returnEl)
:
HTMLElement
Looks at this node and then at parent nodes for a match of the passed simple selector (e.g.
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)
|
Roo.Element | |
findParentNode
(String selector, Number/String/HTMLElement/Element maxDepth, Boolean returnEl)
:
HTMLElement
Looks at parent nodes for a match of the passed simple selector (e.g.
Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
|
Roo.Element | |
Sizes this element to its parent element's dimensions performing
neccessary box adjustments.
Sizes this element to its parent element's dimensions performing
neccessary box adjustments.
|
Roo.Element | |
focus
()
:
Roo.Element
Tries to focus the element.
Tries to focus the element. Any exceptions are caught and ignored.
|
Roo.Element | |
Gets the x,y coordinates to align this element with another element.
Gets the x,y coordinates to align this element with another element. See {link alignTo} for more info on the
supported position values.
|
Roo.Element | |
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.
|
Roo.Element | |
Returns the value of a namespaced attribute from the element's underlying DOM node.
|
Roo.Element | |
Gets the width of the border(s) for the specified side(s)
|
Roo.Element | |
Roo.Element | ||
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.
|
Roo.Element | |
getCenterXY
()
:
Array
Calculates the x, y to center this element on the screen
Calculates the x, y to center this element on the screen
|
Roo.Element | |
Return the CSS color for the specified CSS attribute.
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. |
Roo.Element | |
getComputedHeight
()
:
Number
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.
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.
|
Roo.Element | |
getComputedWidth
()
:
Number
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.
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.
|
Roo.Element | |
Roo.Element | ||
Roo.Element | ||
Roo.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)
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)
|
Roo.Element | |
getNextSibling
()
:
HTMLElement
Gets the next sibling, skipping text nodes
Gets the next sibling, skipping text nodes
|
Roo.Element | |
Gets the width of the padding(s) for the specified side(s)
|
Roo.Element | |
getPositioning
()
:
Object
Gets an object with all CSS positioning properties.
Gets an object with all CSS positioning properties. Useful along with setPostioning to get
snapshot before performing an update and then restoring the element.
|
Roo.Element | |
getPrevSibling
()
:
HTMLElement
Gets the previous sibling, skipping text nodes
Gets the previous sibling, skipping text nodes
|
Roo.Element | |
getRegion
()
:
Region
Returns the region of the given 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).
|
Roo.Element | |
Roo.Element | ||
getScroll
()
:
Object
Returns the current scroll position of the element.
Returns the current scroll position of the element.
|
Roo.Element | |
Roo.Element | ||
Roo.Element | ||
Returns an object with properties matching the styles requested.
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'}.
|
Roo.Element | |
Roo.Element | ||
getUpdateManager
()
:
Roo.UpdateManager
Gets this element's UpdateManager
Gets this element's UpdateManager
|
Roo.Element | |
Roo.Element | ||
getViewSize
()
:
Object
Returns the width and height of the viewport.
Returns the width and height of the viewport.
|
Roo.Element | |
Roo.Element | ||
getX
()
:
Number
Gets the current X position of the element based on page coordinates.
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).
|
Roo.Element | |
getXY
()
:
Array
Gets the current position of the element based on page coordinates.
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).
|
Roo.Element | |
getY
()
:
Number
Gets the current Y position of the element based on page coordinates.
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).
|
Roo.Element | |
Roo.Element | ||
hide
(Boolean/Object animate)
:
Roo.Element
Hide this element - Uses display mode to determine whether to use "display" or "visibility".
Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {link setVisible}.
|
Roo.Element | |
Initializes a {link Roo.dd.DD} drag drop object for this element.
|
Roo.Element | |
Initializes a {link Roo.dd.DDProxy} object for this element.
Initializes a {link Roo.dd.DDProxy} object for this element.
|
Roo.Element | |
Initializes a {link Roo.dd.DDTarget} object for this element.
Initializes a {link Roo.dd.DDTarget} object for this element.
|
Roo.Element | |
insertAfter
(String/HTMLElement/Element el)
:
Roo.Element
Inserts this element after the passed element in the DOM
Inserts this element after the passed element in the DOM
|
Roo.Element | |
insertBefore
(String/HTMLElement/Element el)
:
Roo.Element
Inserts this element before the passed element in the DOM
Inserts this element before the passed element in the DOM
|
Roo.Element | |
insertFirst
(String/HTMLElement/Element/Object el)
:
Roo.Element
Inserts (or creates) an element (or DomHelper config) as the first child of the this element
Inserts (or creates) an element (or DomHelper config) as the first child of the this element
|
Roo.Element | |
Inserts an html fragment into this element
Inserts an html fragment into this element
|
Roo.Element | |
Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element
Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element
|
Roo.Element | |
Returns true if this element matches the passed simple selector (e.g.
|
Roo.Element | |
isBorderBox
()
:
Boolean
Tests various css rules/browsers to determine if this element uses a border box
Tests various css rules/browsers to determine if this element uses a border box
|
Roo.Element | |
isDisplayed
()
:
Boolean
Returns true if display is not "none"
Returns true if display is not "none"
|
Roo.Element | |
isMasked
()
:
Boolean
Returns true if this element is masked
Returns true if this element is masked
|
Roo.Element | |
isScrollable
()
:
Boolean
Returns true if this element is scrollable.
Returns true if this element is scrollable.
|
Roo.Element | |
Checks whether the element is currently visible using both visibility and display properties.
|
Roo.Element | |
load
(String/Function url, String/Object params, Function callback, Boolean discardUrl)
:
Roo.Element
Direct access to the UpdateManager update() method (takes the same parameters).
Direct access to the UpdateManager update() method (takes the same parameters).
|
Roo.Element | |
Puts a mask over this element to disable user interaction.
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.
|
Roo.Element | |
Move this element relative to its current position.
Move this element relative to its current position.
|
Roo.Element | |
Sets the position of the element in page coordinates, regardless of how the element is positioned.
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).
|
Roo.Element | |
Appends an event handler (Shorthand for addListener)
Appends an event handler (Shorthand for addListener)
|
Roo.Element | |
Initializes positioning on this element.
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. |
Roo.Element | |
Roo.Element | ||
radioClass
(String/Array className)
:
Roo.Element
Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
|
Roo.Element | |
remove
()
Removes this element from the DOM and deletes it from the cache
Removes this element from the DOM and deletes it from the cache
|
Roo.Element | |
removeAllListeners
()
:
Roo.Element
Removes all previous added listeners from this element
Removes all previous added listeners from this element
|
Roo.Element | |
removeClass
(String/Array className)
:
Roo.Element
Removes one or more CSS classes from the element.
Removes one or more CSS classes from the element.
|
Roo.Element | |
Removes an event handler from this element
Removes an event handler from this element
|
Roo.Element | |
repaint
()
:
Roo.Element
Forces the browser to repaint this element
Forces the browser to repaint this element
|
Roo.Element | |
replace
(String/HTMLElement/Element el)
:
Roo.Element
Replaces the passed element with this element
Replaces the passed element with this element
|
Roo.Element | |
Replaces a CSS class on the element with another.
Replaces a CSS class on the element with another. If the old name does not exist, the new name will simply be added.
|
Roo.Element | |
Scrolls this element the specified direction.
Scrolls this element the specified direction. Does bounds checking to make sure the scroll is
within this element's scrollable range.
|
Roo.Element | |
Scrolls this element into view within the passed container.
Scrolls this element into view within the passed container.
|
Roo.Element | |
Scrolls this element the specified scroll point.
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().
|
Roo.Element | |
Creates a {link Roo.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id).
Creates a {link Roo.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id).
|
Roo.Element | |
Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)
Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)
|
Roo.Element | |
setBottom
(String bottom)
:
Roo.Element
Sets the element's CSS bottom style.
Sets the element's CSS bottom style.
|
Roo.Element | |
Sets the element's position and size in one shot.
Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.
|
Roo.Element | |
Sets the element's box.
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.
|
Roo.Element | |
setDisplayed
(Boolean value)
:
Roo.Element
Sets the CSS display property.
Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
|
Roo.Element | |
Set the height of the element
Set the height of the element
|
Roo.Element | |
setLeft
(String left)
:
Roo.Element
Sets the element's left position directly using CSS style (instead of {link setX}).
Sets the element's left position directly using CSS style (instead of {link setX}).
|
Roo.Element | |
Quick set left and top adding default units
Quick set left and top adding default units
|
Roo.Element | |
Sets the position of the element in page coordinates, regardless of how the element is positioned.
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).
|
Roo.Element | |
setOpacity
(Float opacity, Boolean/Object animate)
:
Roo.Element
Set the opacity of the element
Set the opacity of the element
|
Roo.Element | |
setPositioning
(Object posCfg)
:
Roo.Element
Set positioning with an object returned by getPositioning().
Set positioning with an object returned by getPositioning().
|
Roo.Element | |
setRegion
(Roo.lib.Region region, Boolean/Object animate)
:
Roo.Element
Sets the element's position and size the the specified region.
Sets the element's position and size the the specified region. If animation is true then width, height, x and y will be animated concurrently.
|
Roo.Element | |
setRight
(String right)
:
Roo.Element
Sets the element's CSS right style.
Sets the element's CSS right style.
|
Roo.Element | |
Set the size of the element.
Set the size of the element. If animation is true, both width an height will be animated concurrently.
|
Roo.Element | |
Wrapper for setting style properties, also takes single object parameter of multiple styles.
Wrapper for setting style properties, also takes single object parameter of multiple styles.
|
Roo.Element | |
setTop
(String top)
:
Roo.Element
Sets the element's top position directly using CSS style (instead of {link setY}).
Sets the element's top position directly using CSS style (instead of {link setY}).
|
Roo.Element | |
setVisibilityMode
(visMode)
:
Roo.Element
Sets the element's visibility mode.
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.
|
Roo.Element | |
Sets the visibility of the element (see details).
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.
|
Roo.Element | |
Set the width of the element
Set the width of the element
|
Roo.Element | |
Sets the X position of the element based on page coordinates.
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).
|
Roo.Element | |
Sets the position of the element in page coordinates, regardless of how the element is positioned.
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).
|
Roo.Element | |
Sets the Y position of the element based on page coordinates.
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).
|
Roo.Element | |
show
(Boolean/Object animate)
:
Roo.Element
Show this element - Uses display mode to determine whether to use "display" or "visibility".
Show this element - Uses display mode to determine whether to use "display" or "visibility". See {link setVisible}.
|
Roo.Element | |
Stops the specified event from bubbling and optionally prevents the default action
Stops the specified event from bubbling and optionally prevents the default action
|
Roo.Element | |
toggle
(Boolean/Object animate)
:
Roo.Element
Toggles the element's visibility or display, depending on visibility mode.
Toggles the element's visibility or display, depending on visibility mode.
|
Roo.Element | |
toggleClass
(String className)
:
Roo.Element
Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
|
Roo.Element | |
Translates the passed page coordinates into left/top css values for this element
|
Roo.Element | |
Removes an event handler from this element (shorthand for removeListener)
Removes an event handler from this element (shorthand for removeListener)
|
Roo.Element | |
unclip
()
:
Roo.Element
Return clipping (overflow) to original clipping before clip() was called
Return clipping (overflow) to original clipping before clip() was called
|
Roo.Element | |
unmask
()
Removes a previously applied mask.
Removes a previously applied mask. If removeEl is true the mask overlay is destroyed, otherwise
it is cached for reuse. |
Roo.Element | |
unselectable
()
:
Roo.Element
Disables text selection for this element (normalized across browsers)
Disables text selection for this element (normalized across browsers)
|
Roo.Element | |
Walks up the dom looking for a parent node that matches the passed simple selector (e.g.
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 Roo.Element.
|
Roo.Element | |
Update the innerHTML of this element, optionally searching for and processing scripts
Update the innerHTML of this element, optionally searching for and processing scripts
|
Roo.Element | |
Creates and wraps this element with another element
Creates and wraps this element with another element
|
Roo.Element |