Ext.util.Animate
Hierarchy
Ext.BaseExt.util.AnimateMixed into
Uses
Files
This animation class is a mixin.
Ext.util.Animate provides an API for the creation of animated transitions of properties and styles.
This class is used as a mixin and currently applied to Ext.Element, Ext.CompositeElement,
Ext.draw.Sprite, Ext.draw.CompositeSprite, and Ext.Component. Note that Components
have a limited subset of what attributes can be animated such as top, left, x, y, height, width, and
opacity (color, paddings, and margins can not be animated).
Animation Basics
All animations require three things - easing, duration, and to (the final end value for each property)
you wish to animate. Easing and duration are defaulted values specified below.
Easing describes how the intermediate values used during a transition will be calculated.
Easing allows for a transition to change speed over its duration.
You may use the defaults for easing and duration, but you must always set a
to property which is the end value for all animations.
Popular element 'to' configurations are:
- opacity
- x
- y
- color
- height
- width
Popular sprite 'to' configurations are:
- translation
- path
- scale
- stroke
- rotation
The default duration for animations is 250 (which is a 1/4 of a second). Duration is denoted in milliseconds. Therefore 1 second is 1000, 1 minute would be 60000, and so on. The default easing curve used for all animations is 'ease'. Popular easing functions are included and can be found in Easing.
For example, a simple animation to fade out an element with a default easing and duration:
var p1 = Ext.get('myElementId');
p1.animate({
to: {
opacity: 0
}
});
To make this animation fade out in a tenth of a second:
var p1 = Ext.get('myElementId');
p1.animate({
duration: 100,
to: {
opacity: 0
}
});
Animation Queues
By default all animations are added to a queue which allows for animation via a chain-style API. For example, the following code will queue 4 animations which occur sequentially (one right after the other):
p1.animate({
to: {
x: 500
}
}).animate({
to: {
y: 150
}
}).animate({
to: {
backgroundColor: '#f00' //red
}
}).animate({
to: {
opacity: 0
}
});
You can change this behavior by calling the syncFx method and all subsequent animations for the specified target will be run concurrently (at the same time).
p1.syncFx(); //this will make all animations run at the same time
p1.animate({
to: {
x: 500
}
}).animate({
to: {
y: 150
}
}).animate({
to: {
backgroundColor: '#f00' //red
}
}).animate({
to: {
opacity: 0
}
});
This works the same as:
p1.animate({
to: {
x: 500,
y: 150,
backgroundColor: '#f00' //red
opacity: 0
}
});
The stopAnimation method can be used to stop any currently running animations and clear any queued animations.
Animation Keyframes
You can also set up complex animations with keyframes which follow the CSS3 Animation configuration pattern. Note rotation, translation, and scaling can only be done for sprites. The previous example can be written with the following syntax:
p1.animate({
duration: 1000, //one second total
keyframes: {
25: { //from 0 to 250ms (25%)
x: 0
},
50: { //from 250ms to 500ms (50%)
y: 0
},
75: { //from 500ms to 750ms (75%)
backgroundColor: '#f00' //red
},
100: { //from 750ms to 1sec
opacity: 0
}
}
});
Animation Events
Each animation you create has events for beforeanimate,
afteranimate, and lastframe.
Keyframed animations adds an additional keyframe event which
fires for each keyframe in your animation.
All animations support the listeners configuration to attact functions to these events.
startAnimate: function() {
var p1 = Ext.get('myElementId');
p1.animate({
duration: 100,
to: {
opacity: 0
},
listeners: {
beforeanimate: function() {
// Execute my custom method before the animation
this.myBeforeAnimateFn();
},
afteranimate: function() {
// Execute my custom method after the animation
this.myAfterAnimateFn();
},
scope: this
});
},
myBeforeAnimateFn: function() {
// My custom logic
},
myAfterAnimateFn: function() {
// My custom logic
}
Due to the fact that animations run asynchronously, you can determine if an animation is currently running on any target by using the getActiveAnimation method. This method will return false if there are no active animations or return the currently running Ext.fx.Anim instance.
In this example, we're going to wait for the current animation to finish, then stop any other queued animations before we fade our element's opacity to 0:
var curAnim = p1.getActiveAnimation();
if (curAnim) {
curAnim.on('afteranimate', function() {
p1.stopAnimation();
p1.animate({
to: {
opacity: 0
}
});
});
}
Available since: 4.0.0
Properties
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'
return 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'
Available since: 4.0.0
Methods
Instance Methods Perform custom animation on this object. ...Perform custom animation on this object.
This method is applicable to both the Component class and the Element class.
It performs animated transitions of certain properties of this object over a specified timeline.
The sole parameter is an object which specifies start property values, end property values, and properties which
describe the timeline. Of the properties listed below, only to is mandatory.
Properties include
from An object which specifies start values for the properties being animated.
If not supplied, properties are animated from current settings. The actual properties which may be animated depend upon
ths object being animated. See the sections below on Element and Component animation.
to An object which specifies end values for the properties being animated.
durationThe duration in milliseconds for which the animation will run.
easing A string value describing an easing type to modify the rate of change from the default linear to non-linear. Values may be one of:
- ease
- easeIn
- easeOut
- easeInOut
- backIn
- backOut
- elasticIn
- elasticOut
- bounceIn
- bounceOut
keyframes This is an object which describes the state of animated properties at certain points along the timeline.
it is an object containing properties who's names are the percentage along the timeline being described and who's values specify the animation state at that point.
listeners This is a standard listeners configuration object which may be used
to inject behaviour at either the beforeanimate event or the afteranimate event.
Animating an Element
When animating an Element, the following properties may be specified in from, to, and keyframe objects:
x The page X position in pixels.
y The page Y position in pixels
left The element's CSS left value. Units must be supplied.
top The element's CSS top value. Units must be supplied.
width The element's CSS width value. Units must be supplied.
height The element's CSS height value. Units must be supplied.
scrollLeft The element's scrollLeft value.
scrollTop The element's scrollLeft value.
opacity The element's opacity value. This must be a value between 0 and 1.
Be aware than animating an Element which is being used by an Ext Component without in some way informing the Component about the changed element state
will result in incorrect Component behaviour. This is because the Component will be using the old state of the element. To avoid this problem, it is now possible to
directly animate certain properties of Components.
Animating a Component
When animating an Element, the following properties may be specified in from, to, and keyframe objects:
x The Component's page X position in pixels.
y The Component's page Y position in pixels
left The Component's left value in pixels.
top The Component's top value in pixels.
width The Component's width value in pixels.
width The Component's width value in pixels.
dynamic Specify as true to update the Component's layout (if it is a Container) at every frame
of the animation. Use sparingly as laying out on every intermediate size change is an expensive operation.
For example, to animate a Window to a new size, ensuring that its internal layout, and any shadow is correct:
myWindow = Ext.create('Ext.window.Window', {
title: 'Test Component animation',
width: 500,
height: 300,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
title: 'Left: 33%',
margins: '5 0 5 5',
flex: 1
}, {
title: 'Left: 66%',
margins: '5 5 5 5',
flex: 2
}]
});
myWindow.show();
myWindow.header.el.on('click', function() {
myWindow.animate({
to: {
width: (myWindow.getWidth() == 500) ? 700 : 500,
height: (myWindow.getHeight() == 300) ? 400 : 300,
}
});
});
For performance reasons, by default, the internal layout is only updated when the Window reaches its final "to" size. If dynamic updating of the Window's child
Components is required, then configure the animation with dynamic: true and the two child items will maintain their proportions during the animation.
Available since: 4.0.0
Parameters
- config : Object
An object containing properties which describe the animation's start and end states, and the timeline of the animation.
Returns
- Object
this
Call the original method that was previously overridden with override
Ext.define('My.Cat', {
constructor: functi...Call the original method that was previously overridden with override
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
return this;
}
});
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"
Available since: 4.0.0
Parameters
- args : Array/Arguments
The arguments, either an array or the arguments object
Returns
- Object
Returns the result after calling the overridden method
Call the parent's overridden method. ...Call the parent's overridden method. For example:
Ext.define('My.own.A', {
constructor: function(test) {
alert(test);
}
});
Ext.define('My.own.B', {
extend: 'My.own.A',
constructor: function(test) {
alert(test);
this.callParent([test + 1]);
}
});
Ext.define('My.own.C', {
extend: 'My.own.B',
constructor: function() {
alert("Going to call parent's overriden constructor...");
this.callParent(arguments);
}
});
var a = new My.own.A(1); // alerts '1'
var b = new My.own.B(1); // alerts '1', then alerts '2'
var c = new My.own.C(2); // alerts "Going to call parent's overriden constructor..."
// alerts '2', then alerts '3'
Available since: 4.0.0
Parameters
- args : Array/Arguments
The arguments, either an array or the arguments object
from the current method, for example: this.callParent(arguments)
Returns
- Object
Returns the result from the superclass' method
Returns the current animation if this object has any effects actively running or queued, else returns false. ...Returns the current animation if this object has any effects actively running or queued, else returns false.
Available since: 4.0.0
Returns
- Ext.fx.Anim/Boolean
Anim if element has active effects, else false
Returns the current animation if this object has any effects actively running or queued, else returns false. ...Returns the current animation if this object has any effects actively running or queued, else returns false.
This method has been deprecated since 4.0
Replaced by getActiveAnimation
Available since: 4.0.0
Returns
- Ext.fx.Anim/Boolean
Anim if element has active effects, else false
Initialize configuration for this class. ...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);
return this;
}
});
var awesome = new My.awesome.Class({
name: 'Super Awesome'
});
alert(awesome.getName()); // 'Super Awesome'
Available since: 4.0.0
Parameters
- config : Object
Returns
- Object
mixins The mixin prototypes as key - value pairs
mixin( name, cls )private sequenceFx( ) : Objectchainable Get the reference to the class from which this object was instantiated. ...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++;
return this;
},
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
Available since: 4.0.0
Returns
stopAnimation( ) : Ext.ElementchainableStops any running effects and clears this object's internal effects queue if it contains
any additional effects that ...Stops any running effects and clears this object's internal effects queue if it contains
any additional effects that haven't started yet.
Available since: 4.0.0
Returns
- Ext.Element
The Element
stopFx( ) : Ext.Elementdeprecated ...
This method has been deprecated
4.0 Replaced by stopAnimation
Stops any running effects and clears this object's internal effects queue if it contains
any additional effects that haven't started yet.
Available since: 4.0.0
Returns
- Ext.Element
The Element
Ensures that all effects queued after syncFx is called on this object are
run concurrently. ...Ensures that all effects queued after syncFx is called on this object are
run concurrently. This is the opposite of sequenceFx.
Available since: 4.0.0
Returns
- Object
this
Perform custom animation on this object.
This method is applicable to both the Component class and the Element class. It performs animated transitions of certain properties of this object over a specified timeline.
The sole parameter is an object which specifies start property values, end property values, and properties which
describe the timeline. Of the properties listed below, only to is mandatory.
Properties include
fromAn object which specifies start values for the properties being animated. If not supplied, properties are animated from current settings. The actual properties which may be animated depend upon ths object being animated. See the sections below on Element and Component animation.toAn object which specifies end values for the properties being animated.durationThe duration in milliseconds for which the animation will run.easingA string value describing an easing type to modify the rate of change from the default linear to non-linear. Values may be one of:- ease
- easeIn
- easeOut
- easeInOut
- backIn
- backOut
- elasticIn
- elasticOut
- bounceIn
- bounceOut
keyframesThis is an object which describes the state of animated properties at certain points along the timeline. it is an object containing properties who's names are the percentage along the timeline being described and who's values specify the animation state at that point.listenersThis is a standard listeners configuration object which may be used to inject behaviour at either thebeforeanimateevent or theafteranimateevent.
Animating an Element
When animating an Element, the following properties may be specified infrom, to, and keyframe objects:xThe page X position in pixels.yThe page Y position in pixelsleftThe element's CSSleftvalue. Units must be supplied.topThe element's CSStopvalue. Units must be supplied.widthThe element's CSSwidthvalue. Units must be supplied.heightThe element's CSSheightvalue. Units must be supplied.scrollLeftThe element'sscrollLeftvalue.scrollTopThe element'sscrollLeftvalue.opacityThe element'sopacityvalue. This must be a value between0and1.
Be aware than animating an Element which is being used by an Ext Component without in some way informing the Component about the changed element state will result in incorrect Component behaviour. This is because the Component will be using the old state of the element. To avoid this problem, it is now possible to directly animate certain properties of Components.
Animating a Component
When animating an Element, the following properties may be specified infrom, to, and keyframe objects:xThe Component's page X position in pixels.yThe Component's page Y position in pixelsleftThe Component'sleftvalue in pixels.topThe Component'stopvalue in pixels.widthThe Component'swidthvalue in pixels.widthThe Component'swidthvalue in pixels.dynamicSpecify as true to update the Component's layout (if it is a Container) at every frame of the animation. Use sparingly as laying out on every intermediate size change is an expensive operation.
For example, to animate a Window to a new size, ensuring that its internal layout, and any shadow is correct:
myWindow = Ext.create('Ext.window.Window', {
title: 'Test Component animation',
width: 500,
height: 300,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
title: 'Left: 33%',
margins: '5 0 5 5',
flex: 1
}, {
title: 'Left: 66%',
margins: '5 5 5 5',
flex: 2
}]
});
myWindow.show();
myWindow.header.el.on('click', function() {
myWindow.animate({
to: {
width: (myWindow.getWidth() == 500) ? 700 : 500,
height: (myWindow.getHeight() == 300) ? 400 : 300,
}
});
});
For performance reasons, by default, the internal layout is only updated when the Window reaches its final "to" size. If dynamic updating of the Window's child
Components is required, then configure the animation with dynamic: true and the two child items will maintain their proportions during the animation.
Available since: 4.0.0
Parameters
- config : Object
An object containing properties which describe the animation's start and end states, and the timeline of the animation.
Returns
- Object
this
Call the original method that was previously overridden with override
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
return this;
}
});
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"
Available since: 4.0.0
Parameters
- args : Array/Arguments
The arguments, either an array or the
argumentsobject
Returns
- Object
Returns the result after calling the overridden method
Call the parent's overridden method. For example:
Ext.define('My.own.A', {
constructor: function(test) {
alert(test);
}
});
Ext.define('My.own.B', {
extend: 'My.own.A',
constructor: function(test) {
alert(test);
this.callParent([test + 1]);
}
});
Ext.define('My.own.C', {
extend: 'My.own.B',
constructor: function() {
alert("Going to call parent's overriden constructor...");
this.callParent(arguments);
}
});
var a = new My.own.A(1); // alerts '1'
var b = new My.own.B(1); // alerts '1', then alerts '2'
var c = new My.own.C(2); // alerts "Going to call parent's overriden constructor..."
// alerts '2', then alerts '3'
Available since: 4.0.0
Parameters
- args : Array/Arguments
The arguments, either an array or the
argumentsobject from the current method, for example:this.callParent(arguments)
Returns
- Object
Returns the result from the superclass' method
Returns the current animation if this object has any effects actively running or queued, else returns false.
Available since: 4.0.0
Returns
- Ext.fx.Anim/Boolean
Anim if element has active effects, else false
Returns the current animation if this object has any effects actively running or queued, else returns false.
This method has been deprecated since 4.0
Replaced by getActiveAnimation
Available since: 4.0.0
Returns
- Ext.fx.Anim/Boolean
Anim if element has active effects, else false
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);
return this;
}
});
var awesome = new My.awesome.Class({
name: 'Super Awesome'
});
alert(awesome.getName()); // 'Super Awesome'
Available since: 4.0.0
Parameters
- config : Object
Returns
- Object
mixins The mixin prototypes as key - value pairs
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++;
return this;
},
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
Available since: 4.0.0
Returns
Stops any running effects and clears this object's internal effects queue if it contains any additional effects that haven't started yet.
Available since: 4.0.0
Returns
- Ext.Element
The Element
This method has been deprecated
4.0 Replaced by stopAnimation Stops any running effects and clears this object's internal effects queue if it contains any additional effects that haven't started yet.
Available since: 4.0.0
Returns
- Ext.Element
The Element
Ensures that all effects queued after syncFx is called on this object are run concurrently. This is the opposite of sequenceFx.
Available since: 4.0.0
Returns
- Object
this
Static Methods Add / override static properties of this class. ...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() { ... };
});
Available since: 4.0.2
Parameters
- members : Object
Returns
- Ext.Base
this
Borrow another class' members to the prototype of this class. ...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 '$$$$$$$'
Available since: 4.0.2
Parameters
- fromClass : Ext.Base
The class to borrow members from
- members : String/String[]
The names of the members to borrow
Returns
- Ext.Base
this
Create a new instance of this Class. ...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.
Available since: 4.0.2
Returns
- Object
the created instance.
createAlias( alias, origin )staticCreate aliases for existing prototype methods. ...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()
Available since: 4.0.2
Parameters
- alias : String/Object
The new method name, or an object to set multiple aliases. See
flexSetter
- origin : String/Object
The original method name
Get the current class' name in string format. ...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'
Available since: 4.0.4
Returns
- String
className
implement( members )staticAdd methods / properties to the prototype of this class. ...Add methods / properties to the prototype of this class.
Ext.define('My.awesome.Cat', {
constructor: function() {
...
}
});
My.awesome.Cat.implement({
meow: function() {
alert('Meowww...');
}
});
var kitty = new My.awesome.Cat;
kitty.meow();
Available since: 4.0.2
Parameters
- members : Object
Override prototype members of this class. ...Override prototype members of this class. Overridden methods can be invoked via
callOverridden
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
return this;
}
});
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"
Available since: 4.0.2
Parameters
- members : Object
Returns
- Ext.Base
this
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() { ... };
});
Available since: 4.0.2
Parameters
- members : Object
Returns
- Ext.Base
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 '$$$$$$$'
Available since: 4.0.2
Parameters
- fromClass : Ext.Base
The class to borrow members from
- members : String/String[]
The names of the members to borrow
Returns
- Ext.Base
this
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.
Available since: 4.0.2
Returns
- Object
the created instance.
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()
Available since: 4.0.2
Parameters
- alias : String/Object
The new method name, or an object to set multiple aliases. See flexSetter
- origin : String/Object
The original method name
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'
Available since: 4.0.4
Returns
- String
className
Add methods / properties to the prototype of this class.
Ext.define('My.awesome.Cat', {
constructor: function() {
...
}
});
My.awesome.Cat.implement({
meow: function() {
alert('Meowww...');
}
});
var kitty = new My.awesome.Cat;
kitty.meow();
Available since: 4.0.2
Parameters
- members : Object
Override prototype members of this class. Overridden methods can be invoked via callOverridden
Ext.define('My.Cat', {
constructor: function() {
alert("I'm a cat!");
return this;
}
});
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"
Available since: 4.0.2
Parameters
- members : Object
Returns
- Ext.Base
this