Properties Methods Events Config Options Direct Link

Class Ext.Fx

Package:Ext
Defined In:Fx.js
Class:Fx
Extends:Object

A class to provide basic animation and visual effects support. Note: This class is automatically applied to the Ext.Element interface when included, so all effects calls should be performed via Ext.Element. Conversely, since the effects are not actually defined in Ext.Element, Ext.Fx must be included in order for the Element effects to work.


Method Chaining

It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that they return the Element object itself as the method return value, it is not always possible to mix the two in a single method chain. The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced. Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately. For this reason, while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the expected results and should be done with care. Also see callback.


Anchor Options for Motion Effects

Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element that will serve as either the start or end point of the animation. Following are all of the supported 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
r      The center of the right edge
bl     The bottom left corner
b      The center of the bottom edge
br     The bottom right corner
Note: some Fx methods accept specific custom config parameters. The options shown in the Config Options section below are common options that can be passed to any Fx method unless otherwise noted.

Config Options

Config OptionsDefined By
 afterCls : String
A css class to apply after the effect
Fx
 block : Boolean
Whether the effect should block other effects from queueing while it runs
Fx
 duration : Number
The length of time (in seconds) that the effect should last
Fx
 endOpacity : Number
Only applicable for fadeIn or fadeOut, a number between 0 and 1 inclusive to configure the ending opacity value.
Fx
 remove : Boolean
Whether the Element should be removed from the DOM and destroyed after the effect finishes
Fx
 scope : Object
The scope of the callback function
Fx

Public Properties

This class has no public properties.

Public Methods

MethodDefined By

Public Events

This class has no public events.