3 <title>The source code</title>
4 <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
5 <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
7 <body onload="prettyPrint();">
8 <pre class="prettyprint lang-js">/*!
10 * Copyright(c) 2006-2009 Ext JS, LLC
12 * http://www.extjs.com/license
17 UNDEFINED = undefined,
\r
31 ABSOLUTE = "absolute",
\r
32 VISIBLE = "visible",
\r
34 POSITION = "position",
\r
35 EASEOUT = "easeOut",
\r
37 * Use a light flyweight here since we are using so many callbacks and are always assured a DOM element
\r
39 flyEl = new Ext.Element.Flyweight(),
\r
41 getObject = function(o){
\r
44 fly = function(dom){
\r
46 flyEl.id = Ext.id(dom);
\r
50 * Queueing now stored outside of the element due to closure issues
\r
52 getQueue = function(id){
\r
58 setQueue = function(id, value){
\r
62 //Notifies Element that fx methods are available
\r
63 Ext.enableFx = TRUE;
\r
65 <div id="cls-Ext.Fx"></div>/**
\r
67 * <p>A class to provide basic animation and visual effects support. <b>Note:</b> This class is automatically applied
\r
68 * to the {@link Ext.Element} interface when included, so all effects calls should be performed via {@link Ext.Element}.
\r
69 * Conversely, since the effects are not actually defined in {@link Ext.Element}, Ext.Fx <b>must</b> be
\r
70 * {@link Ext#enableFx included} in order for the Element effects to work.</p><br/>
\r
72 * <p><b><u>Method Chaining</u></b></p>
\r
73 * <p>It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that
\r
74 * they return the Element object itself as the method return value, it is not always possible to mix the two in a single
\r
75 * method chain. The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.
\r
76 * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately. For this reason,
\r
77 * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the
\r
78 * expected results and should be done with care. Also see <tt>{@link #callback}</tt>.</p><br/>
\r
80 * <p><b><u>Anchor Options for Motion Effects</u></b></p>
\r
81 * <p>Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element
\r
82 * that will serve as either the start or end point of the animation. Following are all of the supported anchor positions:</p>
\r
85 ----- -----------------------------
\r
86 tl The top left corner
\r
87 t The center of the top edge
\r
88 tr The top right corner
\r
89 l The center of the left edge
\r
90 r The center of the right edge
\r
91 bl The bottom left corner
\r
92 b The center of the bottom edge
\r
93 br The bottom right corner
\r
95 * <b>Note</b>: some Fx methods accept specific custom config parameters. The options shown in the Config Options
\r
96 * section below are common options that can be passed to any Fx method unless otherwise noted.</b>
\r
98 * @cfg {Function} callback A function called when the effect is finished. Note that effects are queued internally by the
\r
99 * Fx class, so a callback is not required to specify another effect -- effects can simply be chained together
\r
100 * and called in sequence (see note for <b><u>Method Chaining</u></b> above), for example:<pre><code>
\r
101 * el.slideIn().highlight();
\r
103 * The callback is intended for any additional code that should run once a particular effect has completed. The Element
\r
104 * being operated upon is passed as the first parameter.
\r
106 * @cfg {Object} scope The scope (<code>this</code> reference) in which the <tt>{@link #callback}</tt> function is executed. Defaults to the browser window.
\r
108 * @cfg {String} easing A valid Ext.lib.Easing value for the effect:</p><div class="mdetail-params"><ul>
\r
109 * <li><b><tt>backBoth</tt></b></li>
\r
110 * <li><b><tt>backIn</tt></b></li>
\r
111 * <li><b><tt>backOut</tt></b></li>
\r
112 * <li><b><tt>bounceBoth</tt></b></li>
\r
113 * <li><b><tt>bounceIn</tt></b></li>
\r
114 * <li><b><tt>bounceOut</tt></b></li>
\r
115 * <li><b><tt>easeBoth</tt></b></li>
\r
116 * <li><b><tt>easeBothStrong</tt></b></li>
\r
117 * <li><b><tt>easeIn</tt></b></li>
\r
118 * <li><b><tt>easeInStrong</tt></b></li>
\r
119 * <li><b><tt>easeNone</tt></b></li>
\r
120 * <li><b><tt>easeOut</tt></b></li>
\r
121 * <li><b><tt>easeOutStrong</tt></b></li>
\r
122 * <li><b><tt>elasticBoth</tt></b></li>
\r
123 * <li><b><tt>elasticIn</tt></b></li>
\r
124 * <li><b><tt>elasticOut</tt></b></li>
\r
127 * @cfg {String} afterCls A css class to apply after the effect
\r
128 * @cfg {Number} duration The length of time (in seconds) that the effect should last
\r
130 * @cfg {Number} endOpacity Only applicable for {@link #fadeIn} or {@link #fadeOut}, a number between
\r
131 * <tt>0</tt> and <tt>1</tt> inclusive to configure the ending opacity value.
\r
133 * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes
\r
134 * @cfg {Boolean} useDisplay Whether to use the <i>display</i> CSS property instead of <i>visibility</i> when hiding Elements (only applies to
\r
135 * effects that end with the element being visually hidden, ignored otherwise)
\r
136 * @cfg {String/Object/Function} afterStyle A style specification string, e.g. <tt>"width:100px"</tt>, or an object
\r
137 * in the form <tt>{width:"100px"}</tt>, or a function which returns such a specification that will be applied to the
\r
138 * Element after the effect finishes.
\r
139 * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs
\r
140 * @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
\r
141 * @cfg {Boolean} stopFx Whether preceding effects should be stopped and removed before running current effect (only applies to non blocking effects)
\r
145 // private - calls the function taking arguments from the argHash based on the key. Returns the return value of the function.
\r
146 // this is useful for replacing switch statements (for example).
\r
147 switchStatements : function(key, fn, argHash){
\r
148 return fn.apply(this, argHash[key]);
\r
152 * Slides the element into view. An anchor point can be optionally passed to set the point of
\r
153 * origin for the slide effect. This function automatically handles wrapping the element with
\r
154 * a fixed-size container if needed. See the Fx class overview for valid anchor point options.
\r
157 // default: slide the element in from the top
\r
160 // custom: slide the element in from the right with a 2-second duration
\r
161 el.slideIn('r', { duration: 2 });
\r
163 // common config options shown with default values
\r
169 * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
\r
170 * @param {Object} options (optional) Object literal with any of the Fx config options
\r
171 * @return {Ext.Element} The Element
\r
173 slideIn : function(anchor, o){
\r
189 anchor = anchor || "t";
\r
191 me.queueFx(o, function(){
\r
192 xy = fly(dom).getXY();
\r
193 // fix display to visibility
\r
194 fly(dom).fixDisplay();
\r
196 // restore values after effect
\r
197 r = fly(dom).getFxRestore();
\r
198 b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};
\r
199 b.right = b.x + b.width;
\r
200 b.bottom = b.y + b.height;
\r
202 // fixed size for slide
\r
203 fly(dom).setWidth(b.width).setHeight(b.height);
\r
206 wrap = fly(dom).fxWrap(r.pos, o, HIDDEN);
\r
208 st.visibility = VISIBLE;
\r
209 st.position = ABSOLUTE;
\r
211 // clear out temp styles after slide and unwrap
\r
213 fly(dom).fxUnwrap(wrap, r.pos, o);
\r
214 st.width = r.width;
\r
215 st.height = r.height;
\r
216 fly(dom).afterFx(o);
\r
219 // time to calculate the positions
\r
220 pt = {to: [b.x, b.y]};
\r
221 bw = {to: b.width};
\r
222 bh = {to: b.height};
\r
224 function argCalc(wrap, style, ww, wh, sXY, sXYval, s1, s2, w, h, p){
\r
226 fly(wrap).setWidth(ww).setHeight(wh);
\r
227 if(fly(wrap)[sXY]){
\r
228 fly(wrap)[sXY](sXYval);
\r
230 style[s1] = style[s2] = "0";
\r
243 args = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {
\r
244 t : [wrap, st, b.width, 0, NULL, NULL, LEFT, BOTTOM, NULL, bh, NULL],
\r
245 l : [wrap, st, 0, b.height, NULL, NULL, RIGHT, TOP, bw, NULL, NULL],
\r
246 r : [wrap, st, b.width, b.height, SETX, b.right, LEFT, TOP, NULL, NULL, pt],
\r
247 b : [wrap, st, b.width, b.height, SETY, b.bottom, LEFT, TOP, NULL, bh, pt],
\r
248 tl : [wrap, st, 0, 0, NULL, NULL, RIGHT, BOTTOM, bw, bh, pt],
\r
249 bl : [wrap, st, 0, 0, SETY, b.y + b.height, RIGHT, TOP, bw, bh, pt],
\r
250 br : [wrap, st, 0, 0, SETXY, [b.right, b.bottom], LEFT, TOP, bw, bh, pt],
\r
251 tr : [wrap, st, 0, 0, SETX, b.x + b.width, LEFT, BOTTOM, bw, bh, pt]
\r
254 st.visibility = VISIBLE;
\r
257 arguments.callee.anim = fly(wrap).fxanim(args,
\r
268 * Slides the element out of view. An anchor point can be optionally passed to set the end point
\r
269 * for the slide effect. When the effect is completed, the element will be hidden (visibility =
\r
270 * 'hidden') but block elements will still take up space in the document. The element must be removed
\r
271 * from the DOM using the 'remove' config option if desired. This function automatically handles
\r
272 * wrapping the element with a fixed-size container if needed. See the Fx class overview for valid anchor point options.
\r
275 // default: slide the element out to the top
\r
278 // custom: slide the element out to the right with a 2-second duration
\r
279 el.slideOut('r', { duration: 2 });
\r
281 // common config options shown with default values
\r
289 * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
\r
290 * @param {Object} options (optional) Object literal with any of the Fx config options
\r
291 * @return {Ext.Element} The Element
\r
293 slideOut : function(anchor, o){
\r
305 anchor = anchor || "t";
\r
307 me.queueFx(o, function(){
\r
309 // restore values after effect
\r
310 r = fly(dom).getFxRestore();
\r
311 b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};
\r
312 b.right = b.x + b.width;
\r
313 b.bottom = b.y + b.height;
\r
315 // fixed size for slide
\r
316 fly(dom).setWidth(b.width).setHeight(b.height);
\r
319 wrap = fly(dom).fxWrap(r.pos, o, VISIBLE);
\r
321 st.visibility = VISIBLE;
\r
322 st.position = ABSOLUTE;
\r
323 fly(wrap).setWidth(b.width).setHeight(b.height);
\r
326 o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
\r
327 fly(dom).fxUnwrap(wrap, r.pos, o);
\r
328 st.width = r.width;
\r
329 st.height = r.height;
\r
330 fly(dom).afterFx(o);
\r
333 function argCalc(style, s1, s2, p1, v1, p2, v2, p3, v3){
\r
336 style[s1] = style[s2] = "0";
\r
348 a = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {
\r
349 t : [st, LEFT, BOTTOM, HEIGHT, zero],
\r
350 l : [st, RIGHT, TOP, WIDTH, zero],
\r
351 r : [st, LEFT, TOP, WIDTH, zero, POINTS, {to : [b.right, b.y]}],
\r
352 b : [st, LEFT, TOP, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],
\r
353 tl : [st, RIGHT, BOTTOM, WIDTH, zero, HEIGHT, zero],
\r
354 bl : [st, RIGHT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],
\r
355 br : [st, LEFT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x + b.width, b.bottom]}],
\r
356 tr : [st, LEFT, BOTTOM, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.right, b.y]}]
\r
359 arguments.callee.anim = fly(wrap).fxanim(a,
\r
370 * Fades the element out while slowly expanding it in all directions. When the effect is completed, the
\r
371 * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document.
\r
372 * The element must be removed from the DOM using the 'remove' config option if desired.
\r
378 // common config options shown with default values
\r
386 * @param {Object} options (optional) Object literal with any of the Fx config options
\r
387 * @return {Ext.Element} The Element
\r
389 puff : function(o){
\r
398 me.queueFx(o, function(){
\r
399 width = fly(dom).getWidth();
\r
400 height = fly(dom).getHeight();
\r
401 fly(dom).clearOpacity();
\r
404 // restore values after effect
\r
405 r = fly(dom).getFxRestore();
\r
408 o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
\r
409 fly(dom).clearOpacity();
\r
410 fly(dom).setPositioning(r.pos);
\r
411 st.width = r.width;
\r
412 st.height = r.height;
\r
414 fly(dom).afterFx(o);
\r
417 arguments.callee.anim = fly(dom).fxanim({
\r
418 width : {to : fly(dom).adjustWidth(width * 2)},
\r
419 height : {to : fly(dom).adjustHeight(height * 2)},
\r
420 points : {by : [-width * .5, -height * .5]},
\r
421 opacity : {to : 0},
\r
422 fontSize: {to : 200, unit: "%"}
\r
434 * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
\r
435 * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still
\r
436 * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
\r
442 // all config options shown with default values
\r
450 * @param {Object} options (optional) Object literal with any of the Fx config options
\r
451 * @return {Ext.Element} The Element
\r
453 switchOff : function(o){
\r
460 me.queueFx(o, function(){
\r
461 fly(dom).clearOpacity();
\r
464 // restore values after effect
\r
465 r = fly(dom).getFxRestore();
\r
468 o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
\r
469 fly(dom).clearOpacity();
\r
470 fly(dom).setPositioning(r.pos);
\r
471 st.width = r.width;
\r
472 st.height = r.height;
\r
473 fly(dom).afterFx(o);
\r
476 fly(dom).fxanim({opacity : {to : 0.3}},
\r
482 fly(dom).clearOpacity();
\r
486 points : {by : [0, fly(dom).getHeight() * .5]}
\r
500 * Highlights the Element by setting a color (applies to the background-color by default, but can be
\r
501 * changed using the "attr" config option) and then fading back to the original color. If no original
\r
502 * color is available, you should provide the "endColor" config option which will be cleared after the animation.
\r
505 // default: highlight background to yellow
\r
508 // custom: highlight foreground text to blue for 2 seconds
\r
509 el.highlight("0000ff", { attr: 'color', duration: 2 });
\r
511 // common config options shown with default values
\r
512 el.highlight("ffff9c", {
\r
513 attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
\r
514 endColor: (current color) or "ffffff",
\r
519 * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')
\r
520 * @param {Object} options (optional) Object literal with any of the Fx config options
\r
521 * @return {Ext.Element} The Element
\r
523 highlight : function(color, o){
\r
527 attr = o.attr || "backgroundColor",
\r
531 me.queueFx(o, function(){
\r
532 fly(dom).clearOpacity();
\r
536 dom.style[attr] = restore;
\r
537 fly(dom).afterFx(o);
\r
539 restore = dom.style[attr];
\r
540 a[attr] = {from: color || "ffff9c", to: o.endColor || fly(dom).getColor(attr) || "ffffff"};
\r
541 arguments.callee.anim = fly(dom).fxanim(a,
\r
552 * Shows a ripple of exploding, attenuating borders to draw attention to an Element.
\r
555 // default: a single light blue ripple
\r
558 // custom: 3 red ripples lasting 3 seconds total
\r
559 el.frame("ff0000", 3, { duration: 3 });
\r
561 // common config options shown with default values
\r
562 el.frame("C3DAF9", 1, {
\r
563 duration: 1 //duration of each individual ripple.
\r
564 // Note: Easing is not configurable and will be ignored if included
\r
567 * @param {String} color (optional) The color of the border. Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').
\r
568 * @param {Number} count (optional) The number of ripples to display (defaults to 1)
\r
569 * @param {Object} options (optional) Object literal with any of the Fx config options
\r
570 * @return {Ext.Element} The Element
\r
572 frame : function(color, count, o){
\r
579 me.queueFx(o, function(){
\r
580 color = color || '#C3DAF9'
\r
581 if(color.length == 6){
\r
582 color = '#' + color;
\r
584 count = count || 1;
\r
587 var xy = fly(dom).getXY(),
\r
588 b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight},
\r
589 queue = function(){
\r
590 proxy = fly(document.body || document.documentElement).createChild({
\r
592 position : ABSOLUTE,
\r
593 'z-index': 35000, // yee haw
\r
594 border : '0px solid ' + color
\r
597 return proxy.queueFx({}, animFn);
\r
601 arguments.callee.anim = {
\r
610 var scale = Ext.isBorderBox ? 2 : 1;
\r
611 active = proxy.anim({
\r
612 top : {from : b.y, to : b.y - 20},
\r
613 left : {from : b.x, to : b.x - 20},
\r
614 borderWidth : {from : 0, to : 10},
\r
615 opacity : {from : 1, to : 0},
\r
616 height : {from : b.height, to : b.height + 20 * scale},
\r
617 width : {from : b.width, to : b.width + 20 * scale}
\r
619 duration: o.duration || 1,
\r
620 callback: function() {
\r
622 --count > 0 ? queue() : fly(dom).afterFx(o);
\r
625 arguments.callee.anim = {
\r
638 * Creates a pause before any subsequent queued effects begin. If there are
\r
639 * no effects queued after the pause it will have no effect.
\r
644 * @param {Number} seconds The length of time to pause (in seconds)
\r
645 * @return {Ext.Element} The Element
\r
647 pause : function(seconds){
\r
648 var dom = this.dom,
\r
651 this.queueFx({}, function(){
\r
652 t = setTimeout(function(){
\r
653 fly(dom).afterFx({});
\r
654 }, seconds * 1000);
\r
655 arguments.callee.anim = {
\r
659 fly(dom).afterFx({});
\r
667 * Fade an element in (from transparent to opaque). The ending opacity can be specified
\r
668 * using the <tt>{@link #endOpacity}</tt> config option.
\r
671 // default: fade in from opacity 0 to 100%
\r
674 // custom: fade in from opacity 0 to 75% over 2 seconds
\r
675 el.fadeIn({ endOpacity: .75, duration: 2});
\r
677 // common config options shown with default values
\r
679 endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
\r
684 * @param {Object} options (optional) Object literal with any of the Fx config options
\r
685 * @return {Ext.Element} The Element
\r
687 fadeIn : function(o){
\r
691 to = o.endOpacity || 1;
\r
693 me.queueFx(o, function(){
\r
694 fly(dom).setOpacity(0);
\r
695 fly(dom).fixDisplay();
\r
696 dom.style.visibility = VISIBLE;
\r
697 arguments.callee.anim = fly(dom).fxanim({opacity:{to:to}},
\r
698 o, NULL, .5, EASEOUT, function(){
\r
700 fly(dom).clearOpacity();
\r
702 fly(dom).afterFx(o);
\r
709 * Fade an element out (from opaque to transparent). The ending opacity can be specified
\r
710 * using the <tt>{@link #endOpacity}</tt> config option. Note that IE may require
\r
711 * <tt>{@link #useDisplay}:true</tt> in order to redisplay correctly.
\r
714 // default: fade out from the element's current opacity to 0
\r
717 // custom: fade out from the element's current opacity to 25% over 2 seconds
\r
718 el.fadeOut({ endOpacity: .25, duration: 2});
\r
720 // common config options shown with default values
\r
722 endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
\r
729 * @param {Object} options (optional) Object literal with any of the Fx config options
\r
730 * @return {Ext.Element} The Element
\r
732 fadeOut : function(o){
\r
737 to = o.endOpacity || 0;
\r
739 me.queueFx(o, function(){
\r
740 arguments.callee.anim = fly(dom).fxanim({
\r
741 opacity : {to : to}},
\r
748 Ext.Element.data(dom, 'visibilityMode') == Ext.Element.DISPLAY || o.useDisplay ?
\r
749 style.display = "none" :
\r
750 style.visibility = HIDDEN;
\r
752 fly(dom).clearOpacity();
\r
754 fly(dom).afterFx(o);
\r
761 * Animates the transition of an element's dimensions from a starting height/width
\r
762 * to an ending height/width. This method is a convenience implementation of {@link shift}.
\r
765 // change height and width to 100x100 pixels
\r
766 el.scale(100, 100);
\r
768 // common config options shown with default values. The height and width will default to
\r
769 // the element's existing values if passed as null.
\r
771 [element's width],
\r
772 [element's height], {
\r
778 * @param {Number} width The new width (pass undefined to keep the original width)
\r
779 * @param {Number} height The new height (pass undefined to keep the original height)
\r
780 * @param {Object} options (optional) Object literal with any of the Fx config options
\r
781 * @return {Ext.Element} The Element
\r
783 scale : function(w, h, o){
\r
784 this.shift(Ext.apply({}, o, {
\r
792 * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
\r
793 * Any of these properties not specified in the config object will not be changed. This effect
\r
794 * requires that at least one new dimension, position or opacity setting must be passed in on
\r
795 * the config object in order for the function to have any effect.
\r
798 // slide the element horizontally to x position 200 while changing the height and opacity
\r
799 el.shift({ x: 200, height: 50, opacity: .8 });
\r
801 // common config options shown with default values.
\r
803 width: [element's width],
\r
804 height: [element's height],
\r
805 x: [element's x position],
\r
806 y: [element's y position],
\r
807 opacity: [element's opacity],
\r
812 * @param {Object} options Object literal with any of the Fx config options
\r
813 * @return {Ext.Element} The Element
\r
815 shift : function(o){
\r
817 var dom = this.dom,
\r
820 this.queueFx(o, function(){
\r
821 for (var prop in o) {
\r
822 if (o[prop] != UNDEFINED) {
\r
823 a[prop] = {to : o[prop]};
\r
827 a.width ? a.width.to = fly(dom).adjustWidth(o.width) : a;
\r
828 a.height ? a.height.to = fly(dom).adjustWidth(o.height) : a;
\r
830 if (a.x || a.y || a.xy) {
\r
831 a.points = a.xy ||
\r
832 {to : [ a.x ? a.x.to : fly(dom).getX(),
\r
833 a.y ? a.y.to : fly(dom).getY()]};
\r
836 arguments.callee.anim = fly(dom).fxanim(a,
\r
842 fly(dom).afterFx(o);
\r
849 * Slides the element while fading it out of view. An anchor point can be optionally passed to set the
\r
850 * ending point of the effect.
\r
853 // default: slide the element downward while fading out
\r
856 // custom: slide the element out to the right with a 2-second duration
\r
857 el.ghost('r', { duration: 2 });
\r
859 // common config options shown with default values
\r
867 * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')
\r
868 * @param {Object} options (optional) Object literal with any of the Fx config options
\r
869 * @return {Ext.Element} The Element
\r
871 ghost : function(anchor, o){
\r
876 a = {opacity: {to: 0}, points: {}},
\r
882 anchor = anchor || "b";
\r
884 me.queueFx(o, function(){
\r
885 // restore values after effect
\r
886 r = fly(dom).getFxRestore();
\r
887 w = fly(dom).getWidth();
\r
888 h = fly(dom).getHeight();
\r
891 o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
\r
892 fly(dom).clearOpacity();
\r
893 fly(dom).setPositioning(r.pos);
\r
894 st.width = r.width;
\r
895 st.height = r.height;
\r
896 fly(dom).afterFx(o);
\r
899 pt.by = fly(dom).switchStatements(anchor.toLowerCase(), function(v1,v2){ return [v1, v2];}, {
\r
910 arguments.callee.anim = fly(dom).fxanim(a,
\r
920 * Ensures that all effects queued after syncFx is called on the element are
\r
921 * run concurrently. This is the opposite of {@link #sequenceFx}.
\r
922 * @return {Ext.Element} The Element
\r
924 syncFx : function(){
\r
926 me.fxDefaults = Ext.apply(me.fxDefaults || {}, {
\r
935 * Ensures that all effects queued after sequenceFx is called on the element are
\r
936 * run in sequence. This is the opposite of {@link #syncFx}.
\r
937 * @return {Ext.Element} The Element
\r
939 sequenceFx : function(){
\r
941 me.fxDefaults = Ext.apply(me.fxDefaults || {}, {
\r
943 concurrent : FALSE,
\r
950 nextFx : function(){
\r
951 var ef = getQueue(this.dom.id)[0];
\r
958 * Returns true if the element has any effects actively running or queued, else returns false.
\r
959 * @return {Boolean} True if element has active effects, else false
\r
961 hasActiveFx : function(){
\r
962 return getQueue(this.dom.id)[0];
\r
966 * Stops any running effects and clears the element's internal effects queue if it contains
\r
967 * any additional effects that haven't started yet.
\r
968 * @return {Ext.Element} The Element
\r
970 stopFx : function(finish){
\r
973 if(me.hasActiveFx()){
\r
974 var cur = getQueue(id)[0];
\r
975 if(cur && cur.anim){
\r
976 if(cur.anim.isAnimated){
\r
977 setQueue(id, [cur]); //clear
\r
978 cur.anim.stop(finish !== undefined ? finish : TRUE);
\r
988 beforeFx : function(o){
\r
989 if(this.hasActiveFx() && !o.concurrent){
\r
1000 * Returns true if the element is currently blocking so that no other effect can be queued
\r
1001 * until this effect is finished, else returns false if blocking is not set. This is commonly
\r
1002 * used to ensure that an effect initiated by a user action runs to completion prior to the
\r
1003 * same effect being restarted (e.g., firing only one effect even if the user clicks several times).
\r
1004 * @return {Boolean} True if blocking, else false
\r
1006 hasFxBlock : function(){
\r
1007 var q = getQueue(this.dom.id);
\r
1008 return q && q[0] && q[0].block;
\r
1012 queueFx : function(o, fn){
\r
1013 var me = fly(this.dom);
\r
1014 if(!me.hasFxBlock()){
\r
1015 Ext.applyIf(o, me.fxDefaults);
\r
1016 if(!o.concurrent){
\r
1017 var run = me.beforeFx(o);
\r
1018 fn.block = o.block;
\r
1019 getQueue(me.dom.id).push(fn);
\r
1031 fxWrap : function(pos, o, vis){
\r
1032 var dom = this.dom,
\r
1035 if(!o.wrap || !(wrap = Ext.getDom(o.wrap))){
\r
1036 if(o.fixPosition){
\r
1037 wrapXY = fly(dom).getXY();
\r
1039 var div = document.createElement("div");
\r
1040 div.style.visibility = vis;
\r
1041 wrap = dom.parentNode.insertBefore(div, dom);
\r
1042 fly(wrap).setPositioning(pos);
\r
1043 if(fly(wrap).isStyle(POSITION, "static")){
\r
1044 fly(wrap).position("relative");
\r
1046 fly(dom).clearPositioning('auto');
\r
1048 wrap.appendChild(dom);
\r
1050 fly(wrap).setXY(wrapXY);
\r
1057 fxUnwrap : function(wrap, pos, o){
\r
1058 var dom = this.dom;
\r
1059 fly(dom).clearPositioning();
\r
1060 fly(dom).setPositioning(pos);
\r
1062 var pn = fly(wrap).dom.parentNode;
1063 pn.insertBefore(dom, wrap);
\r
1064 fly(wrap).remove();
\r
1069 getFxRestore : function(){
\r
1070 var st = this.dom.style;
\r
1071 return {pos: this.getPositioning(), width: st.width, height : st.height};
\r
1075 afterFx : function(o){
\r
1076 var dom = this.dom,
\r
1079 fly(dom).setStyle(o.afterStyle);
\r
1082 fly(dom).addClass(o.afterCls);
\r
1084 if(o.remove == TRUE){
\r
1085 fly(dom).remove();
\r
1088 o.callback.call(o.scope, fly(dom));
\r
1090 if(!o.concurrent){
\r
1091 getQueue(id).shift();
\r
1092 fly(dom).nextFx();
\r
1097 fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){
\r
1098 animType = animType || 'run';
\r
1100 var anim = Ext.lib.Anim[animType](
\r
1103 (opt.duration || defaultDur) || .35,
\r
1104 (opt.easing || defaultEase) || EASEOUT,
\r
1113 // backwards compat
\r
1114 Ext.Fx.resize = Ext.Fx.scale;
\r
1116 //When included, Ext.Fx is automatically applied to Element so that all basic
\r
1117 //effects are available directly via the Element API
\r
1118 Ext.Element.addMethods(Ext.Fx);
\r