3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
10 UNDEFINED = undefined,
24 ABSOLUTE = "absolute",
27 POSITION = "position",
30 * Use a light flyweight here since we are using so many callbacks and are always assured a DOM element
32 flyEl = new Ext.Element.Flyweight(),
34 getObject = function(o){
39 flyEl.id = Ext.id(dom);
43 * Queueing now stored outside of the element due to closure issues
45 getQueue = function(id){
51 setQueue = function(id, value){
55 //Notifies Element that fx methods are available
60 * <p>A class to provide basic animation and visual effects support. <b>Note:</b> This class is automatically applied
61 * to the {@link Ext.Element} interface when included, so all effects calls should be performed via {@link Ext.Element}.
62 * Conversely, since the effects are not actually defined in {@link Ext.Element}, Ext.Fx <b>must</b> be
63 * {@link Ext#enableFx included} in order for the Element effects to work.</p><br/>
65 * <p><b><u>Method Chaining</u></b></p>
66 * <p>It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that
67 * they return the Element object itself as the method return value, it is not always possible to mix the two in a single
68 * method chain. The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.
69 * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately. For this reason,
70 * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the
71 * expected results and should be done with care. Also see <tt>{@link #callback}</tt>.</p><br/>
73 * <p><b><u>Anchor Options for Motion Effects</u></b></p>
74 * <p>Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element
75 * that will serve as either the start or end point of the animation. Following are all of the supported anchor positions:</p>
78 ----- -----------------------------
79 tl The top left corner
80 t The center of the top edge
81 tr The top right corner
82 l The center of the left edge
83 r The center of the right edge
84 bl The bottom left corner
85 b The center of the bottom edge
86 br The bottom right corner
88 * <b>Note</b>: some Fx methods accept specific custom config parameters. The options shown in the Config Options
89 * section below are common options that can be passed to any Fx method unless otherwise noted.</b>
91 * @cfg {Function} callback A function called when the effect is finished. Note that effects are queued internally by the
92 * Fx class, so a callback is not required to specify another effect -- effects can simply be chained together
93 * and called in sequence (see note for <b><u>Method Chaining</u></b> above), for example:<pre><code>
94 * el.slideIn().highlight();
96 * The callback is intended for any additional code that should run once a particular effect has completed. The Element
97 * being operated upon is passed as the first parameter.
99 * @cfg {Object} scope The scope (<code>this</code> reference) in which the <tt>{@link #callback}</tt> function is executed. Defaults to the browser window.
101 * @cfg {String} easing A valid Ext.lib.Easing value for the effect:</p><div class="mdetail-params"><ul>
102 * <li><b><tt>backBoth</tt></b></li>
103 * <li><b><tt>backIn</tt></b></li>
104 * <li><b><tt>backOut</tt></b></li>
105 * <li><b><tt>bounceBoth</tt></b></li>
106 * <li><b><tt>bounceIn</tt></b></li>
107 * <li><b><tt>bounceOut</tt></b></li>
108 * <li><b><tt>easeBoth</tt></b></li>
109 * <li><b><tt>easeBothStrong</tt></b></li>
110 * <li><b><tt>easeIn</tt></b></li>
111 * <li><b><tt>easeInStrong</tt></b></li>
112 * <li><b><tt>easeNone</tt></b></li>
113 * <li><b><tt>easeOut</tt></b></li>
114 * <li><b><tt>easeOutStrong</tt></b></li>
115 * <li><b><tt>elasticBoth</tt></b></li>
116 * <li><b><tt>elasticIn</tt></b></li>
117 * <li><b><tt>elasticOut</tt></b></li>
120 * @cfg {String} afterCls A css class to apply after the effect
121 * @cfg {Number} duration The length of time (in seconds) that the effect should last
123 * @cfg {Number} endOpacity Only applicable for {@link #fadeIn} or {@link #fadeOut}, a number between
124 * <tt>0</tt> and <tt>1</tt> inclusive to configure the ending opacity value.
126 * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes
127 * @cfg {Boolean} useDisplay Whether to use the <i>display</i> CSS property instead of <i>visibility</i> when hiding Elements (only applies to
128 * effects that end with the element being visually hidden, ignored otherwise)
129 * @cfg {String/Object/Function} afterStyle A style specification string, e.g. <tt>"width:100px"</tt>, or an object
130 * in the form <tt>{width:"100px"}</tt>, or a function which returns such a specification that will be applied to the
131 * Element after the effect finishes.
132 * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs
133 * @cfg {Boolean} concurrent Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they run in sequence
134 * @cfg {Boolean} stopFx Whether preceding effects should be stopped and removed before running current effect (only applies to non blocking effects)
138 // private - calls the function taking arguments from the argHash based on the key. Returns the return value of the function.
139 // this is useful for replacing switch statements (for example).
140 switchStatements : function(key, fn, argHash){
141 return fn.apply(this, argHash[key]);
145 * Slides the element into view. An anchor point can be optionally passed to set the point of
146 * origin for the slide effect. This function automatically handles wrapping the element with
147 * a fixed-size container if needed. See the Fx class overview for valid anchor point options.
150 // default: slide the element in from the top
153 // custom: slide the element in from the right with a 2-second duration
154 el.slideIn('r', { duration: 2 });
156 // common config options shown with default values
162 * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
163 * @param {Object} options (optional) Object literal with any of the Fx config options
164 * @return {Ext.Element} The Element
166 slideIn : function(anchor, o){
182 anchor = anchor || "t";
184 me.queueFx(o, function(){
185 xy = fly(dom).getXY();
186 // fix display to visibility
187 fly(dom).fixDisplay();
189 // restore values after effect
190 r = fly(dom).getFxRestore();
191 b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};
192 b.right = b.x + b.width;
193 b.bottom = b.y + b.height;
195 // fixed size for slide
196 fly(dom).setWidth(b.width).setHeight(b.height);
199 wrap = fly(dom).fxWrap(r.pos, o, HIDDEN);
201 st.visibility = VISIBLE;
202 st.position = ABSOLUTE;
204 // clear out temp styles after slide and unwrap
206 fly(dom).fxUnwrap(wrap, r.pos, o);
208 st.height = r.height;
212 // time to calculate the positions
213 pt = {to: [b.x, b.y]};
217 function argCalc(wrap, style, ww, wh, sXY, sXYval, s1, s2, w, h, p){
219 fly(wrap).setWidth(ww).setHeight(wh);
221 fly(wrap)[sXY](sXYval);
223 style[s1] = style[s2] = "0";
236 args = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {
237 t : [wrap, st, b.width, 0, NULL, NULL, LEFT, BOTTOM, NULL, bh, NULL],
238 l : [wrap, st, 0, b.height, NULL, NULL, RIGHT, TOP, bw, NULL, NULL],
239 r : [wrap, st, b.width, b.height, SETX, b.right, LEFT, TOP, NULL, NULL, pt],
240 b : [wrap, st, b.width, b.height, SETY, b.bottom, LEFT, TOP, NULL, bh, pt],
241 tl : [wrap, st, 0, 0, NULL, NULL, RIGHT, BOTTOM, bw, bh, pt],
242 bl : [wrap, st, 0, 0, SETY, b.y + b.height, RIGHT, TOP, bw, bh, pt],
243 br : [wrap, st, 0, 0, SETXY, [b.right, b.bottom], LEFT, TOP, bw, bh, pt],
244 tr : [wrap, st, 0, 0, SETX, b.x + b.width, LEFT, BOTTOM, bw, bh, pt]
247 st.visibility = VISIBLE;
250 arguments.callee.anim = fly(wrap).fxanim(args,
261 * Slides the element out of view. An anchor point can be optionally passed to set the end point
262 * for the slide effect. When the effect is completed, the element will be hidden (visibility =
263 * 'hidden') but block elements will still take up space in the document. The element must be removed
264 * from the DOM using the 'remove' config option if desired. This function automatically handles
265 * wrapping the element with a fixed-size container if needed. See the Fx class overview for valid anchor point options.
268 // default: slide the element out to the top
271 // custom: slide the element out to the right with a 2-second duration
272 el.slideOut('r', { duration: 2 });
274 // common config options shown with default values
282 * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
283 * @param {Object} options (optional) Object literal with any of the Fx config options
284 * @return {Ext.Element} The Element
286 slideOut : function(anchor, o){
298 anchor = anchor || "t";
300 me.queueFx(o, function(){
302 // restore values after effect
303 r = fly(dom).getFxRestore();
304 b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};
305 b.right = b.x + b.width;
306 b.bottom = b.y + b.height;
308 // fixed size for slide
309 fly(dom).setWidth(b.width).setHeight(b.height);
312 wrap = fly(dom).fxWrap(r.pos, o, VISIBLE);
314 st.visibility = VISIBLE;
315 st.position = ABSOLUTE;
316 fly(wrap).setWidth(b.width).setHeight(b.height);
319 o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
320 fly(dom).fxUnwrap(wrap, r.pos, o);
322 st.height = r.height;
326 function argCalc(style, s1, s2, p1, v1, p2, v2, p3, v3){
329 style[s1] = style[s2] = "0";
341 a = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {
342 t : [st, LEFT, BOTTOM, HEIGHT, zero],
343 l : [st, RIGHT, TOP, WIDTH, zero],
344 r : [st, LEFT, TOP, WIDTH, zero, POINTS, {to : [b.right, b.y]}],
345 b : [st, LEFT, TOP, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],
346 tl : [st, RIGHT, BOTTOM, WIDTH, zero, HEIGHT, zero],
347 bl : [st, RIGHT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],
348 br : [st, LEFT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x + b.width, b.bottom]}],
349 tr : [st, LEFT, BOTTOM, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.right, b.y]}]
352 arguments.callee.anim = fly(wrap).fxanim(a,
363 * Fades the element out while slowly expanding it in all directions. When the effect is completed, the
364 * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document.
365 * The element must be removed from the DOM using the 'remove' config option if desired.
371 // common config options shown with default values
379 * @param {Object} options (optional) Object literal with any of the Fx config options
380 * @return {Ext.Element} The Element
391 me.queueFx(o, function(){
392 width = fly(dom).getWidth();
393 height = fly(dom).getHeight();
394 fly(dom).clearOpacity();
397 // restore values after effect
398 r = fly(dom).getFxRestore();
401 o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
402 fly(dom).clearOpacity();
403 fly(dom).setPositioning(r.pos);
405 st.height = r.height;
410 arguments.callee.anim = fly(dom).fxanim({
411 width : {to : fly(dom).adjustWidth(width * 2)},
412 height : {to : fly(dom).adjustHeight(height * 2)},
413 points : {by : [-width * .5, -height * .5]},
415 fontSize: {to : 200, unit: "%"}
427 * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
428 * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still
429 * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
435 // all config options shown with default values
443 * @param {Object} options (optional) Object literal with any of the Fx config options
444 * @return {Ext.Element} The Element
446 switchOff : function(o){
453 me.queueFx(o, function(){
454 fly(dom).clearOpacity();
457 // restore values after effect
458 r = fly(dom).getFxRestore();
461 o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
462 fly(dom).clearOpacity();
463 fly(dom).setPositioning(r.pos);
465 st.height = r.height;
469 fly(dom).fxanim({opacity : {to : 0.3}},
475 fly(dom).clearOpacity();
479 points : {by : [0, fly(dom).getHeight() * .5]}
493 * Highlights the Element by setting a color (applies to the background-color by default, but can be
494 * changed using the "attr" config option) and then fading back to the original color. If no original
495 * color is available, you should provide the "endColor" config option which will be cleared after the animation.
498 // default: highlight background to yellow
501 // custom: highlight foreground text to blue for 2 seconds
502 el.highlight("0000ff", { attr: 'color', duration: 2 });
504 // common config options shown with default values
505 el.highlight("ffff9c", {
506 attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
507 endColor: (current color) or "ffffff",
512 * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')
513 * @param {Object} options (optional) Object literal with any of the Fx config options
514 * @return {Ext.Element} The Element
516 highlight : function(color, o){
520 attr = o.attr || "backgroundColor",
524 me.queueFx(o, function(){
525 fly(dom).clearOpacity();
529 dom.style[attr] = restore;
532 restore = dom.style[attr];
533 a[attr] = {from: color || "ffff9c", to: o.endColor || fly(dom).getColor(attr) || "ffffff"};
534 arguments.callee.anim = fly(dom).fxanim(a,
545 * Shows a ripple of exploding, attenuating borders to draw attention to an Element.
548 // default: a single light blue ripple
551 // custom: 3 red ripples lasting 3 seconds total
552 el.frame("ff0000", 3, { duration: 3 });
554 // common config options shown with default values
555 el.frame("C3DAF9", 1, {
556 duration: 1 //duration of each individual ripple.
557 // Note: Easing is not configurable and will be ignored if included
560 * @param {String} color (optional) The color of the border. Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').
561 * @param {Number} count (optional) The number of ripples to display (defaults to 1)
562 * @param {Object} options (optional) Object literal with any of the Fx config options
563 * @return {Ext.Element} The Element
565 frame : function(color, count, o){
572 me.queueFx(o, function(){
573 color = color || '#C3DAF9';
574 if(color.length == 6){
580 var xy = fly(dom).getXY(),
581 b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight},
583 proxy = fly(document.body || document.documentElement).createChild({
586 'z-index': 35000, // yee haw
587 border : '0px solid ' + color
590 return proxy.queueFx({}, animFn);
594 arguments.callee.anim = {
603 var scale = Ext.isBorderBox ? 2 : 1;
604 active = proxy.anim({
605 top : {from : b.y, to : b.y - 20},
606 left : {from : b.x, to : b.x - 20},
607 borderWidth : {from : 0, to : 10},
608 opacity : {from : 1, to : 0},
609 height : {from : b.height, to : b.height + 20 * scale},
610 width : {from : b.width, to : b.width + 20 * scale}
612 duration: o.duration || 1,
613 callback: function() {
615 --count > 0 ? queue() : fly(dom).afterFx(o);
618 arguments.callee.anim = {
631 * Creates a pause before any subsequent queued effects begin. If there are
632 * no effects queued after the pause it will have no effect.
637 * @param {Number} seconds The length of time to pause (in seconds)
638 * @return {Ext.Element} The Element
640 pause : function(seconds){
644 this.queueFx({}, function(){
645 t = setTimeout(function(){
646 fly(dom).afterFx({});
648 arguments.callee.anim = {
652 fly(dom).afterFx({});
660 * Fade an element in (from transparent to opaque). The ending opacity can be specified
661 * using the <tt>{@link #endOpacity}</tt> config option.
664 // default: fade in from opacity 0 to 100%
667 // custom: fade in from opacity 0 to 75% over 2 seconds
668 el.fadeIn({ endOpacity: .75, duration: 2});
670 // common config options shown with default values
672 endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
677 * @param {Object} options (optional) Object literal with any of the Fx config options
678 * @return {Ext.Element} The Element
680 fadeIn : function(o){
684 to = o.endOpacity || 1;
686 me.queueFx(o, function(){
687 fly(dom).setOpacity(0);
688 fly(dom).fixDisplay();
689 dom.style.visibility = VISIBLE;
690 arguments.callee.anim = fly(dom).fxanim({opacity:{to:to}},
691 o, NULL, .5, EASEOUT, function(){
693 fly(dom).clearOpacity();
702 * Fade an element out (from opaque to transparent). The ending opacity can be specified
703 * using the <tt>{@link #endOpacity}</tt> config option. Note that IE may require
704 * <tt>{@link #useDisplay}:true</tt> in order to redisplay correctly.
707 // default: fade out from the element's current opacity to 0
710 // custom: fade out from the element's current opacity to 25% over 2 seconds
711 el.fadeOut({ endOpacity: .25, duration: 2});
713 // common config options shown with default values
715 endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
722 * @param {Object} options (optional) Object literal with any of the Fx config options
723 * @return {Ext.Element} The Element
725 fadeOut : function(o){
730 to = o.endOpacity || 0;
732 me.queueFx(o, function(){
733 arguments.callee.anim = fly(dom).fxanim({
734 opacity : {to : to}},
741 Ext.Element.data(dom, 'visibilityMode') == Ext.Element.DISPLAY || o.useDisplay ?
742 style.display = "none" :
743 style.visibility = HIDDEN;
745 fly(dom).clearOpacity();
754 * Animates the transition of an element's dimensions from a starting height/width
755 * to an ending height/width. This method is a convenience implementation of {@link shift}.
758 // change height and width to 100x100 pixels
761 // common config options shown with default values. The height and width will default to
762 // the element's existing values if passed as null.
764 [element's width],
765 [element's height], {
771 * @param {Number} width The new width (pass undefined to keep the original width)
772 * @param {Number} height The new height (pass undefined to keep the original height)
773 * @param {Object} options (optional) Object literal with any of the Fx config options
774 * @return {Ext.Element} The Element
776 scale : function(w, h, o){
777 this.shift(Ext.apply({}, o, {
785 * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
786 * Any of these properties not specified in the config object will not be changed. This effect
787 * requires that at least one new dimension, position or opacity setting must be passed in on
788 * the config object in order for the function to have any effect.
791 // slide the element horizontally to x position 200 while changing the height and opacity
792 el.shift({ x: 200, height: 50, opacity: .8 });
794 // common config options shown with default values.
796 width: [element's width],
797 height: [element's height],
798 x: [element's x position],
799 y: [element's y position],
800 opacity: [element's opacity],
805 * @param {Object} options Object literal with any of the Fx config options
806 * @return {Ext.Element} The Element
813 this.queueFx(o, function(){
814 for (var prop in o) {
815 if (o[prop] != UNDEFINED) {
816 a[prop] = {to : o[prop]};
820 a.width ? a.width.to = fly(dom).adjustWidth(o.width) : a;
821 a.height ? a.height.to = fly(dom).adjustWidth(o.height) : a;
823 if (a.x || a.y || a.xy) {
825 {to : [ a.x ? a.x.to : fly(dom).getX(),
826 a.y ? a.y.to : fly(dom).getY()]};
829 arguments.callee.anim = fly(dom).fxanim(a,
842 * Slides the element while fading it out of view. An anchor point can be optionally passed to set the
843 * ending point of the effect.
846 // default: slide the element downward while fading out
849 // custom: slide the element out to the right with a 2-second duration
850 el.ghost('r', { duration: 2 });
852 // common config options shown with default values
860 * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')
861 * @param {Object} options (optional) Object literal with any of the Fx config options
862 * @return {Ext.Element} The Element
864 ghost : function(anchor, o){
869 a = {opacity: {to: 0}, points: {}},
875 anchor = anchor || "b";
877 me.queueFx(o, function(){
878 // restore values after effect
879 r = fly(dom).getFxRestore();
880 w = fly(dom).getWidth();
881 h = fly(dom).getHeight();
884 o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
885 fly(dom).clearOpacity();
886 fly(dom).setPositioning(r.pos);
888 st.height = r.height;
892 pt.by = fly(dom).switchStatements(anchor.toLowerCase(), function(v1,v2){ return [v1, v2];}, {
903 arguments.callee.anim = fly(dom).fxanim(a,
913 * Ensures that all effects queued after syncFx is called on the element are
914 * run concurrently. This is the opposite of {@link #sequenceFx}.
915 * @return {Ext.Element} The Element
919 me.fxDefaults = Ext.apply(me.fxDefaults || {}, {
928 * Ensures that all effects queued after sequenceFx is called on the element are
929 * run in sequence. This is the opposite of {@link #syncFx}.
930 * @return {Ext.Element} The Element
932 sequenceFx : function(){
934 me.fxDefaults = Ext.apply(me.fxDefaults || {}, {
944 var ef = getQueue(this.dom.id)[0];
951 * Returns true if the element has any effects actively running or queued, else returns false.
952 * @return {Boolean} True if element has active effects, else false
954 hasActiveFx : function(){
955 return getQueue(this.dom.id)[0];
959 * Stops any running effects and clears the element's internal effects queue if it contains
960 * any additional effects that haven't started yet.
961 * @return {Ext.Element} The Element
963 stopFx : function(finish){
966 if(me.hasActiveFx()){
967 var cur = getQueue(id)[0];
969 if(cur.anim.isAnimated){
970 setQueue(id, [cur]); //clear
971 cur.anim.stop(finish !== undefined ? finish : TRUE);
981 beforeFx : function(o){
982 if(this.hasActiveFx() && !o.concurrent){
993 * Returns true if the element is currently blocking so that no other effect can be queued
994 * until this effect is finished, else returns false if blocking is not set. This is commonly
995 * used to ensure that an effect initiated by a user action runs to completion prior to the
996 * same effect being restarted (e.g., firing only one effect even if the user clicks several times).
997 * @return {Boolean} True if blocking, else false
999 hasFxBlock : function(){
1000 var q = getQueue(this.dom.id);
1001 return q && q[0] && q[0].block;
1005 queueFx : function(o, fn){
1006 var me = fly(this.dom);
1007 if(!me.hasFxBlock()){
1008 Ext.applyIf(o, me.fxDefaults);
1010 var run = me.beforeFx(o);
1012 getQueue(me.dom.id).push(fn);
1024 fxWrap : function(pos, o, vis){
1028 if(!o.wrap || !(wrap = Ext.getDom(o.wrap))){
1030 wrapXY = fly(dom).getXY();
1032 var div = document.createElement("div");
1033 div.style.visibility = vis;
1034 wrap = dom.parentNode.insertBefore(div, dom);
1035 fly(wrap).setPositioning(pos);
1036 if(fly(wrap).isStyle(POSITION, "static")){
1037 fly(wrap).position("relative");
1039 fly(dom).clearPositioning('auto');
1041 wrap.appendChild(dom);
1043 fly(wrap).setXY(wrapXY);
1050 fxUnwrap : function(wrap, pos, o){
1052 fly(dom).clearPositioning();
1053 fly(dom).setPositioning(pos);
1055 var pn = fly(wrap).dom.parentNode;
1056 pn.insertBefore(dom, wrap);
1062 getFxRestore : function(){
1063 var st = this.dom.style;
1064 return {pos: this.getPositioning(), width: st.width, height : st.height};
1068 afterFx : function(o){
1072 fly(dom).setStyle(o.afterStyle);
1075 fly(dom).addClass(o.afterCls);
1077 if(o.remove == TRUE){
1081 o.callback.call(o.scope, fly(dom));
1084 getQueue(id).shift();
1090 fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){
1091 animType = animType || 'run';
1093 var anim = Ext.lib.Anim[animType](
1096 (opt.duration || defaultDur) || .35,
1097 (opt.easing || defaultEase) || EASEOUT,
1107 Ext.Fx.resize = Ext.Fx.scale;
1109 //When included, Ext.Fx is automatically applied to Element so that all basic
1110 //effects are available directly via the Element API
1111 Ext.Element.addMethods(Ext.Fx);