|
| Element( String/HTMLElement element , [Boolean forceNew ] )
Create a new Element directly. Create a new Element directly. | Element |
| addClass( String/Array className )
:
Ext.ElementAdds 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. | Element |
| addClassOnClick( String className )
@@ -60,149 +60,149 @@ object as "anim", which allows you to stop or manipulate the animation. Here is
Ext.ElementSets 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 | Element |
| addKeyListener( Number/Array/Object/String key , Function fn , [Object scope ] )
:
Ext.KeyMapConvenience method for constructing a KeyMap Convenience method for constructing a KeyMap Parameters:key : Number/Array/Object/StringEither a string with the keys to listen for, the numeric key code, array of key codes or an object with the following options:
-{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)} fn : FunctionThe function to call scope : Object(optional) The scope of the function Returns:Ext.KeyMap The KeyMap created
| Element |
| addKeyMap( Object config )
+{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)} fn : FunctionThe function to call scope : Object(optional) The scope (this reference) in which the specified function is executed. Defaults to this Element. Returns:Ext.KeyMap The KeyMap created
| Element |
| addKeyMap( Object config )
:
Ext.KeyMapCreates a KeyMap for this element Creates a KeyMap for this element Parameters:config : ObjectThe KeyMap config. See Ext.KeyMap for more details Returns:Ext.KeyMap The KeyMap created
| Element |
| addListener( String eventName , Function fn , [Object scope ], [Object options ] )
:
- Ext.ElementAppends 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:eventName : StringThe type of event to handle fn : FunctionThe handler function the event invokes. This function is passed
-the following parameters: scope : Object(optional) The scope (this reference) in which the handler function is executed.
-If omitted, defaults to this Element.. options : Object(optional) An object containing handler configuration properties.
-This may contain any of the following properties:
-- scope Object :
The scope (this reference) in which the handler function is executed.
-If omitted, defaults to this Element.
-- delegate String:
A simple selector to filter the target or look for a descendant of the target. See below for additional details.
-- stopEvent Boolean:
True to stop the event. That is stop propagation, and prevent the default action.
-- preventDefault Boolean:
True to prevent the default action
-- stopPropagation Boolean:
True to prevent event propagation
-- normalized Boolean:
False to pass a browser event to the handler function instead of an Ext.EventObject
-- target Ext.Element:
Only call the handler if the event was fired on the target Element, not if the event was bubbled up from a child node.
-- delay Number:
The number of milliseconds to delay the invocation of the handler after the event fires.
-- single Boolean:
True to add a handler to handle just the next firing of the event, and then remove itself.
-- buffer Number:
Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed
-by the specified number of milliseconds. If the event fires again within that time, the original
-handler is not invoked, but the new handler is scheduled in its place.
-
-
-Combining Options
-In the following examples, the shorthand form on is used rather than the more verbose
-addListener. The two are equivalent. Using the options argument, it is possible to combine different
-types of listeners:
-
-A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the
-options object. The options object is available as the third parameter in the handler function.
-Code: el.on('click', this.onClick, this, {
- single: true,
- delay: 100,
- stopEvent : true,
- forumId: 4
-});
-
-Attaching multiple handlers in 1 call
-The method also allows for a single argument to be passed which is a config object containing properties
-which specify multiple handlers.
-
-Code: el.on({
- 'click' : {
- fn: this.onClick,
- scope: this,
- delay: 100
- },
- 'mouseover' : {
- fn: this.onMouseOver,
- scope: this
- },
- 'mouseout' : {
- fn: this.onMouseOut,
- scope: this
- }
-});
-
-Or a shorthand syntax:
-Code:
-el.on({
- 'click' : this.onClick,
- 'mouseover' : this.onMouseOver,
- 'mouseout' : this.onMouseOut,
- scope: this
-});
- delegate
- This is a configuration option that you can pass along when registering a handler for
-an event to assist with event delegation. Event delegation is a technique that is used to
-reduce memory consumption and prevent exposure to memory-leaks. By registering an event
-for a container element as opposed to each element within a container. By setting this
-configuration option to a simple selector, the target element will be filtered to look for
-a descendant of the target.
-For example: // using this markup:
-<div id='elId'>
- <p id='p1'>paragraph one</p>
- <p id='p2' class='clickable'>paragraph two</p>
- <p id='p3'>paragraph three</p>
-</div>
-// utilize event delegation to registering just one handler on the container element:
-el = Ext.get('elId');
-el.on(
- 'click',
- function(e,t) {
- // handle click
- console.info(t.id); // 'p2'
- },
- this,
- {
- // filter the target element to be a descendant with the class 'clickable'
- delegate: '.clickable'
- }
+ Ext.ElementAppends 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:eventName : StringThe name of event to handle. fn : FunctionThe handler function the event invokes. This function is passed
+the following parameters: scope : Object(optional) The scope (this reference) in which the handler function is executed.
+If omitted, defaults to this Element.. options : Object(optional) An object containing handler configuration properties.
+This may contain any of the following properties:
+- scope Object :
The scope (this reference) in which the handler function is executed.
+If omitted, defaults to this Element.
+- delegate String:
A simple selector to filter the target or look for a descendant of the target. See below for additional details.
+- stopEvent Boolean:
True to stop the event. That is stop propagation, and prevent the default action.
+- preventDefault Boolean:
True to prevent the default action
+- stopPropagation Boolean:
True to prevent event propagation
+- normalized Boolean:
False to pass a browser event to the handler function instead of an Ext.EventObject
+- target Ext.Element:
Only call the handler if the event was fired on the target Element, not if the event was bubbled up from a child node.
+- delay Number:
The number of milliseconds to delay the invocation of the handler after the event fires.
+- single Boolean:
True to add a handler to handle just the next firing of the event, and then remove itself.
+- buffer Number:
Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed
+by the specified number of milliseconds. If the event fires again within that time, the original
+handler is not invoked, but the new handler is scheduled in its place.
+
+
+Combining Options
+In the following examples, the shorthand form on is used rather than the more verbose
+addListener. The two are equivalent. Using the options argument, it is possible to combine different
+types of listeners:
+
+A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the
+options object. The options object is available as the third parameter in the handler function.
+Code: el.on('click', this.onClick, this, {
+ single: true,
+ delay: 100,
+ stopEvent : true,
+ forumId: 4
+});
+
+Attaching multiple handlers in 1 call
+The method also allows for a single argument to be passed which is a config object containing properties
+which specify multiple handlers.
+
+Code: el.on({
+ 'click' : {
+ fn: this.onClick,
+ scope: this,
+ delay: 100
+ },
+ 'mouseover' : {
+ fn: this.onMouseOver,
+ scope: this
+ },
+ 'mouseout' : {
+ fn: this.onMouseOut,
+ scope: this
+ }
+});
+
+Or a shorthand syntax:
+Code:
+el.on({
+ 'click' : this.onClick,
+ 'mouseover' : this.onMouseOver,
+ 'mouseout' : this.onMouseOut,
+ scope: this
+});
+ delegate
+ This is a configuration option that you can pass along when registering a handler for
+an event to assist with event delegation. Event delegation is a technique that is used to
+reduce memory consumption and prevent exposure to memory-leaks. By registering an event
+for a container element as opposed to each element within a container. By setting this
+configuration option to a simple selector, the target element will be filtered to look for
+a descendant of the target.
+For example: // using this markup:
+<div id='elId'>
+ <p id='p1'>paragraph one</p>
+ <p id='p2' class='clickable'>paragraph two</p>
+ <p id='p3'>paragraph three</p>
+</div>
+// utilize event delegation to registering just one handler on the container element:
+el = Ext.get('elId');
+el.on(
+ 'click',
+ function(e,t) {
+ // handle click
+ console.info(t.id); // 'p2'
+ },
+ this,
+ {
+ // filter the target element to be a descendant with the class 'clickable'
+ delegate: '.clickable'
+ }
);
Returns:
| Element |
| alignTo( Mixed element , String position , [Array offsets ], [Boolean/Object animate ] )
:
- Ext.ElementAligns this element with another element relative to the specified anchor points. If the other element is the
-docume... 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]);
Parameters:element : MixedThe element to align to. position : StringThe position to align to. offsets : Array(optional) Offset the positioning by [x, y] animate : Boolean/Object(optional) true for the default animation or a standard Element animation config object Returns: | Element |
| anchorTo( Mixed element , String position , [Array offsets ], [Boolean/Object animate ], [Boolean/Number monitorScroll ], Function callback )
- :
- Ext.ElementAnchors 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 : MixedThe element to align to. position : StringThe position to align to. offsets : Array(optional) Offset the positioning by [x, y] animate : Boolean/Object(optional) True for the default animation or a standard Element animation config object monitorScroll : Boolean/Number(optional) True to monitor body scroll and reposition. If this parameter
+ 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:
+
+- 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]);
Parameters:element : MixedThe element to align to. position : String(optional, defaults to "tl-bl?") The position to align to. offsets : Array(optional) Offset the positioning by [x, y] animate : Boolean/Object(optional) true for the default animation or a standard Element animation config object Returns:
| Element |
| anchorTo( Mixed element , String position , [Array offsets ], [Boolean/Object animate ], [Boolean/Number monitorScroll ], Function callback )
+ :
+ Ext.ElementAnchors 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 : MixedThe element to align to. position : StringThe position to align to. offsets : Array(optional) Offset the positioning by [x, y] animate : Boolean/Object(optional) True for the default animation or a standard Element animation config object monitorScroll : Boolean/Number(optional) True to monitor body scroll and reposition. If this parameter
is a number, it is used as the buffer delay (defaults to 50ms). callback : FunctionThe function to call after the animation finishes Returns: | Element |
| animate( Object args , [Float duration ], [Function onComplete ], [String easing ], [String animType ] )
:
Ext.ElementPerform custom animation on this element.
@@ -331,23 +331,23 @@ is of this form:
<div class= "{0}-bl"><div class= "{0}-br"><div class= "{0}-bc"></div></div></div>';
Example usage:
// Basic box wrap
-Ext.get("foo").boxWrap();
+ 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");
Parameters:class : String(optional) A base CSS class to apply to the containing wrapper element
+ // 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"); Parameters:class : String(optional) A base CSS class to apply to the containing wrapper element
(defaults to 'x-box'). Note that there are a number of CSS rules that are dependent on
this name to make the overall effect work, so if you supply an alternate base class, make sure you
-also supply all of the necessary rules. Returns:
| Element |
| center( [Mixed centerIn ] )
+also supply all of the necessary rules.Returns: | Element |
| center( [Mixed centerIn ] )
:
voidCenters the Element in either the viewport, or another Element. Centers the Element in either the viewport, or another Element. | Element |
| child( String selector , [Boolean returnDom ] )
:
HTMLElement/Ext.ElementSelects 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). | Element |
| clean( [Boolean forceReclean ] )
:
- voidRemoves worthless text nodes Removes worthless text nodes Parameters:forceReclean : Boolean(optional) By default the element
-keeps track if it has been cleaned already so
-you can call this over and over. However, if you update the element and
+ void Removes worthless text nodes Removes worthless text nodes
| Element |
| clearOpacity()
:
Ext.ElementClears 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. | Element |
| clearPositioning( [String value ] )
@@ -378,51 +378,62 @@ showing through.Parameters:-
:
Ext.Element/HTMLElement
Gets the first child, skipping text nodes Gets the first child, skipping text nodes Parameters:Returns:Ext.Element/HTMLElement The first child or null
| Element |
| fly( String/HTMLElement el , [String named ] )
:
- ElementGets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to t... 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. Parameters:el : String/HTMLElementThe dom node or id named : String(optional) Allows for creation of named reusable flyweights to prevent conflicts
+ Element Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to t... 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.
| Element |
| focus( [Number defer ] )
:
Ext.ElementTries to focus the element. Any exceptions are caught and ignored. Tries to focus the element. Any exceptions are caught and ignored. | Element |
| get( Mixed el )
:
- Element<static> Retrieves Ext.Element objects.
-This method does not retrieve Components. This method
-retrieves Ext.Element objects ... <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
+ Element <static> Retrieves Ext.Element objects.
+This method does not retrieve Components. This method
+retrieves Ext.Element objects wh... <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. | Element |
| getAlignToXY( Mixed element , String position , [Array offsets ] )
:
- ArrayGets the x,y coordinates to align this element with another element. See alignTo for more info on the
-supported posi... Gets the x,y coordinates to align this element with another element. See alignTo for more info on the
-supported position values. | Element |
| getAnchorXY( [String anchor ], [Boolean local ], [Object size ] )
+ ArrayGets 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 : MixedThe element to align to. position : String(optional, defaults to "tl-bl?") The position to align to. offsets : Array(optional) Offset the positioning by [x, y] Returns: | Element |
| getAnchorXY( [String anchor ], [Boolean local ], [Object size ] )
:
- ArrayGets 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. | Element |
| getAttribute( String name , [String namespace ] )
:
StringReturns the value of an attribute from the element's underlying DOM node. Returns the value of an attribute from the element's underlying DOM node. Parameters:Returns:String The attribute value
| Element |
| getAttributeNS( String namespace , String name )
:
StringReturns 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:Returns:String The attribute value
| Element |
| getBorderWidth( String side )
:
- NumberGets the width of the border(s) for the specified side(s) Gets the width of the border(s) for the specified side(s) Parameters:side : StringCan be t, l, r, b or any combination of those to add multiple values. For example,
+ 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:side : StringCan be t, l, r, b or any combination of those to add multiple values. For example,
passing 'lr' would get the border left width + the border right width. Returns:
| Element |
| getBottom( Boolean local )
:
NumberGets 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) | Element |
| getBox( [Boolean contentBox ], [Boolean local ] )
:
- ObjectReturn 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. | Element |
| getCenterXY()
+ ObjectReturn an object defining the area of this Element which can be passed to setBox to
+set another Element's size/locat... Return an object defining the area of this Element which can be passed to setBox to
+set another Element's size/location to match this element. Parameters:Returns:Object box An object in the format<pre><code>
+{
+ x: <Element's X position>,
+ y: <Element's Y position>,
+ width: <Element's width>,
+ height: <Element's height>,
+ bottom: <Element's lower bound>,
+ right: <Element's rightmost bound>
+}
+</code></pre>
+The returned object may also be addressed as an Array where index 0 contains the X position
+and index 1 contains the Y position. So the result may also be used for {@link #setXY}
| Element |
| getCenterXY()
:
ArrayCalculates the x, y to center this element on the screen Calculates the x, y to center this element on the screen Parameters:Returns:Array The x, y values [x, y]
| Element |
| getColor( String attr , String defaultValue , [String prefix ] )
:
- voidReturn the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
-are convert to stand... 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. | Element |
| getComputedHeight()
:
NumberReturns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
@@ -436,8 +447,8 @@ when needed to simulate offsetWidth when offsets aren't available. This may not
if a width has not been set using CSS. | Element |
| getFrameWidth( String sides )
:
NumberReturns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
- for more informa... Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
- for more information about the sides. | Element |
| getHeight( [Boolean contentHeight ] )
+ for more info...Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
+ for more information about the sides. | Element |
| getHeight( [Boolean contentHeight ] )
:
NumberReturns the offset height of the element Returns the offset height of the element Parameters:Returns:Number The element's height
| Element |
| getLeft( Boolean local )
:
@@ -448,7 +459,7 @@ 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 d... 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. | Element |
| getPadding( String side )
:
- NumberGets the width of the padding(s) for the specified side(s) Gets the width of the padding(s) for the specified side(s) Parameters:side : StringCan be t, l, r, b or any combination of those to add multiple values. For example,
+ Number Gets the width of the padding(s) for the specified side(s) Gets the width of the padding(s) for the specified side(s) Parameters:side : StringCan be t, l, r, b or any combination of those to add multiple values. For example,
passing 'lr' would get the padding left + the padding right. Returns:
| Element |
| getPositioning()
:
ObjectGets an object with all CSS positioning properties. Useful along with setPostioning to get
@@ -465,7 +476,13 @@ The element must be part of the DOM tree to have a region (display:none or eleme
:
Object Returns the size of the element. Returns the size of the element. | Element |
| getStyle( String property )
:
- StringNormalizes currentStyle and computedStyle. Normalizes currentStyle and computedStyle. | Element |
| getStyles( String style1 , String style2 , String etc. )
+ StringNormalizes currentStyle and computedStyle. Normalizes currentStyle and computedStyle. | Element |
| getStyleSize()
+ :
+ voidReturns the dimensions of the element available to lay content out in.
+getStyleSize utilizes prefers style sizing if... Returns the dimensions of the element available to lay content out in.
+getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and offsetWidth/clientWidth.
+To obtain the size excluding scrollbars, use getViewSize
+Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc. | Element |
| getStyles( String style1 , String style2 , String etc. )
:
ObjectReturns an object with properties matching the styles requested.
For example, el.getStyles('color', 'font-size', 'wi... Returns an object with properties matching the styles requested.
@@ -480,18 +497,20 @@ For example, el.getStyles('color', 'font-size', 'width') might return
:
String/Number Returns the value of the "value" attribute Returns the value of the "value" attribute | Element |
| getViewSize()
:
- ObjectReturns the width and height of the viewport.
-var vpSize = Ext.getBody().getViewSize();
-
- // all Windows cr... Returns the width and height of the viewport.
- var vpSize = Ext.getBody().getViewSize();
+ voidReturns the dimensions of the element available to lay content out in.
+If the element (or any ancestor element) has ... Returns the dimensions of the element available to lay content out in.
+ If the element (or any ancestor element) has CSS style display : none , the dimensions will be zero.
+example: 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.
| Element |
| getWidth( [Boolean contentWidth ] )
+ // To handle window resizing you would have to hook onto onWindowResize.
+getViewSize utilizes clientHeight/clientWidth which excludes sizing of scrollbars.
+To obtain the size including scrollbars, use getStyleSize
+Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc. | Element |
| getWidth( [Boolean contentWidth ] )
:
NumberReturns the offset width of the element Returns the offset width of the element Parameters:Returns:Number The element's width
| Element |
| getX()
:
@@ -499,18 +518,13 @@ var vpSize = Ext.getBody().getViewSize();
:
ArrayGets the current position of the element based on page coordinates. Element must be part of the DOM tree to have pag... 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). | Element |
| getY()
:
- NumberGets the current Y position of the element based on page coordinates. Element must be part of the DOM tree to have p... 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). | Element |
| handleError( Object/Error e )
- :
- voidFramework-wide error-handler. Developers can override this method to provide
-custom exception-handling. Framework e... 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. | Element |
| hasClass( String className )
+ NumberGets the current Y position of the element based on page coordinates. Element must be part of the DOM tree to have p... 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). | Element |
| hasClass( String className )
:
BooleanChecks if the specified CSS class exists on this element's DOM node. Checks if the specified CSS class exists on this element's DOM node. | Element |
| hide( [Boolean/Object animate ] )
:
Ext.ElementHide this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible. Hide this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible. | Element |
| hover( Function overFn , Function outFn , [Object scope ], [Object options ] )
:
- Ext.ElementSets up event handlers to call the passed functions when the mouse is moved into and out of the Element. Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element. Parameters:overFn : FunctionThe function to call when the mouse enters the Element. outFn : FunctionThe function to call when the mouse leaves the Element. scope : Object(optional) The scope (this reference) in which the functions are executed. Defaults to the Element's DOM element. options : Object Returns: | Element |
| initDD( String group , Object config , Object overrides )
+ Ext.ElementSets up event handlers to call the passed functions when the mouse is moved into and out of the Element. Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element. Parameters:overFn : FunctionThe function to call when the mouse enters the Element. outFn : FunctionThe function to call when the mouse leaves the Element. scope : Object(optional) The scope (this reference) in which the functions are executed. Defaults to the Element's DOM element. options : Object Returns: | Element |
| initDD( String group , Object config , Object overrides )
:
Ext.dd.DDInitializes a Ext.dd.DD drag drop object for this element. Initializes a Ext.dd.DD drag drop object for this element. | Element |
| initDDProxy( String group , Object config , Object overrides )
:
@@ -526,7 +540,7 @@ Ext.Error class.Parameters:-
:
HTMLElement/Ext.Element
Inserts an html fragment into this element Inserts an html fragment into this element Parameters:where : StringWhere to insert the html in relation to this element - beforeBegin, afterBegin, beforeEnd, afterEnd. html : StringThe HTML fragment returnEl : Boolean(optional) True to return an Ext.Element (defaults to false) Returns:
| Element |
| insertSibling( Mixed/Object/Array el , [String where ], [Boolean returnDom ] )
:
- Ext.ElementInserts (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 Parameters:el : Mixed/Object/ArrayThe id, element to insert or a DomHelper config to create and insert *or* an array of any of those. where : String(optional) 'before' or 'after' defaults to before returnDom : Boolean(optional) True to return the raw DOM element instead of Ext.Element Returns:Ext.Element the inserted Element
| Element |
| is( String selector )
+ Ext.ElementInserts (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 Parameters:el : Mixed/Object/ArrayThe id, element to insert or a DomHelper config to create and insert *or* an array of any of those. where : String(optional) 'before' or 'after' defaults to before returnDom : Boolean(optional) True to return the raw DOM element instead of Ext.Element Returns: | Element |
| is( String selector )
:
BooleanReturns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child) Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child) | Element |
| isBorderBox()
:
@@ -542,8 +556,8 @@ Ext.Error class.Parameters:-
:
Ext.Element/HTMLElement
Gets the last child, skipping text nodes Gets the last child, skipping text nodes Parameters:Returns:Ext.Element/HTMLElement The last child or null
| Element |
| load()
:
- Ext.ElementDirect access to the Updater Ext.Updater.update method. The method takes the same object
-parameter as Ext.Updater.up... Direct access to the Updater Ext.Updater.update method. The method takes the same object
+ Ext.Element Direct access to the Updater Ext.Updater.update method. The method takes the same object
+parameter as Ext.Updater.upd... | Element |
| mask( [String msg ], [String msgCls ] )
:
ElementPuts a mask over this element to disable user interaction. Requires core.css.
@@ -558,7 +572,7 @@ The element must be part of the DOM tree to have page coordinates (display:none
:
Ext.Element/HTMLElement Gets the next sibling, skipping text nodes Gets the next sibling, skipping text nodes Parameters:Returns:Ext.Element/HTMLElement The next sibling or null
| Element |
| on( String eventName , Function fn , [Object scope ], [Object options ] )
:
- voidAppends an event handler (shorthand for addListener). Appends an event handler (shorthand for addListener). Parameters:eventName : StringThe type of event to handle fn : FunctionThe handler function the event invokes scope : Object(optional) The scope (this element) of the handler function options : Object(optional) An object containing standard addListener options Returns: | Element |
| parent( [String selector ], [Boolean returnDom ] )
+ voidAppends an event handler (shorthand for addListener). Appends an event handler (shorthand for addListener). Parameters:eventName : StringThe name of event to handle. fn : FunctionThe handler function the event invokes. scope : Object(optional) The scope (this reference) in which the handler function is executed. options : Object(optional) An object containing standard addListener options Returns: | Element |
| parent( [String selector ], [Boolean returnDom ] )
:
Ext.Element/HTMLElementGets the parent node for this element, optionally chaining up trying to match a selector Gets the parent node for this element, optionally chaining up trying to match a selector Parameters:Returns:Ext.Element/HTMLElement The parent node or null
| Element |
| position( [String pos ], [Number zIndex ], [Number x ], [Number y ] )
:
@@ -566,32 +580,36 @@ The element must be part of the DOM tree to have page coordinates (display:none
the element positione...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. Parameters:pos : String(optional) Positioning to use "relative", "absolute" or "fixed" zIndex : Number(optional) The zIndex to apply x : Number(optional) Set the page X position y : Number(optional) Set the page Y position Returns: | Element |
| prev( [String selector ], [Boolean returnDom ] )
:
- Ext.Element/HTMLElementGets the previous sibling, skipping text nodes Gets the previous sibling, skipping text nodes | Element |
| query( String selector )
+ Ext.Element/HTMLElementGets the previous sibling, skipping text nodes Gets the previous sibling, skipping text nodes | Element |
| purgeAllListeners()
+ :
+ Ext.ElementRecursively removes all previous added listeners from this element and its children Recursively removes all previous added listeners from this element and its children | Element |
| query( String selector )
:
ArraySelects child nodes based on the passed CSS selector (the selector should not contain an id). Selects child nodes based on the passed CSS selector (the selector should not contain an id). Parameters:selector : StringThe CSS selector Returns: | Element |
| radioClass( String/Array className )
:
Ext.ElementAdds 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. | Element |
| relayEvent( String eventName , Object object )
:
- voidCreate an event handler on this element such that when the event fires and is handled by this element,
-it will be re... 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). | Element |
| remove()
:
- voidRemoves this element from the DOM and deletes it from the cache Removes this element from the DOM and deletes it from the cache | Element |
| removeAllListeners()
+ voidRemoves this element's dom reference. Note that event and cache removal is handled at Ext.removeNode Removes this element's dom reference. Note that event and cache removal is handled at Ext.removeNode | Element |
| removeAllListeners()
:
- Ext.ElementRemoves all previous added listeners from this element Removes all previous added listeners from this element | Element |
| removeClass( String/Array className )
+ Ext.ElementRemoves all previous added listeners from this element Removes all previous added listeners from this element | Element |
| removeAnchor()
:
- Ext.ElementRemoves one or more CSS classes from the element. Removes one or more CSS classes from the element. | Element |
| removeListener( String eventName , Function fn , [Object scope ] )
+ Ext.ElementRemove any anchor to this element. See anchorTo. Remove any anchor to this element. See anchorTo. | Element |
| removeClass( String/Array className )
:
- Ext.ElementRemoves an event handler from this element. The shorthand version un is equivalent.
-Note: if a scope was explicitly... 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);
Parameters:eventName : Stringthe type of event to remove fn : Functionthe method the event invokes scope : Object(optional) The scope (The this reference) of the handler function. Defaults
-to this Element. Returns: | Element |
| repaint()
+ Ext.ElementRemoves one or more CSS classes from the element. Removes one or more CSS classes from the element. | Element |
| removeListener( String eventName , Function fn , Object scope )
+ :
+ Ext.ElementRemoves an event handler from this element. The shorthand version un is equivalent.
+Note: if a scope was explicitly ... 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);
Parameters:eventName : StringThe name of the event from which to remove the handler. fn : FunctionThe handler function to remove. This must be a reference to the function passed into the addListener call.scope : ObjectIf a scope (this reference) was specified when the listener was added,
+then this must refer to the same object. Returns: | Element |
| repaint()
:
Ext.ElementForces the browser to repaint this element Forces the browser to repaint this element | Element |
| replace( Mixed el )
:
@@ -607,9 +625,9 @@ within this element's scrollable range.Param
was scrolled as far as it could go. | Element |
| scrollIntoView( [Mixed container ], [Boolean hscroll ] )
:
Ext.ElementScrolls this element into view within the passed container. Scrolls this element into view within the passed container. Parameters:container : Mixed(optional) The container element to scroll (defaults to document.body). Should be a
-string (id), dom node, or Ext.Element. hscroll : Boolean(optional) False to disable horizontal scroll (defaults to true) Returns: | Element |
| scrollTo( String side , Number value , [Boolean/Object animate ] )
+string (id), dom node, or Ext.Element.hscroll : Boolean(optional) False to disable horizontal scroll (defaults to true) Returns: | Element |
| scrollTo( String side , Number value )
:
- ElementScrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it ... 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(). | Element |
| select( String/Array selector , [Boolean unique ], [HTMLElement/String root ] )
+ ElementScrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it ... 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(). | Element |
| select( String/Array selector , [Boolean unique ], [HTMLElement/String root ] )
:
CompositeElementLite/CompositeElementSelects elements based on the passed CSS selector to enable Element methods
to be applied to many related elements i... | Element |
| setHeight( Mixed height , [Boolean/Object animate ] )
:
- Ext.ElementSet the height of this Element.
-// change the height to 200px and animate with default configuration
-Ext.fly('eleme... 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"); }
-});
Parameters:height : MixedThe new height. This may be one of:
| Element |
| setLeft( String left )
:
Ext.ElementSets the element's left position directly using CSS style (instead of setX). Sets the element's left position directly using CSS style (instead of setX). | Element |
| setLeftTop( String left , String top )
@@ -656,7 +674,7 @@ Ext.fly('elId').setHeight(150, {
The element must ...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). Parameters:x : NumberX value for new position (coordinates are page-based) y : NumberY value for new position (coordinates are page-based) animate : Boolean/Object(optional) True for the default animation, or a standard Element animation config object Returns: | Element |
| setOpacity( Float opacity , [Boolean/Object animate ] )
:
- Ext.ElementSet the opacity of the element Set the opacity of the element | Element |
| setPositioning( Object posCfg )
:
Ext.ElementSet positioning with an object returned by getPositioning(). Set positioning with an object returned by getPositioning(). | Element |
| setRegion( Ext.lib.Region region , [Boolean/Object animate ] )
@@ -676,19 +694,19 @@ the default animation ({duration: .35, easing: 'easeIn'})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. Parameters:property : String/ObjectThe style property to be set, or an object of multiple styles. value : String(optional) The value to apply to the given property, or null if an object was passed. Returns: | Element |
| setTop( String top )
:
- Ext.ElementSets the element's top position directly using CSS style (instead of setY). Sets the element's top position directly using CSS style (instead of setY). | Element |
| setVisibilityMode( visMode Ext.Element.VISIBILITY )
+ Ext.ElementSets the element's top position directly using CSS style (instead of setY). Sets the element's top position directly using CSS style (instead of setY). | Element |
| setVisibilityMode( Number visMode )
:
Ext.ElementSets the element's visibility mode. When setVisible() is called it
will use this to determine whether to set the vis... 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. Parameters:Ext.Element.VISIBILITY : visModeor Ext.Element.DISPLAY Returns: | Element |
| setVisible( Boolean visible , [Boolean/Object animate ] )
+will use this to determine whether to set the visibility or the display property. | Element |
| setVisible( Boolean visible , [Boolean/Object animate ] )
:
Ext.ElementSets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
the d... 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. Parameters:visible : BooleanWhether the element is visible animate : Boolean/Object(optional) True for the default animation, or a standard Element animation config object Returns: | Element |
| setWidth( Mixed width , [Boolean/Object animate ] )
:
- Ext.ElementSet the width of this Element. Set the width of this Element. Parameters:width : MixedThe new width. This may be one of:
-- A Number specifying the new width in this Element's defaultUnits (by default, pixels).
-- A String used to set the CSS width style. Animation may not be used.
+ Ext.Element
Set the width of this Element. Set the width of this Element.
| Element |
| setX( Number The , [Boolean/Object animate ] )
:
Ext.ElementSets the X position of the element based on page coordinates. Element must be part of the DOM tree to have page coor... 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). Parameters:The : NumberX position of the element animate : Boolean/Object(optional) True for the default animation, or a standard Element animation config object Returns: | Element |
| setXY( Array pos , [Boolean/Object animate ] )
@@ -707,10 +725,10 @@ The element must be part of the DOM tree to have page coordinates (display:none
:
Ext.ElementToggles 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). Parameters:className : StringThe CSS class to toggle Returns: | Element |
| translatePoints( Number/Array x , [Number y ] )
:
- ObjectTranslates the passed page coordinates into left/top css values for this element Translates the passed page coordinates into left/top css values for this element Parameters:x : Number/ArrayThe page x or an array containing [x, y] y : Number(optional) The page y, required if x is not an array Returns: | Element |
| un( String eventName , Function fn , [Object scope ] )
+ ObjectTranslates the passed page coordinates into left/top css values for this element Translates the passed page coordinates into left/top css values for this element Parameters:x : Number/ArrayThe page x or an array containing [x, y] y : Number(optional) The page y, required if x is not an array Returns: | Element |
| un( String eventName , Function fn , Object scope )
:
- Ext.ElementRemoves an event handler from this element (see removeListener for additional notes). Removes an event handler from this element (see removeListener for additional notes). Parameters:eventName : Stringthe type of event to remove fn : Functionthe method the event invokes scope : Object(optional) The scope (The this reference) of the handler function. Defaults
-to this Element. Returns: | Element |
| unclip()
+ Ext.ElementRemoves an event handler from this element (see removeListener for additional notes). Removes an event handler from this element (see removeListener for additional notes). Parameters:eventName : StringThe name of the event from which to remove the handler. fn : FunctionThe handler function to remove. This must be a reference to the function passed into the addListener call.scope : ObjectIf a scope (this reference) was specified when the listener was added,
+then this must refer to the same object. Returns: | Element |
| unclip()
:
Ext.ElementReturn clipping (overflow) to original clipping before clip was called Return clipping (overflow) to original clipping before clip was called | Element |
| unmask()
:
@@ -752,7 +770,9 @@ This is a shortcut for findParentNode() that always returns an Ext.Element.Ext.EventObject e, HtmlElement t , Object o )
Fires when a control loses the input focus and its value has been modified since gaining focus. Fires when a control loses the input focus and its value has been modified since gaining focus. Listeners will be called with the following arguments:e : Ext.EventObjectt : HtmlElementThe target of the event. o : ObjectThe options configuration passed to the addListener call.
| Element |
| click :
( Ext.EventObject e , HtmlElement t , Object o )
- Fires when a mouse click is detected within the element. Fires when a mouse click is detected within the element. Listeners will be called with the following arguments:e : Ext.EventObjectt : HtmlElementThe target of the event. o : ObjectThe options configuration passed to the addListener call.
| Element |
| dblclick :
+ Fires when a mouse click is detected within the element. Fires when a mouse click is detected within the element. Listeners will be called with the following arguments:e : Ext.EventObjectt : HtmlElementThe target of the event. o : ObjectThe options configuration passed to the addListener call.
| Element |
| contextmenu :
+ ( Ext.EventObject e , HtmlElement t , Object o )
+ Fires when a right click is detected within the element. Fires when a right click is detected within the element. Listeners will be called with the following arguments:e : Ext.EventObjectt : HtmlElementThe target of the event. o : ObjectThe options configuration passed to the addListener call.
| Element |
| dblclick :
( Ext.EventObject e , HtmlElement t , Object o )
Fires when a mouse double click is detected within the element. Fires when a mouse double click is detected within the element. Listeners will be called with the following arguments:e : Ext.EventObjectt : HtmlElementThe target of the event. o : ObjectThe options configuration passed to the addListener call.
| Element |
| error :
( Ext.EventObject e , HtmlElement t , Object o )
|