Alternate names
Ext.ElementHierarchy
Ext.BaseExt.dom.ElementMixins
Requires
Mixed into
Files
Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.
// by id
var el = Ext.get("my-div");
// by DOM element reference
var el = Ext.get(myDivElement);
For working with collections of Elements, see Ext.CompositeElement.
The event name to bubble, or an Array of event names.
The event name to bubble, or an Array of event names.
A config object containing one or more event handlers to be added to this object during initialization. This
should be a valid listeners config object as specified in the addListener example for attaching
multiple handlers at once.
See the Event guide for more
Note: It is bad practice to specify a listener's config when you are defining a class using Ext.define().
Instead, only specify listeners when you are instantiating your class with Ext.create().
Visibility mode constant for use with setVisibilityMode. Use display to hide element.
Defaults to: 2
Visibility mode constant for use with setVisibilityMode. Use offsets to hide element.
Defaults to: 3
Visibility mode constant for use with setVisibilityMode. Use visibility to hide element.
Defaults to: 1
The default unit to append to CSS values where a unit isn't provided.
Defaults to: "px"
Defaults to: {id: 'observable', hooks: {destroy: 'destroy'}}
Overrides: Ext.mixin.Sortable.mixinConfig
Defaults to: 'element'
Overrides: Ext.mixin.Observable.observableType
Get the reference to the current class from which this object was instantiated. Unlike statics,
this.self is scope-dependent and it's meant to be used for dynamic inheritance. See statics
for a detailed comparison
Ext.define('My.Cat', {
statics: {
speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
},
constructor: function() {
alert(this.self.speciesName); // dependent on 'this'
},
clone: function() {
return new this.self();
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
}
});
var cat = new My.Cat(); // alerts 'Cat'
var snowLeopard = new My.SnowLeopard(); // alerts 'Snow Leopard'
var clone = snowLeopard.clone();
alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
This shared object is keyed by style name (e.g., 'margin-left' or 'marginLeft'). The values are objects with the following properties:
name (String) : The actual name to be presented to the DOM. This is typically the value
returned by normalize.get (Function) : A hook function that will perform the get on this style. These
functions receive "(dom, el)" arguments. The dom parameter is the DOM Element
from which to get the style. The el argument (may be null) is the Ext.Element.set (Function) : A hook function that will perform the set on this style. These
functions receive "(dom, value, el)" arguments. The dom parameter is the DOM Element
from which to get this style. The value parameter is the new value for the style. The
el argument (may be null) is the Ext.Element.The this pointer is the object that contains get or set, which means that
this.name can be accessed if needed. The hook functions are both optional.
Defaults to: {}
Overrides: Ext.Evented.constructor, Ext.util.Collection.constructor, Ext.mixin.Observable.constructor, Ext.draw.modifier.Modifier.constructor
Appends an after-event handler.
Same as addListener with order set to 'after'.
The name of the event to listen for.
The method the event invokes.
The scope for fn.
An object containing handler configuration.
Appends a before-event handler. Returning false from the handler will stop the event.
Same as addListener with order set to 'before'.
The name of the event to listen for.
The method the event invokes.
The scope for fn.
An object containing handler configuration.
Adds the given CSS class(es) to this Element.
The CSS class(es) to add to this element.
Prefix to prepend to each class.
Suffix to append to each class.
this
Adds the specified events to the list of events which this Observable may fire.
This method has been deprecated since 2.0
It's no longer needed to add events before firing.
Appends an event handler to this object. You can review the available handlers by looking at the 'events' section of the documentation for the component you are working with.
Using the options argument, it is possible to combine different types of listeners:
A delayed, one-time listener:
container.addListener('tap', this.handleTap, this, {
single: true,
delay: 100
});
The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example:
container.addListener({
tap : this.onTap,
swipe: this.onSwipe,
scope: this // Important. Ensure "this" is correct during handler execution
});
One can also specify options for each event handler separately:
container.addListener({
tap : { fn: this.onTap, scope: this, single: true },
swipe: { fn: button.onSwipe, scope: button }
});
See the Events Guide for more.
The name of the event to listen for. May also be an object who's property names are event names.
The method the event invokes. Will be called with arguments given to
fireEvent plus the options parameter described below.
The scope (this reference) in which the handler function is executed. If
omitted, defaults to the object which fired the event.
An object containing handler configuration.
This object may contain any of the following properties:
The scope (this reference) in which the handler function is executed. If omitted, defaults to the object
which fired the event.
The number of milliseconds to delay the invocation of the handler after the event fires.
true to add a handler to handle just the next firing of the event, and then remove itself.
The order of when the listener should be added into the listener queue.
If you set an order of before and the event you are listening to is preventable, you can return false and it will stop the event.
Available options are before, current and after.
Defaults to: current
Causes the handler to be 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.
Allows you to add a listener onto a element of this component using the elements reference.
Ext.create('Ext.Component', {
listeners: {
element: 'element',
tap: function() {
alert('element tap!');
}
}
});
All components have the element reference, which is the outer most element of the component. Ext.Container also has the
innerElement element which contains all children. In most cases element is adequate.
Uses Ext.ComponentQuery to delegate events to a specified query selector within this item.
// Create a container with a two children; a button and a toolbar
var container = Ext.create('Ext.Container', {
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'My Toolbar'
},
{
xtype: 'button',
text: 'My Button'
}
]
});
container.addListener({
// Ext.Buttons have an xtype of 'button', so we use that are a selector for our delegate
delegate: 'button',
tap: function() {
alert('Button tapped!');
}
});
The order of when the listener should be added into the listener queue.
Possible values are before, current and after.
Defaults to: 'current'
Adds listeners to any Observable object (or Element) which are automatically removed when this Component is destroyed.
This method has been deprecated since 2.0
All listeners are now automatically managed where necessary. Simply use addListener.
The item to which to add a listener/listeners.
The event name, or an object containing event name properties.
If the eventName parameter was an event name, this is the handler function.
If the eventName parameter was an event name, this is the scope in which
the handler function is executed.
If the eventName parameter was an event name, this is the
addListener options.
Appends the passed element(s) to this element.
a DOM Node or an existing Element.
This element.
Appends this element to the passed element.
The new parent element. The id of the node, a DOM Node or an existing Element.
This element.
More flexible version of setStyle for setting style properties.
A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
a function which returns such a specification.
this
Call the original method that was previously overridden with override,
This method is deprecated as callParent does the same thing.
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
var instance = this.callOverridden();
alert("Meeeeoooowwww");
return instance;
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"
The arguments, either an array or the arguments object
from the current method, for example: this.callOverridden(arguments)
Returns the result of calling the overridden method
Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see Ext.define).
Ext.define('My.Base', {
constructor: function (x) {
this.x = x;
},
statics: {
method: function (x) {
return x;
}
}
});
Ext.define('My.Derived', {
extend: 'My.Base',
constructor: function () {
this.callParent([21]);
}
});
var obj = new My.Derived();
alert(obj.x); // alerts 21
This can be used with an override as follows:
Ext.define('My.DerivedOverride', {
override: 'My.Derived',
constructor: function (x) {
this.callParent([x*2]); // calls original My.Derived constructor
}
});
var obj = new My.Derived();
alert(obj.x); // now alerts 42
This also works with static methods.
Ext.define('My.Derived2', {
extend: 'My.Base',
statics: {
method: function (x) {
return this.callParent([x*2]); // calls My.Base.method
}
}
});
alert(My.Base.method(10)); // alerts 10
alert(My.Derived2.method(10)); // alerts 20
Lastly, it also works with overridden static methods.
Ext.define('My.Derived2Override', {
override: 'My.Derived2',
statics: {
method: function (x) {
return this.callParent([x*2]); // calls My.Derived2.method
}
}
});
alert(My.Derived2.method(10)); // now alerts 40
To override a method and replace it and also call the superclass method, use callSuper. This is often done to patch a method to fix a bug.
The arguments, either an array or the arguments object
from the current method, for example: this.callParent(arguments)
Returns the result of calling the parent method
This method is used by an override to call the superclass method but bypass any overridden method. This is often done to "patch" a method that contains a bug but for whatever reason cannot be fixed directly.
Consider:
Ext.define('Ext.some.Class', {
method: function () {
console.log('Good');
}
});
Ext.define('Ext.some.DerivedClass', {
method: function () {
console.log('Bad');
// ... logic but with a bug ...
this.callParent();
}
});
To patch the bug in DerivedClass.method, the typical solution is to create an
override:
Ext.define('App.paches.DerivedClass', {
override: 'Ext.some.DerivedClass',
method: function () {
console.log('Fixed');
// ... logic but with bug fixed ...
this.callSuper();
}
});
The patch method cannot use callParent to call the superclass method since
that would call the overridden method containing the bug. In other words, the
above patch would only produce "Fixed" then "Good" in the console log, whereas,
using callParent would produce "Fixed" then "Bad" then "Good".
The arguments, either an array or the arguments object
from the current method, for example: this.callSuper(arguments)
Returns the result of calling the superclass method
Selects a single direct child based on the passed CSS selector (the selector should not contain an id).
The CSS selector.
true to return the DOM node instead of Ext.dom.Element.
Defaults to: false
The child Ext.dom.Element (or DOM node if returnDom is true)
Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.
DomHelper element config object. If no tag is specified (e.g., {tag:'input'}) then a div will be
automatically generated with the specified attributes.
a child element of this element.
true to return the dom node instead of creating an Element.
The new child element.
Translates an element using CSS 3 in 2D.
This method has been removed since 2.0.0
Removes this element's DOM reference. Note that event and cache removal is handled at Ext.removeNode
Overrides: Ext.mixin.Observable.destroy, Ext.Base.destroy
Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).
The CSS selector.
true to return the DOM node instead of Ext.dom.Element.
Defaults to: false
The child Ext.dom.Element (or DOM node if returnDom is true).
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')
The simple selector to test.
The max depth to search as a number or element (defaults to 50 || document.body)
true to return a Ext.Element object instead of DOM node.
The matching DOM node (or null if no match was found).
Looks at parent nodes for a match of the passed simple selector (e.g. 'div.some-class' or 'span:first-child').
The simple selector to test.
The max depth to search as a number or element (defaults to 10 || document.body).
true to return a Ext.Element object instead of DOM node.
The matching DOM node (or null if no match was found).
Fires the specified event with the passed parameters and execute a function (action)
at the end if there are no listeners that return false.
The name of the event to fire.
Arguments to pass to handers.
Action.
Scope of fn.
Fires the specified event with the passed parameters (minus the event name, plus the options object passed
to addListener).
The first argument is the name of the event. Every other argument passed will be available when you listen for the event.
Firstly, we set up a listener for our new event.
this.on('myevent', function(arg1, arg2, arg3, arg4, options, e) {
console.log(arg1); // true
console.log(arg2); // 2
console.log(arg3); // { test: 'foo' }
console.log(arg4); // 14
console.log(options); // the options added when adding the listener
console.log(e); // the event object with information about the event
});
And then we can fire off the event.
this.fireEvent('myevent', true, 2, { test: 'foo' }, 14);
An event may be set to bubble up an Observable parent hierarchy by calling enableBubble.
The name of the event to fire.
Variable number of parameters are passed to handlers.
Returns false if any of the handlers return false.
Gets the first child, skipping text nodes.
Find the next sibling that matches the passed simple selector.
true to return a raw DOM node instead of an Ext.dom.Element.
The first child or null.
Gets the x,y coordinates specified by the anchor position on the element.
This method has been deprecated since 2.0.0
This method is no longer available for Ext.Element. Please see Ext.Component.showBy to do anchoring at Component level instead.
The specified anchor position.
Defaults to: c
true to get the local (element top/left-relative) anchor position instead
of page coordinates.
An object containing the size to use for calculating anchor position.
{width: (target width), height: (target height)} (defaults to the element's current size)
[x, y] An array containing the element's x and y coordinates.
Gets the bottom Y coordinate of the element (element Y position + element height).
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.
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 setXY.
If true a box for the content of the element is returned.
If true the element's left and top are returned instead of page x/y.
Retrieves the id of this component. Will autogenerate an id if one has not already been set.
id
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).
Any combination of 'l', 'r', 't', 'b' to get the sum of those sides.
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.
The element to get the offsets from.
The XY page offsets (e.g. [100, -200])
Retrieves the height of the element account for the top and bottom margins.
This method has been removed since 2.0.0
Retrieves the width of the element accounting for the left and right margins.
This method has been removed since 2.0.0
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.
If true an Ext.util.Region will be returned.
box An object in the format:
{
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>
}
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 setXY.
Gets the right X coordinate of the element (element X position + element width).
Gets the Scroller instance of the first parent that has one.
This method has been removed since 2.0.0
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.
This method has been deprecated since 2.0.0
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).
The X position of the element
Gets the current position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
The XY position of the element
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).
The Y position of the element
Hides this element. Uses display mode to determine whether to use "display" or "visibility". See setVisible.
Initialize configuration for this class. a typical example:
Ext.define('My.awesome.Class', {
// The default config
config: {
name: 'Awesome',
isAwesome: true
},
constructor: function(config) {
this.initConfig(config);
}
});
var awesome = new My.awesome.Class({
name: 'Super Awesome'
});
alert(awesome.getName()); // 'Super Awesome'
mixins The mixin prototypes as key - value pairs
Inserts this element after the passed element in the DOM.
The element to insert after.
The id of the node, a DOM Node or an existing Element.
This element.
Inserts this element before the passed element in the DOM.
The element before which this element will be inserted. The id of the node, a DOM Node or an existing Element.
This element.
Inserts an element as the first child of this element.
The id or element to insert.
this
Inserts an HTML fragment into this element.
Where to insert the HTML in relation to this element - 'beforeBegin', 'afterBegin', 'beforeEnd', 'afterEnd'. See Ext.DomHelper.insertHtml for details.
The HTML fragment
true to return an Ext.dom.Element.
Defaults to: false
The inserted node (or nearest related if more than 1 inserted).
Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element
The id, element to insert or a DomHelper config to create and insert or an array of any of those.
'before' or 'after'.
Defaults to: before
true to return the raw DOM element instead of Ext.dom.Element.
The inserted Element. If an array is passed, the last inserted element is returned.
Determines if this element is a descendant of the passed in Element.
This method has been removed since 2.0.0
Returns true if the value of the given property is visually transparent. This
may be due to a 'transparent' style value or an rgba value with 0 in the alpha
component.
This method has been deprecated since 2.0.0
The style property whose value is to be tested.
true if the style property is visually transparent.
Gets the last child, skipping text nodes.
Find the previous sibling that matches the passed simple selector.
true to return a raw DOM node instead of an Ext.dom.Element.
The last child or null.
Puts a mask over this element to disable user interaction.
This method has been removed since 2.0.0
Alias for addManagedListener.
This method has been deprecated since 2.0.0
This is now done automatically
The item to which to add a listener/listeners.
The event name, or an object containing event name properties.
If the eventName parameter was an event name, this is the handler function.
If the eventName parameter was an event name, this is the scope in which
the handler function is executed.
If the eventName parameter was an event name, this is the
addListener options.
Alias for removeManagedListener.
This method has been deprecated since 2.0.0
This is now done automatically
The item to which to add a listener/listeners.
The event name, or an object containing event name properties.
If the eventName parameter was an event name, this is the handler function.
If the eventName parameter was an event name, this is the scope in which
the handler function is executed.
Gets the next sibling, skipping text nodes.
Find the next sibling that matches the passed simple selector.
true to return a raw dom node instead of an Ext.dom.Element.
The next sibling or null.
Alias for addListener.
The name of the event to listen for. May also be an object who's property names are event names.
The method the event invokes. Will be called with arguments given to
fireEvent plus the options parameter described below.
The scope (this reference) in which the handler function is executed. If
omitted, defaults to the object which fired the event.
An object containing handler configuration.
This object may contain any of the following properties:
The scope (this reference) in which the handler function is executed. If omitted, defaults to the object
which fired the event.
The number of milliseconds to delay the invocation of the handler after the event fires.
true to add a handler to handle just the next firing of the event, and then remove itself.
The order of when the listener should be added into the listener queue.
If you set an order of before and the event you are listening to is preventable, you can return false and it will stop the event.
Available options are before, current and after.
Defaults to: current
Causes the handler to be 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.
Allows you to add a listener onto a element of this component using the elements reference.
Ext.create('Ext.Component', {
listeners: {
element: 'element',
tap: function() {
alert('element tap!');
}
}
});
All components have the element reference, which is the outer most element of the component. Ext.Container also has the
innerElement element which contains all children. In most cases element is adequate.
Uses Ext.ComponentQuery to delegate events to a specified query selector within this item.
// Create a container with a two children; a button and a toolbar
var container = Ext.create('Ext.Container', {
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'My Toolbar'
},
{
xtype: 'button',
text: 'My Button'
}
]
});
container.addListener({
// Ext.Buttons have an xtype of 'button', so we use that are a selector for our delegate
delegate: 'button',
tap: function() {
alert('Button tapped!');
}
});
The order of when the listener should be added into the listener queue.
Possible values are before, current and after.
Defaults to: 'current'
Gets the parent node for this element, optionally chaining up trying to match a selector.
Find a parent node that matches the passed simple selector.
true to return a raw DOM node instead of an Ext.dom.Element.
The parent node or null.
Gets the previous sibling, skipping text nodes.
Find the previous sibling that matches the passed simple selector.
true to return a raw DOM node instead of an Ext.dom.Element
The previous sibling or null.
Removes all listeners for this object.
This method has been deprecated since 2.0.0
Please use clearListeners instead.
Selects child nodes based on the passed CSS selector (the selector should not contain an id).
The CSS selector.
An array of the matched nodes.
Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
This method has been deprecated since 2.0.0
this
Removes this element's DOM reference. Note that event and cache removal is handled at Ext.removeNode
This method has been deprecated since 2.0.0
Please use destroy instead.
Removes a before-event handler.
Same as removeListener with order set to 'after'.
The name of the event the handler was associated with.
The handler to remove.
The scope originally specified for fn.
Extra options object.
Removes all listeners for this object.
This method has been deprecated since 2.0.0
Please use clearListeners instead.
Removes a before-event handler.
Same as removeListener with order set to 'before'.
The name of the event the handler was associated with.
The handler to remove.
The scope originally specified for fn.
Extra options object.
Removes the given CSS class(es) from this Element.
The CSS class(es) to remove from this element.
Prefix to prepend to each class to be removed.
Defaults to: ''
Suffix to append to each class to be removed.
Defaults to: ''
this
Removes an event handler.
The type of event the handler was associated with.
The handler to remove. This must be a reference to the function passed into the addListener call.
The scope originally specified for the handler. It must be the same as the scope argument specified in the original call to addListener or the listener will not be removed.
Extra options object. See addListener for details.
The order of the listener to remove.
Possible values are before, current and after.
Defaults to: 'current'
Adds listeners to any Observable object (or Element) which are automatically removed when this Component is destroyed.
This method has been deprecated since 2.0
All listeners are now automatically managed where necessary. Simply use removeListener.
The item to which to add a listener/listeners.
The event name, or an object containing event name properties.
If the eventName parameter was an event name, this is the handler function.
If the eventName parameter was an event name, this is the scope in which
the handler function is executed.
Replaces the passed element with this element.
The element to replace. The id of the node, a DOM Node or an existing Element.
This element.
Replaces a CSS class on the element with another. If the old name does not exist, the new name will simply be added.
The CSS class to replace.
The replacement CSS class.
Prefix to prepend to each class to be replaced.
Defaults to: ''
Suffix to append to each class to be replaced.
Defaults to: ''
this
Replaces this element with the passed element.
The new element (id of the node, a DOM Node or an existing Element) or a DomHelper config of an element to create.
This element.
Resumes firing events (see suspendEvents).
Pass as true to discard any queued events.
Selects elements based on the passed CSS selector to enable Element methods to be applied to many related elements in one statement through the returned. The element is the root of the search. CompositeElementLite object.
The CSS selector or an array of elements
Return a CompositeElement as opposed to a CompositeElementLite. Defaults to false.
Serializes a DOM form into a url encoded string
This method has been deprecated since 2.0.0
Please see Ext.form.Panel.getValues instead
The form
The url encoded form
Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function).
The object with the attributes.
false to override the default setAttribute to use expandos.
Defaults to: true
this
Sets the element's CSS bottom style.
The bottom CSS property value.
this
Sets the element's box. Use getBox on another element to get a box object.
The box to fill, for example:
{
left: ...,
top: ...,
width: ...,
height: ...
}
this
Sets the element's left position directly using CSS style (instead of setX).
The left CSS property value.
this
Sets the element's CSS right style.
The right CSS property value.
this
Set the size of this Element.
The new width. This may be one of:
{width: widthValue, height: heightValue}.The new height. This may be one of:
this
Wrapper for setting style properties, also takes single object parameter of multiple styles.
The style property to be set, or an object of multiple styles.
The value to apply to the given property, or null if an object was passed.
this
Sets the element's top position directly using CSS style (instead of setY).
The top CSS property value.
this
Sets the element's top and left positions directly using CSS style.
This method has been removed since 2.0.0
Use this to change the visibility mode between VISIBILITY, DISPLAY or OFFSETS.
this
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.
Whether the element is visible.
this
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).
The X position of the element
this
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).
Contains X & Y [x, y] values for new position (coordinates are page-based).
this
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).
The Y position of the element.
this
Shows this element. Uses display mode to determine whether to use "display" or "visibility". See setVisible.
Get the reference to the class from which this object was instantiated. Note that unlike self,
this.statics() is scope-independent and it always returns the class from which it was called, regardless of what
this points to during run-time
Ext.define('My.Cat', {
statics: {
totalCreated: 0,
speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
},
constructor: function() {
var statics = this.statics();
alert(statics.speciesName); // always equals to 'Cat' no matter what 'this' refers to
// equivalent to: My.Cat.speciesName
alert(this.self.speciesName); // dependent on 'this'
statics.totalCreated++;
},
clone: function() {
var cloned = new this.self(); // dependent on 'this'
cloned.groupName = this.statics().speciesName; // equivalent to: My.Cat.speciesName
return cloned;
}
});
Ext.define('My.SnowLeopard', {
extend: 'My.Cat',
statics: {
speciesName: 'Snow Leopard' // My.SnowLeopard.speciesName = 'Snow Leopard'
},
constructor: function() {
this.callParent();
}
});
var cat = new My.Cat(); // alerts 'Cat', then alerts 'Cat'
var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
var clone = snowLeopard.clone();
alert(Ext.getClassName(clone)); // alerts 'My.SnowLeopard'
alert(clone.groupName); // alerts 'Cat'
alert(My.Cat.totalCreated); // alerts 3
Suspends the firing of all events.
All events will be queued but you can discard the queued events by passing false in the resumeEvents call
Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
The CSS class to toggle.
this
Translates the passed page coordinates into left/top CSS values for this element.
The page x or an array containing [x, y].
The page y, required if x is not an array.
An object with left and top properties. e.g. {left: (value), top: (value)}.
Alias for removeListener.
The type of event the handler was associated with.
The handler to remove. This must be a reference to the function passed into the addListener call.
The scope originally specified for the handler. It must be the same as the scope argument specified in the original call to addListener or the listener will not be removed.
Extra options object. See addListener for details.
The order of the listener to remove.
Possible values are before, current and after.
Defaults to: 'current'
Removes a previously applied mask.
This method has been removed since 2.0.0
Walks up the dom looking for a parent node that matches the passed simple selector (e.g. 'div.some-class' or 'span:first-child').
This is a shortcut for findParentNode() that always returns an Ext.dom.Element.
The simple selector to test
The max depth to search as a number or element (defaults to 10 || document.body).
The matching DOM node (or null if no match was found).
Creates and wraps this element with another element.
DomHelper element config object for the wrapper element or null for an empty div
true to return the raw DOM element instead of Ext.dom.Element.
The newly created wrapper element.
Add methods / properties to the prototype of this class.
Ext.define('My.awesome.Cat', {
constructor: function() {
// ...
}
});
My.awesome.Cat.addMembers({
meow: function() {
alert('Meowww...');
}
});
var kitty = new My.awesome.Cat();
kitty.meow();
Add / override static properties of this class.
Ext.define('My.cool.Class', {
// this.se
});
My.cool.Class.addStatics({
someProperty: 'someValue', // My.cool.Class.someProperty = 'someValue'
method1: function() { }, // My.cool.Class.method1 = function() { ... };
method2: function() { } // My.cool.Class.method2 = function() { ... };
});
this
Borrow another class' members to the prototype of this class.
Ext.define('Bank', {
money: '$$$',
printMoney: function() {
alert('$$$$$$$');
}
});
Ext.define('Thief', {
// ...
});
Thief.borrow(Bank, ['money', 'printMoney']);
var steve = new Thief();
alert(steve.money); // alerts '$$$'
steve.printMoney(); // alerts '$$$$$$$'
The class to borrow members from
The names of the members to borrow
this
Create aliases for existing prototype methods. Example:
Ext.define('My.cool.Class', {
method1: function() { },
method2: function() { }
});
var test = new My.cool.Class();
My.cool.Class.createAlias({
method3: 'method1',
method4: 'method2'
});
test.method3(); // test.method1()
My.cool.Class.createAlias('method5', 'method3');
test.method5(); // test.method3() -> test.method1()
The new method name, or an object to set multiple aliases. See flexSetter
The original method name
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. Ext.fly is alias for 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.dom.Element class.
The DOM node or id.
Allows for creation of named reusable flyweights to prevent conflicts (e.g. internally Ext uses "_global").
The shared Element object (or null if no matching element was found).
Retrieves Ext.dom.Element objects. Ext.get is alias for 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.
The id of the node, a DOM Node or an existing Element.
The Element object (or null if no matching element was found).
Retrieves the document height
This method has been deprecated since 2.0.0
Please use Ext.Viewport.getWindowHeight instead
documentHeight
Retrieves the document width
This method has been deprecated since 2.0.0
Please use Ext.Viewport.getWindowWidth instead
documentWidth
Get the current class' name in string format.
Ext.define('My.cool.Class', {
constructor: function() {
alert(this.self.getName()); // alerts 'My.cool.Class'
}
});
My.cool.Class.getName(); // 'My.cool.Class'
className
Retrieves the current orientation of the window. This is calculated by determining if the height is greater than the width.
This method has been deprecated since 2.0.0
Please use Ext.Viewport.getOrientation instead
Orientation of window: 'portrait' or 'landscape'
Retrieves the viewport size of the window.
This method has been deprecated since 2.0.0
Please use Ext.Viewport.getSize instead
object containing width and height properties
Retrieves the viewport height of the window.
This method has been deprecated since 2.0.0
Please use Ext.Viewport.getWindowHeight instead
viewportHeight
Retrieves the viewport width of the window.
This method has been deprecated since 2.0.0
Please use Ext.Viewport.getWindowWidth instead
viewportWidth
Override members of this class. Overridden methods can be invoked via callParent.
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
var instance = this.callParent(arguments);
alert("Meeeeoooowwww");
return instance;
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"
As of 2.1, direct use of this method is deprecated. Use Ext.define instead:
Ext.define('My.CatOverride', {
override: 'My.Cat',
constructor: function() {
alert("I'm going to be a cat!");
var instance = this.callParent(arguments);
alert("Meeeeoooowwww");
return instance;
}
});
The above accomplishes the same result but can be managed by the Ext.Loader which can properly order the override and its target class and the build process can determine whether the override is needed based on the required state of the target class (My.Cat).
This method has been deprecated since 2.1.0
Please use Ext.define instead
The properties to add to this class. This should be specified as an object literal containing one or more properties.
this class
Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)
An object with margin sizes for top, right, bottom and left containing the unit
Converts a CSS string into an object with a property for each style.
The sample code below would return an object with 2 properties, one for background-color and one for color.
var css = 'background-color: red;color: blue; ';
console.log(Ext.dom.Element.parseStyles(css));
A CSS string
styles
Selects elements based on the passed CSS selector to enable Element methods to be applied to many related elements in one statement through the returned CompositeElementLite object.
The CSS selector or an array of elements
Return a CompositeElement as opposed to a CompositeElementLite. Defaults to false.
The root element of the query or id of the root
Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)
An string with unitized (px if units is not specified) metrics for top, right, bottom and left
Fires when there is a double tap.
The Ext.event.Event event encapsulating the DOM event.
The target of the event.
The options object passed to Ext.mixin.Observable.addListener.
The options object passed to Ext.util.Observable.addListener.
Fires when you touch and hold still for more than 1 second.
The Ext.event.Event event encapsulating the DOM event.
The target of the event.
The options object passed to Ext.mixin.Observable.addListener.
The options object passed to Ext.util.Observable.addListener.
Fires whenever this Element actually becomes visible (painted) on the screen. This is useful when you need to perform 'read' operations on the DOM element, i.e: calculating natural sizes and positioning.
Note: This event is not available to be used with event delegation. Instead painted only fires if you explicitly
add at least one listener to it, for performance reasons.
The component instance.
The options object passed to Ext.util.Observable.addListener.
Fires continuously when there is pinching (the touch must move for this to be fired).
The Ext.event.Event event encapsulating the DOM event.
The target of the event.
The options object passed to Ext.mixin.Observable.addListener.
The options object passed to Ext.util.Observable.addListener.
Fires when a pinch has ended.
The Ext.event.Event event encapsulating the DOM event.
The target of the event.
The options object passed to Ext.mixin.Observable.addListener.
The options object passed to Ext.util.Observable.addListener.
Fired once when a pinch has started.
The Ext.event.Event event encapsulating the DOM event.
The target of the event.
The options object passed to Ext.mixin.Observable.addListener.
The options object passed to Ext.util.Observable.addListener.
Important note: For the best performance on mobile devices, use this only when you absolutely need to monitor a Element's size.
Note: This event is not available to be used with event delegation. Instead resize only fires if you explicitly
add at least one listener to it, for performance reasons.
The component instance.
The options object passed to Ext.util.Observable.addListener.
Fires continuously when there is rotation (the touch must move for this to be fired).
When listening to this, ensure you know about the Ext.event.Event.angle and Ext.event.Event.rotation
properties in the event object.
The Ext.event.Event event encapsulating the DOM event.
The target of the event.
The options object passed to Ext.mixin.Observable.addListener.
The options object passed to Ext.util.Observable.addListener.
Fires when a rotation event has ended.
The Ext.event.Event event encapsulating the DOM event.
The target of the event.
The options object passed to Ext.mixin.Observable.addListener.
The options object passed to Ext.util.Observable.addListener.
Fired once when a rotation has started.
The Ext.event.Event event encapsulating the DOM event.
The target of the event.
The options object passed to Ext.mixin.Observable.addListener.
The options object passed to Ext.util.Observable.addListener.
Fires when there is a single tap.
The Ext.event.Event event encapsulating the DOM event.
The target of the event.
The options object passed to Ext.mixin.Observable.addListener.
The options object passed to Ext.util.Observable.addListener.
Fires when there is a swipe
When listening to this, ensure you know about the Ext.event.Event.direction property in the event object.
The Ext.event.Event event encapsulating the DOM event.
The target of the event.
The options object passed to Ext.mixin.Observable.addListener.
The options object passed to Ext.util.Observable.addListener.
Fires when you touch and hold still for more than 1 second.
The Ext.event.Event event encapsulating the DOM event.
The target of the event.
The options object passed to Ext.mixin.Observable.addListener.
The options object passed to Ext.util.Observable.addListener.