Instance Methods
This method applies a versioned, deprecation declaration to this class. This
is typically called by the deprecated config.
Aligns the 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").
- 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.
- Two edge/offset descriptors: An edge/offset descriptor is an edge initial
(
t/r/b/l) followed by a percentage along that side. This describes a
point to align with a similar point in the target. So 't0-b0' would be
the same as 'tl-bl', 'l0-r50' would place the top left corner of this item
halfway down the right edge of the target item. This allows more flexibility
and also describes which two edges are considered adjacent when positioning a tip pointer.
Following are all of the supported predefined anchor positions:
Value Description
----- -----------------------------
tl The top left corner
t The center of the top edge
tr The top right corner
l The center of the left edge
c The center
r The center of the right edge
bl The bottom left corner
b The center of the bottom edge
br The bottom right corner
You can put a '?' at the end of the alignment string to constrain the positioned element to the
Viewport. 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.
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", "tl-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]);
// align the 25% point on the bottom edge of this el
// with the 75% point on the top edge of other-el.
el.alignTo("other-el", 'b25-t75');
element :
Ext.util.Positionable/HTMLElement/String
The Positionable,
HTMLElement, or id of the element to align to.
position :
String
(optional)
Defaults to: "tl-bl?"
offsets :
Number[]
(optional)
Offset the positioning by [x, y]
Element animation config object
:
Ext.util.Positionable
anchorToEl :
Ext.util.Positionable/HTMLElement/String
The Positionable,
HTMLElement, or id of the element to align to.
alignment :
String
(optional)
Defaults to: "tl-bl?"
offsets :
Number[]
(optional)
Offset the positioning by [x, y]
animate :
Boolean/Object
(optional)
true for the default animation or a standard
Element animation config object
:
Ext.util.Positionable
Anchors an element to another element and realigns it when the window is resized.
anchorToEl :
Ext.util.Positionable/HTMLElement/String
The Positionable,
HTMLElement, or id of the element to align to.
alignment :
String
(optional)
Defaults to: "tl-bl?"
offsets :
Number[]
(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 in
milliseconds.
Defaults to: 50
callback :
Function
(optional)
The function to call after the animation finishes
:
Ext.util.Positionable
Calculates x,y coordinates specified by the anchor position on the element, adding
extraX and extraY values.
anchor :
String
(optional)
The specified anchor position.
See alignTo for details on supported anchor positions.
Defaults to: 'tl'
:
Number
(optional)
value to be added to the x coordinate
:
Number
(optional)
value to be added to the y coordinate
size :
Object
(optional)
An object containing the size to use for calculating anchor
position {width: (target width), height: (target height)} (defaults to the
element's current size)
:
Number[]
[x, y] An array containing the element's x and y coordinates
Calculates the new [x,y] position to move this Positionable into a constrain region.
By default, this Positionable is constrained to be within the container it was added to, or the element it was
rendered to.
Priority is given to constraining the top and left within the constraint.
An alternative constraint may be passed.
constrainTo :
String/HTMLElement/Ext.dom.Element/Ext.util.Region
(optional)
proposedPosition :
Number[]
(optional)
A proposed [X, Y] position to test for validity
and to coerce into constraints instead of using this Positionable's current position.
local :
Boolean
(optional)
The proposedPosition is local (relative to floatParent if a floating Component)
proposedSize :
Number[]
(optional)
A proposed [width, height] size to use when calculating
constraints instead of using this Positionable's current size.
:
Number[]
If the element needs to be translated, the new [X, Y] position within
constraints if possible, giving priority to keeping the top and left edge in the constrain region.
Otherwise, false.
Call the original method that was previously overridden with Ext.Base#override
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
}
});
My.Cat.override({
constructor: function() {
alert("I'm going to be a cat!");
this.callOverridden();
alert("Meeeeoooowwww");
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"
args :
Array/Arguments
The arguments, either an array or the arguments object
from the current method, for example: this.callOverridden(arguments)
:
Object
Returns the result of calling the overridden method
Deprecated since version 4.1.0
Use method-callParent instead.
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 and private methods.
Ext.define('My.Derived2', {
extend: 'My.Base',
// privates: {
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',
// privates: {
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
method-callSuper. This is often done to patch a method to fix a bug.
args :
Array/Arguments
The arguments, either an array or the arguments object
from the current method, for example: this.callParent(arguments)
:
Object
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', {
extend: 'Ext.some.Class',
method: function () {
console.log('Bad');
// ... logic but with a bug ...
this.callParent();
}
});
To patch the bug in Ext.some.DerivedClass.method, the typical solution is to create an
override:
Ext.define('App.patches.DerivedClass', {
override: 'Ext.some.DerivedClass',
method: function () {
console.log('Fixed');
// ... logic but with bug fixed ...
this.callSuper();
}
});
The patch method cannot use method-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".
args :
Array/Arguments
The arguments, either an array or the arguments object
from the current method, for example: this.callSuper(arguments)
:
Object
Returns the result of calling the superclass method
Clips this Component/Element to fit within the passed element's or component's view area
clippingEl :
Ext.Component/Ext.dom.Element/Ext.util.Region
The Component or element or Region which should
clip this element even if this element is outside the bounds of that region.
sides :
Number
The sides to clip 1=top, 2=right, 4=bottom, 8=left.
This is to support components being clipped to their logical owner, such as a grid row editor when the
row being edited scrolls out of sight. The editor should be clipped at the edge of the scrolling element.
This function converts a legacy alignment string such as 't-b' into a
pair of edge, offset objects which describe the alignment points of
the two regions.
So tl-br becomes {myEdge:'t', offset:0}, {otherEdge:'b', offset:100}
This not only allows more flexibility in the alignment possibilities,
but it also resolves any ambiguity as to chich two edges are desired
to be adjacent if an anchor pointer is required.
This method is called to cleanup an object and its resources. After calling
this method, the object should not be used any further in any way, including
access to its methods and properties.
To prevent potential memory leaks, all object references will be nulled
at the end of destruction sequence, unless clearPropertiesOnDestroy
is set to false.
Destroys member properties by name.
If a property name is the name of a config, the getter is not invoked, so
if the config has not been initialized, nothing will be done.
The property will be destroyed, and the corrected name (if the property is a config
and config names are prefixed) will set to null in this object's dictionary.
args :
String...
One or more names of the properties to destroy and remove from the object.
Gets the x,y coordinates to align this element with another element. See
alignTo for more info on the supported position values.
alignToEl :
Ext.util.Positionable/HTMLElement/String
The Positionable,
HTMLElement, or id of the element to align to.
position :
String
(optional)
Defaults to: "tl-bl?"
offsets :
Number[]
(optional)
Offset the positioning by [x, y]
:
Number[]
Gets the x,y coordinates of an element specified by the anchor position on the
element.
anchor :
String
(optional)
The specified anchor position.
See alignTo for details on supported anchor positions.
Defaults to: 'tl'
local :
Boolean
(optional)
True to get the local (element top/left-relative) anchor
position instead of page coordinates
size :
Object
(optional)
An object containing the size to use for calculating anchor
position {width: (target width), height: (target height)} (defaults to the
element's current size)
:
Number[]
[x, y] An array containing the element's x and y coordinates
Gets the x,y coordinates specified by the anchor position on the element.
anchor :
String
(optional)
The specified anchor position.
See alignTo for details on supported anchor positions.
Defaults to: 'tl'
local :
Boolean
(optional)
True to get the local (element top/left-relative) anchor
position instead of page coordinates
size :
Object
(optional)
An object containing the size to use for calculating anchor
position {width: (target width), height: (target height)} (defaults to the
element's current size)
:
Number[]
[x, y] An array containing the element's x and y coordinates
Returns the size of the element's borders and padding.
:
Object
an object with the following numeric properties
- beforeX
- afterX
- beforeY
- afterY
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.
contentBox :
Boolean
(optional)
If true a box for the content of the element is
returned.
local :
Boolean
(optional)
If true the element's left and top relative to its
offsetParent are returned instead of page x/y.
:
Object
x :
Number
The element's X position.
y :
Number
The element's Y position.
bottom :
Number
The element's lower bound.
right :
Number
The 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. The result may also be used for
setXY
Returns a region object that defines the client area of this element.
That is, the area within any scrollbars.
:
Ext.util.Region
A Region containing "top, left, bottom, right" properties.
Returns a specified config property value. If the name parameter is not passed,
all current configuration options will be returned as key value pairs.
name :
String
(optional)
The name of the config property to get.
peek :
Boolean
(optional)
true to peek at the raw value without calling the getter.
Defaults to: false
ifInitialized :
Boolean
(optional)
true to only return the initialized property value,
not the raw config value, and not to trigger initialization. Returns undefined if the
property has not yet been initialized.
Defaults to: false
:
Object
The config property value.
Returns the content region of this element for purposes of constraining or clipping floating
children. That is the region within the borders and scrollbars, but not within the padding.
:
Ext.util.Region
A Region containing "top, left, bottom, right" properties.
Returns the [X, Y] vector by which this Positionable's element must be translated to make a best
attempt to constrain within the passed constraint. Returns false if the element
does not need to be moved.
Priority is given to constraining the top and left within the constraint.
The constraint may either be an existing element into which the element is to be
constrained, or a Ext.util.Region into which this element is to be
constrained.
By default, any extra shadow around the element is not included in the constrain calculations - the edges
of the element are used as the element bounds. To constrain the shadow within the constrain region, set the
constrainShadow property on this element to true.
constrainTo :
Ext.util.Positionable/HTMLElement/String/Ext.util.Region
(optional)
The
Positionable, HTMLElement, element id, or Region into which the element is to be
constrained.
proposedPosition :
Number[]
(optional)
A proposed [X, Y] position to test for validity
and to produce a vector for instead of using the element's current position
proposedSize :
Number[]
(optional)
A proposed [width, height] size to constrain
instead of using the element's current size
:
Number[]/Boolean
If the element needs to be translated, an [X, Y]
vector by which this element must be translated. Otherwise, false.
Returns the initial configuration passed to the constructor when
instantiating this class.
Given this example Ext.button.Button definition and instance:
Ext.define('MyApp.view.Button', {
extend: 'Ext.button.Button',
xtype: 'mybutton',
scale: 'large',
enableToggle: true
});
var btn = Ext.create({
xtype: 'mybutton',
renderTo: Ext.getBody(),
text: 'Test Button'
});
Calling btn.getInitialConfig() would return an object including the config
options passed to the create method:
xtype: 'mybutton',
renderTo: // The document body itself
text: 'Test Button'
Calling btn.getInitialConfig('text')returns 'Test Button'.
name :
String
(optional)
Name of the config option to return.
:
Object/Mixed
The full config object or a single config value
when name parameter specified.
Returns the x coordinate of this element reletive to its offsetParent.
:
Number
Returns the x and y coordinates of this element relative to its offsetParent.
:
Number[]
The local XY position of the element
Returns the y coordinate of this element reletive to its offsetParent.
:
Number
Returns the offsets of this element from the passed element. The element must both
be part of the DOM tree and not have display:none to have page coordinates.
offsetsTo :
Ext.util.Positionable/HTMLElement/String
The Positionable,
HTMLElement, or element id to get get the offsets from.
:
Number[]
The XY page offsets (e.g. [100, -200])
Returns a region object that defines the area of this element.
contentBox :
Boolean
(optional)
If true a box for the content of the element is
returned.
local :
Boolean
(optional)
If true the element's left and top relative to its
offsetParent are returned instead of page x/y.
:
Ext.util.Region
A Region containing "top, left, bottom, right" properties.
Returns the content region of this element. That is the region within the borders
and padding.
:
Ext.util.Region
A Region containing "top, left, bottom, right" member data.
Gets the current X position of the DOM element based on page coordinates.
:
Number
The X position of the element
Gets the current position of the DOM element based on page coordinates.
:
Number[]
The XY position of the element
Gets the current Y position of the DOM element based on page coordinates.
:
Number
The Y position of the element
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'
:
Ext.Base
Adds a "destroyable" object to an internal list of objects that will be destroyed
when this instance is destroyed (via destroy).
:
Object
Move the element relative to its current position.
direction :
String
Possible values are:
"l" (or "left")"r" (or "right")"t" (or "top", or "up")"b" (or "bottom", or "down")
distance :
Number
How far to move the element in pixels
Move the element relative to its current position.
direction :
String
Possible values are:
"l" (or "left")"r" (or "right")"t" (or "top", or "up")"b" (or "bottom", or "down")
distance :
Number
How far to move the element in pixels
animate :
Boolean/Object
(optional)
true for the default animation or a standard
Element animation config object
Remove any anchor to this element. See anchorTo.
:
Ext.util.Positionable
Converts local coordinates into page-level coordinates
xy :
Number[]
The local x and y coordinates
:
Number[]
The translated coordinates
Sets the element's box.
box :
Object
The box to fill {x, y, width, height}
:
Ext.util.Positionable
Sets the element's box. If animate is true then x, y, width, and height will be
animated concurrently.
box :
Object
The box to fill {x, y, width, height}
animate :
Boolean/Object
(optional)
true for the default animation or a standard
Element animation config object
:
Ext.util.Positionable
Sets a single/multiple configuration options.
name :
String/Object
The name of the property to set, or a set of key value pairs to set.
value :
Object
(optional)
The value to set for the name parameter.
:
Ext.Base
Sets the local x coordinate of this element using CSS style. When used on an
absolute positioned element this method is symmetrical with getLocalX, but
may not be symmetrical when used on a relatively positioned element.
x :
Number
The x coordinate. A value of null sets the left style to 'auto'.
:
Ext.util.Positionable
Sets the local x and y coordinates of this element using CSS style. When used on an
absolute positioned element this method is symmetrical with getLocalXY, but
may not be symmetrical when used on a relatively positioned element.
x :
Number/Array
The x coordinate or an array containing [x, y]. A value of
null sets the left style to 'auto'
y :
Number
(optional)
The y coordinate, required if x is not an array. A value of
null sets the top style to 'auto'
:
Ext.util.Positionable
Sets the local y coordinate of this element using CSS style. When used on an
absolute positioned element this method is symmetrical with getLocalY, but
may not be symmetrical when used on a relatively positioned element.
y :
Number
The y coordinate. A value of null sets the top style to 'auto'.
:
Ext.util.Positionable
Sets the X position of the DOM element based on page coordinates.
:
Ext.util.Positionable
Sets the X position of the DOM element based on page coordinates.
animate :
Boolean/Object
(optional)
True for the default animation, or a standard
Element animation config object
:
Ext.util.Positionable
Sets the position of the DOM element in page coordinates.
pos :
Number[]
Contains X & Y [x, y] values for new position (coordinates
are page-based)
:
Ext.util.Positionable
Sets the position of the DOM element in page coordinates.
pos :
Number[]
Contains X & Y [x, y] values for new position (coordinates
are page-based)
animate :
Boolean/Object
(optional)
True for the default animation, or a standard
Element animation config object
:
Ext.util.Positionable
Sets the Y position of the DOM element based on page coordinates.
:
Ext.util.Positionable
Sets the Y position of the DOM element based on page coordinates.
animate :
Boolean/Object
(optional)
True for the default animation, or a standard
Element animation config object
:
Ext.util.Positionable
Get the reference to the class from which this object was instantiated. Note that unlike Ext.Base#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
:
Ext.Class
Translates the passed page coordinates into left/top css values for the element
x :
Number/Array
The page x or an array containing [x, y]
y :
Number
(optional)
The page y, required if x is not an array
:
Object
An object with left and top properties. e.g.
{left: (value), top: (value)}
Translates the passed page coordinates into x and y css values for the element
x :
Number/Array
The page x or an array containing [x, y]
y :
Number
(optional)
The page y, required if x is not an array
:
Object
An object with x and y properties. e.g.
{x: (value), y: (value)}
Destroys a given set of linked objects. This is only needed if
the linked object is being destroyed before this instance.
names :
String[]
The names of the linked objects to destroy.
:
Ext.Base
Static Methods
Adds new config properties to this class. This is called for classes when they
are declared, then for any mixins that class may define and finally for any
overrides defined that target the class.
mixinClass :
Ext.Class
(optional)
The mixin class if the configs are from a mixin.
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();
members :
Object
The members to add to this class.
isStatic :
Boolean
(optional)
Pass true if the members are static.
Defaults to: false
privacy :
Boolean
(optional)
Pass true if the members are private. This
only has meaning in debug mode and only for methods.
Defaults to: false
:
Add / override static properties of this class.
Ext.define('My.cool.Class', {
...
});
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() { ... };
});
:
Ext.Base
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 '$$$$$$$'
fromClass :
Ext.Base
The class to borrow members from
members :
Array/String
The names of the members to borrow
:
Ext.Base
Create a new instance of this Class.
Ext.define('My.cool.Class', {
...
});
My.cool.Class.create({
someConfig: true
});
All parameters are passed to the constructor of the class.
:
Object
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()
alias :
String/Object
The new method name, or an object to set multiple aliases. See
flexSetter
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'
:
String
Used internally by the mixins pre-processor
:
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!");
this.callParent(arguments);
alert("Meeeeoooowwww");
}
});
var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
// alerts "I'm a cat!"
// alerts "Meeeeoooowwww"
Direct use of this method should be rare. Use Ext.define
instead:
Ext.define('My.CatOverride', {
override: 'My.Cat',
constructor: function() {
alert("I'm going to be a cat!");
this.callParent(arguments);
alert("Meeeeoooowwww");
}
});
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).
members :
Object
The properties to add to this class. This should be
specified as an object literal containing one or more properties.
:
Ext.Base
Ext JS | Terms of Use
