docs/source/Fx.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.2.0
  11  * Copyright(c) 2006-2010 Ext JS, Inc.
  12  * licensing@extjs.com
  13  * http://www.extjs.com/license
  14  */
  15 (function(){
  16     // contants
  17     var NULL = null,
  18         UNDEFINED = undefined,
  19         TRUE = true,
  20         FALSE = false,
  21         SETX = "setX",
  22         SETY = "setY",
  23         SETXY = "setXY",
  24         LEFT = "left",
  25         BOTTOM = "bottom",
  26         TOP = "top",
  27         RIGHT = "right",
  28         HEIGHT = "height",
  29         WIDTH = "width",
  30         POINTS = "points",
  31         HIDDEN = "hidden",
  32         ABSOLUTE = "absolute",
  33         VISIBLE = "visible",
  34         MOTION = "motion",
  35         POSITION = "position",
  36         EASEOUT = "easeOut",
  37         /*
  38          * Use a light flyweight here since we are using so many callbacks and are always assured a DOM element
  39          */
  40         flyEl = new Ext.Element.Flyweight(),
  41         queues = {},
  42         getObject = function(o){
  43             return o || {};
  44         },
  45         fly = function(dom){
  46             flyEl.dom = dom;
  47             flyEl.id = Ext.id(dom);
  48             return flyEl;
  49         },
  50         /*
  51          * Queueing now stored outside of the element due to closure issues
  52          */
  53         getQueue = function(id){
  54             if(!queues[id]){
  55                 queues[id] = [];
  56             }
  57             return queues[id];
  58         },
  59         setQueue = function(id, value){
  60             queues[id] = value;
  61         };
  62
  63 //Notifies Element that fx methods are available
  64 Ext.enableFx = TRUE;
  65
  66 <div id="cls-Ext.Fx"></div>/**
  67  * @class Ext.Fx
  68  * <p>A class to provide basic animation and visual effects support.  <b>Note:</b> This class is automatically applied
  69  * to the {@link Ext.Element} interface when included, so all effects calls should be performed via {@link Ext.Element}.
  70  * Conversely, since the effects are not actually defined in {@link Ext.Element}, Ext.Fx <b>must</b> be
  71  * {@link Ext#enableFx included} in order for the Element effects to work.</p><br/>
  72  *
  73  * <p><b><u>Method Chaining</u></b></p>
  74  * <p>It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that
  75  * they return the Element object itself as the method return value, it is not always possible to mix the two in a single
  76  * method chain.  The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.
  77  * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately.  For this reason,
  78  * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the
  79  * expected results and should be done with care.  Also see <tt>{@link #callback}</tt>.</p><br/>
  80  *
  81  * <p><b><u>Anchor Options for Motion Effects</u></b></p>
  82  * <p>Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element
  83  * that will serve as either the start or end point of the animation.  Following are all of the supported anchor positions:</p>
  84 <pre>
  85 Value  Description
  86 -----  -----------------------------
  87 tl     The top left corner
  88 t      The center of the top edge
  89 tr     The top right corner
  90 l      The center of the left edge
  91 r      The center of the right edge
  92 bl     The bottom left corner
  93 b      The center of the bottom edge
  94 br     The bottom right corner
  95 </pre>
  96  * <b>Note</b>: some Fx methods accept specific custom config parameters.  The options shown in the Config Options
  97  * section below are common options that can be passed to any Fx method unless otherwise noted.</b>
  98  *
  99  * @cfg {Function} callback A function called when the effect is finished.  Note that effects are queued internally by the
 100  * Fx class, so a callback is not required to specify another effect -- effects can simply be chained together
 101  * and called in sequence (see note for <b><u>Method Chaining</u></b> above), for example:<pre><code>
 102  * el.slideIn().highlight();
 103  * </code></pre>
 104  * The callback is intended for any additional code that should run once a particular effect has completed. The Element
 105  * being operated upon is passed as the first parameter.
 106  *
 107  * @cfg {Object} scope The scope (<code>this</code> reference) in which the <tt>{@link #callback}</tt> function is executed. Defaults to the browser window.
 108  *
 109  * @cfg {String} easing A valid Ext.lib.Easing value for the effect:</p><div class="mdetail-params"><ul>
 110  * <li><b><tt>backBoth</tt></b></li>
 111  * <li><b><tt>backIn</tt></b></li>
 112  * <li><b><tt>backOut</tt></b></li>
 113  * <li><b><tt>bounceBoth</tt></b></li>
 114  * <li><b><tt>bounceIn</tt></b></li>
 115  * <li><b><tt>bounceOut</tt></b></li>
 116  * <li><b><tt>easeBoth</tt></b></li>
 117  * <li><b><tt>easeBothStrong</tt></b></li>
 118  * <li><b><tt>easeIn</tt></b></li>
 119  * <li><b><tt>easeInStrong</tt></b></li>
 120  * <li><b><tt>easeNone</tt></b></li>
 121  * <li><b><tt>easeOut</tt></b></li>
 122  * <li><b><tt>easeOutStrong</tt></b></li>
 123  * <li><b><tt>elasticBoth</tt></b></li>
 124  * <li><b><tt>elasticIn</tt></b></li>
 125  * <li><b><tt>elasticOut</tt></b></li>
 126  * </ul></div>
 127  *
 128  * @cfg {String} afterCls A css class to apply after the effect
 129  * @cfg {Number} duration The length of time (in seconds) that the effect should last
 130  *
 131  * @cfg {Number} endOpacity Only applicable for {@link #fadeIn} or {@link #fadeOut}, a number between
 132  * <tt>0</tt> and <tt>1</tt> inclusive to configure the ending opacity value.
 133  *
 134  * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes
 135  * @cfg {Boolean} useDisplay Whether to use the <i>display</i> CSS property instead of <i>visibility</i> when hiding Elements (only applies to
 136  * effects that end with the element being visually hidden, ignored otherwise)
 137  * @cfg {String/Object/Function} afterStyle A style specification string, e.g. <tt>"width:100px"</tt>, or an object
 138  * in the form <tt>{width:"100px"}</tt>, or a function which returns such a specification that will be applied to the
 139  * Element after the effect finishes.
 140  * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs
 141  * @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
 142  * @cfg {Boolean} stopFx Whether preceding effects should be stopped and removed before running current effect (only applies to non blocking effects)
 143  */
 144 Ext.Fx = {
 145
 146     // private - calls the function taking arguments from the argHash based on the key.  Returns the return value of the function.
 147     //           this is useful for replacing switch statements (for example).
 148     switchStatements : function(key, fn, argHash){
 149         return fn.apply(this, argHash[key]);
 150     },
 151
 152     /**
 153      * Slides the element into view.  An anchor point can be optionally passed to set the point of
 154      * origin for the slide effect.  This function automatically handles wrapping the element with
 155      * a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
 156      * Usage:
 157      *<pre><code>
 158 // default: slide the element in from the top
 159 el.slideIn();
 160
 161 // custom: slide the element in from the right with a 2-second duration
 162 el.slideIn('r', { duration: 2 });
 163
 164 // common config options shown with default values
 165 el.slideIn('t', {
 166     easing: 'easeOut',
 167     duration: .5
 168 });
 169 </code></pre>
 170      * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
 171      * @param {Object} options (optional) Object literal with any of the Fx config options
 172      * @return {Ext.Element} The Element
 173      */
 174     slideIn : function(anchor, o){
 175         o = getObject(o);
 176         var me = this,
 177             dom = me.dom,
 178             st = dom.style,
 179             xy,
 180             r,
 181             b,
 182             wrap,
 183             after,
 184             st,
 185             args,
 186             pt,
 187             bw,
 188             bh;
 189
 190         anchor = anchor || "t";
 191
 192         me.queueFx(o, function(){
 193             xy = fly(dom).getXY();
 194             // fix display to visibility
 195             fly(dom).fixDisplay();
 196
 197             // restore values after effect
 198             r = fly(dom).getFxRestore();
 199             b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};
 200             b.right = b.x + b.width;
 201             b.bottom = b.y + b.height;
 202
 203             // fixed size for slide
 204             fly(dom).setWidth(b.width).setHeight(b.height);
 205
 206             // wrap if needed
 207             wrap = fly(dom).fxWrap(r.pos, o, HIDDEN);
 208
 209             st.visibility = VISIBLE;
 210             st.position = ABSOLUTE;
 211
 212             // clear out temp styles after slide and unwrap
 213             function after(){
 214                  fly(dom).fxUnwrap(wrap, r.pos, o);
 215                  st.width = r.width;
 216                  st.height = r.height;
 217                  fly(dom).afterFx(o);
 218             }
 219
 220             // time to calculate the positions
 221             pt = {to: [b.x, b.y]};
 222             bw = {to: b.width};
 223             bh = {to: b.height};
 224
 225             function argCalc(wrap, style, ww, wh, sXY, sXYval, s1, s2, w, h, p){
 226                 var ret = {};
 227                 fly(wrap).setWidth(ww).setHeight(wh);
 228                 if(fly(wrap)[sXY]){
 229                     fly(wrap)[sXY](sXYval);
 230                 }
 231                 style[s1] = style[s2] = "0";
 232                 if(w){
 233                     ret.width = w
 234                 };
 235                 if(h){
 236                     ret.height = h;
 237                 }
 238                 if(p){
 239                     ret.points = p;
 240                 }
 241                 return ret;
 242             };
 243
 244             args = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {
 245                     t  : [wrap, st, b.width, 0, NULL, NULL, LEFT, BOTTOM, NULL, bh, NULL],
 246                     l  : [wrap, st, 0, b.height, NULL, NULL, RIGHT, TOP, bw, NULL, NULL],
 247                     r  : [wrap, st, b.width, b.height, SETX, b.right, LEFT, TOP, NULL, NULL, pt],
 248                     b  : [wrap, st, b.width, b.height, SETY, b.bottom, LEFT, TOP, NULL, bh, pt],
 249                     tl : [wrap, st, 0, 0, NULL, NULL, RIGHT, BOTTOM, bw, bh, pt],
 250                     bl : [wrap, st, 0, 0, SETY, b.y + b.height, RIGHT, TOP, bw, bh, pt],
 251                     br : [wrap, st, 0, 0, SETXY, [b.right, b.bottom], LEFT, TOP, bw, bh, pt],
 252                     tr : [wrap, st, 0, 0, SETX, b.x + b.width, LEFT, BOTTOM, bw, bh, pt]
 253                 });
 254
 255             st.visibility = VISIBLE;
 256             fly(wrap).show();
 257
 258             arguments.callee.anim = fly(wrap).fxanim(args,
 259                 o,
 260                 MOTION,
 261                 .5,
 262                 EASEOUT,
 263                 after);
 264         });
 265         return me;
 266     },
 267
 268     /**
 269      * Slides the element out of view.  An anchor point can be optionally passed to set the end point
 270      * for the slide effect.  When the effect is completed, the element will be hidden (visibility =
 271      * 'hidden') but block elements will still take up space in the document.  The element must be removed
 272      * from the DOM using the 'remove' config option if desired.  This function automatically handles
 273      * wrapping the element with a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
 274      * Usage:
 275      *<pre><code>
 276 // default: slide the element out to the top
 277 el.slideOut();
 278
 279 // custom: slide the element out to the right with a 2-second duration
 280 el.slideOut('r', { duration: 2 });
 281
 282 // common config options shown with default values
 283 el.slideOut('t', {
 284     easing: 'easeOut',
 285     duration: .5,
 286     remove: false,
 287     useDisplay: false
 288 });
 289 </code></pre>
 290      * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
 291      * @param {Object} options (optional) Object literal with any of the Fx config options
 292      * @return {Ext.Element} The Element
 293      */
 294     slideOut : function(anchor, o){
 295         o = getObject(o);
 296         var me = this,
 297             dom = me.dom,
 298             st = dom.style,
 299             xy = me.getXY(),
 300             wrap,
 301             r,
 302             b,
 303             a,
 304             zero = {to: 0};
 305
 306         anchor = anchor || "t";
 307
 308         me.queueFx(o, function(){
 309
 310             // restore values after effect
 311             r = fly(dom).getFxRestore();
 312             b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};
 313             b.right = b.x + b.width;
 314             b.bottom = b.y + b.height;
 315
 316             // fixed size for slide
 317             fly(dom).setWidth(b.width).setHeight(b.height);
 318
 319             // wrap if needed
 320             wrap = fly(dom).fxWrap(r.pos, o, VISIBLE);
 321
 322             st.visibility = VISIBLE;
 323             st.position = ABSOLUTE;
 324             fly(wrap).setWidth(b.width).setHeight(b.height);
 325
 326             function after(){
 327                 o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
 328                 fly(dom).fxUnwrap(wrap, r.pos, o);
 329                 st.width = r.width;
 330                 st.height = r.height;
 331                 fly(dom).afterFx(o);
 332             }
 333
 334             function argCalc(style, s1, s2, p1, v1, p2, v2, p3, v3){
 335                 var ret = {};
 336
 337                 style[s1] = style[s2] = "0";
 338                 ret[p1] = v1;
 339                 if(p2){
 340                     ret[p2] = v2;
 341                 }
 342                 if(p3){
 343                     ret[p3] = v3;
 344                 }
 345
 346                 return ret;
 347             };
 348
 349             a = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {
 350                 t  : [st, LEFT, BOTTOM, HEIGHT, zero],
 351                 l  : [st, RIGHT, TOP, WIDTH, zero],
 352                 r  : [st, LEFT, TOP, WIDTH, zero, POINTS, {to : [b.right, b.y]}],
 353                 b  : [st, LEFT, TOP, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],
 354                 tl : [st, RIGHT, BOTTOM, WIDTH, zero, HEIGHT, zero],
 355                 bl : [st, RIGHT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],
 356                 br : [st, LEFT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x + b.width, b.bottom]}],
 357                 tr : [st, LEFT, BOTTOM, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.right, b.y]}]
 358             });
 359
 360             arguments.callee.anim = fly(wrap).fxanim(a,
 361                 o,
 362                 MOTION,
 363                 .5,
 364                 EASEOUT,
 365                 after);
 366         });
 367         return me;
 368     },
 369
 370     /**
 371      * Fades the element out while slowly expanding it in all directions.  When the effect is completed, the
 372      * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document.
 373      * The element must be removed from the DOM using the 'remove' config option if desired.
 374      * Usage:
 375      *<pre><code>
 376 // default
 377 el.puff();
 378
 379 // common config options shown with default values
 380 el.puff({
 381     easing: 'easeOut',
 382     duration: .5,
 383     remove: false,
 384     useDisplay: false
 385 });
 386 </code></pre>
 387      * @param {Object} options (optional) Object literal with any of the Fx config options
 388      * @return {Ext.Element} The Element
 389      */
 390     puff : function(o){
 391         o = getObject(o);
 392         var me = this,
 393             dom = me.dom,
 394             st = dom.style,
 395             width,
 396             height,
 397             r;
 398
 399         me.queueFx(o, function(){
 400             width = fly(dom).getWidth();
 401             height = fly(dom).getHeight();
 402             fly(dom).clearOpacity();
 403             fly(dom).show();
 404
 405             // restore values after effect
 406             r = fly(dom).getFxRestore();
 407
 408             function after(){
 409                 o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
 410                 fly(dom).clearOpacity();
 411                 fly(dom).setPositioning(r.pos);
 412                 st.width = r.width;
 413                 st.height = r.height;
 414                 st.fontSize = '';
 415                 fly(dom).afterFx(o);
 416             }
 417
 418             arguments.callee.anim = fly(dom).fxanim({
 419                     width : {to : fly(dom).adjustWidth(width * 2)},
 420                     height : {to : fly(dom).adjustHeight(height * 2)},
 421                     points : {by : [-width * .5, -height * .5]},
 422                     opacity : {to : 0},
 423                     fontSize: {to : 200, unit: "%"}
 424                 },
 425                 o,
 426                 MOTION,
 427                 .5,
 428                 EASEOUT,
 429                  after);
 430         });
 431         return me;
 432     },
 433
 434     /**
 435      * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
 436      * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still
 437      * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
 438      * Usage:
 439      *<pre><code>
 440 // default
 441 el.switchOff();
 442
 443 // all config options shown with default values
 444 el.switchOff({
 445     easing: 'easeIn',
 446     duration: .3,
 447     remove: false,
 448     useDisplay: false
 449 });
 450 </code></pre>
 451      * @param {Object} options (optional) Object literal with any of the Fx config options
 452      * @return {Ext.Element} The Element
 453      */
 454     switchOff : function(o){
 455         o = getObject(o);
 456         var me = this,
 457             dom = me.dom,
 458             st = dom.style,
 459             r;
 460
 461         me.queueFx(o, function(){
 462             fly(dom).clearOpacity();
 463             fly(dom).clip();
 464
 465             // restore values after effect
 466             r = fly(dom).getFxRestore();
 467
 468             function after(){
 469                 o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
 470                 fly(dom).clearOpacity();
 471                 fly(dom).setPositioning(r.pos);
 472                 st.width = r.width;
 473                 st.height = r.height;
 474                 fly(dom).afterFx(o);
 475             };
 476
 477             fly(dom).fxanim({opacity : {to : 0.3}},
 478                 NULL,
 479                 NULL,
 480                 .1,
 481                 NULL,
 482                 function(){
 483                     fly(dom).clearOpacity();
 484                         (function(){
 485                             fly(dom).fxanim({
 486                                 height : {to : 1},
 487                                 points : {by : [0, fly(dom).getHeight() * .5]}
 488                             },
 489                             o,
 490                             MOTION,
 491                             0.3,
 492                             'easeIn',
 493                             after);
 494                         }).defer(100);
 495                 });
 496         });
 497         return me;
 498     },
 499
 500     /**
 501      * Highlights the Element by setting a color (applies to the background-color by default, but can be
 502      * changed using the "attr" config option) and then fading back to the original color. If no original
 503      * color is available, you should provide the "endColor" config option which will be cleared after the animation.
 504      * Usage:
 505 <pre><code>
 506 // default: highlight background to yellow
 507 el.highlight();
 508
 509 // custom: highlight foreground text to blue for 2 seconds
 510 el.highlight("0000ff", { attr: 'color', duration: 2 });
 511
 512 // common config options shown with default values
 513 el.highlight("ffff9c", {
 514     attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
 515     endColor: (current color) or "ffffff",
 516     easing: 'easeIn',
 517     duration: 1
 518 });
 519 </code></pre>
 520      * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')
 521      * @param {Object} options (optional) Object literal with any of the Fx config options
 522      * @return {Ext.Element} The Element
 523      */
 524     highlight : function(color, o){
 525         o = getObject(o);
 526         var me = this,
 527             dom = me.dom,
 528             attr = o.attr || "backgroundColor",
 529             a = {},
 530             restore;
 531
 532         me.queueFx(o, function(){
 533             fly(dom).clearOpacity();
 534             fly(dom).show();
 535
 536             function after(){
 537                 dom.style[attr] = restore;
 538                 fly(dom).afterFx(o);
 539             }
 540             restore = dom.style[attr];
 541             a[attr] = {from: color || "ffff9c", to: o.endColor || fly(dom).getColor(attr) || "ffffff"};
 542             arguments.callee.anim = fly(dom).fxanim(a,
 543                 o,
 544                 'color',
 545                 1,
 546                 'easeIn',
 547                 after);
 548         });
 549         return me;
 550     },
 551
 552    /**
 553     * Shows a ripple of exploding, attenuating borders to draw attention to an Element.
 554     * Usage:
 555 <pre><code>
 556 // default: a single light blue ripple
 557 el.frame();
 558
 559 // custom: 3 red ripples lasting 3 seconds total
 560 el.frame("ff0000", 3, { duration: 3 });
 561
 562 // common config options shown with default values
 563 el.frame("C3DAF9", 1, {
 564     duration: 1 //duration of each individual ripple.
 565     // Note: Easing is not configurable and will be ignored if included
 566 });
 567 </code></pre>
 568     * @param {String} color (optional) The color of the border.  Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').
 569     * @param {Number} count (optional) The number of ripples to display (defaults to 1)
 570     * @param {Object} options (optional) Object literal with any of the Fx config options
 571     * @return {Ext.Element} The Element
 572     */
 573     frame : function(color, count, o){
 574         o = getObject(o);
 575         var me = this,
 576             dom = me.dom,
 577             proxy,
 578             active;
 579
 580         me.queueFx(o, function(){
 581             color = color || '#C3DAF9';
 582             if(color.length == 6){
 583                 color = '#' + color;
 584             }
 585             count = count || 1;
 586             fly(dom).show();
 587
 588             var xy = fly(dom).getXY(),
 589                 b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight},
 590                 queue = function(){
 591                     proxy = fly(document.body || document.documentElement).createChild({
 592                         style:{
 593                             position : ABSOLUTE,
 594                             'z-index': 35000, // yee haw
 595                             border : '0px solid ' + color
 596                         }
 597                     });
 598                     return proxy.queueFx({}, animFn);
 599                 };
 600
 601
 602             arguments.callee.anim = {
 603                 isAnimated: true,
 604                 stop: function() {
 605                     count = 0;
 606                     proxy.stopFx();
 607                 }
 608             };
 609
 610             function animFn(){
 611                 var scale = Ext.isBorderBox ? 2 : 1;
 612                 active = proxy.anim({
 613                     top : {from : b.y, to : b.y - 20},
 614                     left : {from : b.x, to : b.x - 20},
 615                     borderWidth : {from : 0, to : 10},
 616                     opacity : {from : 1, to : 0},
 617                     height : {from : b.height, to : b.height + 20 * scale},
 618                     width : {from : b.width, to : b.width + 20 * scale}
 619                 },{
 620                     duration: o.duration || 1,
 621                     callback: function() {
 622                         proxy.remove();
 623                         --count > 0 ? queue() : fly(dom).afterFx(o);
 624                     }
 625                 });
 626                 arguments.callee.anim = {
 627                     isAnimated: true,
 628                     stop: function(){
 629                         active.stop();
 630                     }
 631                 };
 632             };
 633             queue();
 634         });
 635         return me;
 636     },
 637
 638    /**
 639     * Creates a pause before any subsequent queued effects begin.  If there are
 640     * no effects queued after the pause it will have no effect.
 641     * Usage:
 642 <pre><code>
 643 el.pause(1);
 644 </code></pre>
 645     * @param {Number} seconds The length of time to pause (in seconds)
 646     * @return {Ext.Element} The Element
 647     */
 648     pause : function(seconds){
 649         var dom = this.dom,
 650             t;
 651
 652         this.queueFx({}, function(){
 653             t = setTimeout(function(){
 654                 fly(dom).afterFx({});
 655             }, seconds * 1000);
 656             arguments.callee.anim = {
 657                 isAnimated: true,
 658                 stop: function(){
 659                     clearTimeout(t);
 660                     fly(dom).afterFx({});
 661                 }
 662             };
 663         });
 664         return this;
 665     },
 666
 667    /**
 668     * Fade an element in (from transparent to opaque).  The ending opacity can be specified
 669     * using the <tt>{@link #endOpacity}</tt> config option.
 670     * Usage:
 671 <pre><code>
 672 // default: fade in from opacity 0 to 100%
 673 el.fadeIn();
 674
 675 // custom: fade in from opacity 0 to 75% over 2 seconds
 676 el.fadeIn({ endOpacity: .75, duration: 2});
 677
 678 // common config options shown with default values
 679 el.fadeIn({
 680     endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
 681     easing: 'easeOut',
 682     duration: .5
 683 });
 684 </code></pre>
 685     * @param {Object} options (optional) Object literal with any of the Fx config options
 686     * @return {Ext.Element} The Element
 687     */
 688     fadeIn : function(o){
 689         o = getObject(o);
 690         var me = this,
 691             dom = me.dom,
 692             to = o.endOpacity || 1;
 693
 694         me.queueFx(o, function(){
 695             fly(dom).setOpacity(0);
 696             fly(dom).fixDisplay();
 697             dom.style.visibility = VISIBLE;
 698             arguments.callee.anim = fly(dom).fxanim({opacity:{to:to}},
 699                 o, NULL, .5, EASEOUT, function(){
 700                 if(to == 1){
 701                     fly(dom).clearOpacity();
 702                 }
 703                 fly(dom).afterFx(o);
 704             });
 705         });
 706         return me;
 707     },
 708
 709    /**
 710     * Fade an element out (from opaque to transparent).  The ending opacity can be specified
 711     * using the <tt>{@link #endOpacity}</tt> config option.  Note that IE may require
 712     * <tt>{@link #useDisplay}:true</tt> in order to redisplay correctly.
 713     * Usage:
 714 <pre><code>
 715 // default: fade out from the element's current opacity to 0
 716 el.fadeOut();
 717
 718 // custom: fade out from the element's current opacity to 25% over 2 seconds
 719 el.fadeOut({ endOpacity: .25, duration: 2});
 720
 721 // common config options shown with default values
 722 el.fadeOut({
 723     endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
 724     easing: 'easeOut',
 725     duration: .5,
 726     remove: false,
 727     useDisplay: false
 728 });
 729 </code></pre>
 730     * @param {Object} options (optional) Object literal with any of the Fx config options
 731     * @return {Ext.Element} The Element
 732     */
 733     fadeOut : function(o){
 734         o = getObject(o);
 735         var me = this,
 736             dom = me.dom,
 737             style = dom.style,
 738             to = o.endOpacity || 0;
 739
 740         me.queueFx(o, function(){
 741             arguments.callee.anim = fly(dom).fxanim({
 742                 opacity : {to : to}},
 743                 o,
 744                 NULL,
 745                 .5,
 746                 EASEOUT,
 747                 function(){
 748                     if(to == 0){
 749                         Ext.Element.data(dom, 'visibilityMode') == Ext.Element.DISPLAY || o.useDisplay ?
 750                             style.display = "none" :
 751                             style.visibility = HIDDEN;
 752
 753                         fly(dom).clearOpacity();
 754                     }
 755                     fly(dom).afterFx(o);
 756             });
 757         });
 758         return me;
 759     },
 760
 761    /**
 762     * Animates the transition of an element's dimensions from a starting height/width
 763     * to an ending height/width.  This method is a convenience implementation of {@link shift}.
 764     * Usage:
 765 <pre><code>
 766 // change height and width to 100x100 pixels
 767 el.scale(100, 100);
 768
 769 // common config options shown with default values.  The height and width will default to
 770 // the element&#39;s existing values if passed as null.
 771 el.scale(
 772     [element&#39;s width],
 773     [element&#39;s height], {
 774         easing: 'easeOut',
 775         duration: .35
 776     }
 777 );
 778 </code></pre>
 779     * @param {Number} width  The new width (pass undefined to keep the original width)
 780     * @param {Number} height  The new height (pass undefined to keep the original height)
 781     * @param {Object} options (optional) Object literal with any of the Fx config options
 782     * @return {Ext.Element} The Element
 783     */
 784     scale : function(w, h, o){
 785         this.shift(Ext.apply({}, o, {
 786             width: w,
 787             height: h
 788         }));
 789         return this;
 790     },
 791
 792    /**
 793     * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
 794     * Any of these properties not specified in the config object will not be changed.  This effect
 795     * requires that at least one new dimension, position or opacity setting must be passed in on
 796     * the config object in order for the function to have any effect.
 797     * Usage:
 798 <pre><code>
 799 // slide the element horizontally to x position 200 while changing the height and opacity
 800 el.shift({ x: 200, height: 50, opacity: .8 });
 801
 802 // common config options shown with default values.
 803 el.shift({
 804     width: [element&#39;s width],
 805     height: [element&#39;s height],
 806     x: [element&#39;s x position],
 807     y: [element&#39;s y position],
 808     opacity: [element&#39;s opacity],
 809     easing: 'easeOut',
 810     duration: .35
 811 });
 812 </code></pre>
 813     * @param {Object} options  Object literal with any of the Fx config options
 814     * @return {Ext.Element} The Element
 815     */
 816     shift : function(o){
 817         o = getObject(o);
 818         var dom = this.dom,
 819             a = {};
 820
 821         this.queueFx(o, function(){
 822             for (var prop in o) {
 823                 if (o[prop] != UNDEFINED) {
 824                     a[prop] = {to : o[prop]};
 825                 }
 826             }
 827
 828             a.width ? a.width.to = fly(dom).adjustWidth(o.width) : a;
 829             a.height ? a.height.to = fly(dom).adjustWidth(o.height) : a;
 830
 831             if (a.x || a.y || a.xy) {
 832                 a.points = a.xy ||
 833                            {to : [ a.x ? a.x.to : fly(dom).getX(),
 834                                    a.y ? a.y.to : fly(dom).getY()]};
 835             }
 836
 837             arguments.callee.anim = fly(dom).fxanim(a,
 838                 o,
 839                 MOTION,
 840                 .35,
 841                 EASEOUT,
 842                 function(){
 843                     fly(dom).afterFx(o);
 844                 });
 845         });
 846         return this;
 847     },
 848
 849     /**
 850      * Slides the element while fading it out of view.  An anchor point can be optionally passed to set the
 851      * ending point of the effect.
 852      * Usage:
 853      *<pre><code>
 854 // default: slide the element downward while fading out
 855 el.ghost();
 856
 857 // custom: slide the element out to the right with a 2-second duration
 858 el.ghost('r', { duration: 2 });
 859
 860 // common config options shown with default values
 861 el.ghost('b', {
 862     easing: 'easeOut',
 863     duration: .5,
 864     remove: false,
 865     useDisplay: false
 866 });
 867 </code></pre>
 868      * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')
 869      * @param {Object} options (optional) Object literal with any of the Fx config options
 870      * @return {Ext.Element} The Element
 871      */
 872     ghost : function(anchor, o){
 873         o = getObject(o);
 874         var me = this,
 875             dom = me.dom,
 876             st = dom.style,
 877             a = {opacity: {to: 0}, points: {}},
 878             pt = a.points,
 879             r,
 880             w,
 881             h;
 882
 883         anchor = anchor || "b";
 884
 885         me.queueFx(o, function(){
 886             // restore values after effect
 887             r = fly(dom).getFxRestore();
 888             w = fly(dom).getWidth();
 889             h = fly(dom).getHeight();
 890
 891             function after(){
 892                 o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();
 893                 fly(dom).clearOpacity();
 894                 fly(dom).setPositioning(r.pos);
 895                 st.width = r.width;
 896                 st.height = r.height;
 897                 fly(dom).afterFx(o);
 898             }
 899
 900             pt.by = fly(dom).switchStatements(anchor.toLowerCase(), function(v1,v2){ return [v1, v2];}, {
 901                t  : [0, -h],
 902                l  : [-w, 0],
 903                r  : [w, 0],
 904                b  : [0, h],
 905                tl : [-w, -h],
 906                bl : [-w, h],
 907                br : [w, h],
 908                tr : [w, -h]
 909             });
 910
 911             arguments.callee.anim = fly(dom).fxanim(a,
 912                 o,
 913                 MOTION,
 914                 .5,
 915                 EASEOUT, after);
 916         });
 917         return me;
 918     },
 919
 920     /**
 921      * Ensures that all effects queued after syncFx is called on the element are
 922      * run concurrently.  This is the opposite of {@link #sequenceFx}.
 923      * @return {Ext.Element} The Element
 924      */
 925     syncFx : function(){
 926         var me = this;
 927         me.fxDefaults = Ext.apply(me.fxDefaults || {}, {
 928             block : FALSE,
 929             concurrent : TRUE,
 930             stopFx : FALSE
 931         });
 932         return me;
 933     },
 934
 935     /**
 936      * Ensures that all effects queued after sequenceFx is called on the element are
 937      * run in sequence.  This is the opposite of {@link #syncFx}.
 938      * @return {Ext.Element} The Element
 939      */
 940     sequenceFx : function(){
 941         var me = this;
 942         me.fxDefaults = Ext.apply(me.fxDefaults || {}, {
 943             block : FALSE,
 944             concurrent : FALSE,
 945             stopFx : FALSE
 946         });
 947         return me;
 948     },
 949
 950     /* @private */
 951     nextFx : function(){
 952         var ef = getQueue(this.dom.id)[0];
 953         if(ef){
 954             ef.call(this);
 955         }
 956     },
 957
 958     /**
 959      * Returns true if the element has any effects actively running or queued, else returns false.
 960      * @return {Boolean} True if element has active effects, else false
 961      */
 962     hasActiveFx : function(){
 963         return getQueue(this.dom.id)[0];
 964     },
 965
 966     /**
 967      * Stops any running effects and clears the element's internal effects queue if it contains
 968      * any additional effects that haven't started yet.
 969      * @return {Ext.Element} The Element
 970      */
 971     stopFx : function(finish){
 972         var me = this,
 973             id = me.dom.id;
 974         if(me.hasActiveFx()){
 975             var cur = getQueue(id)[0];
 976             if(cur && cur.anim){
 977                 if(cur.anim.isAnimated){
 978                     setQueue(id, [cur]); //clear
 979                     cur.anim.stop(finish !== undefined ? finish : TRUE);
 980                 }else{
 981                     setQueue(id, []);
 982                 }
 983             }
 984         }
 985         return me;
 986     },
 987
 988     /* @private */
 989     beforeFx : function(o){
 990         if(this.hasActiveFx() && !o.concurrent){
 991            if(o.stopFx){
 992                this.stopFx();
 993                return TRUE;
 994            }
 995            return FALSE;
 996         }
 997         return TRUE;
 998     },
 999
1000     /**
1001      * Returns true if the element is currently blocking so that no other effect can be queued
1002      * until this effect is finished, else returns false if blocking is not set.  This is commonly
1003      * used to ensure that an effect initiated by a user action runs to completion prior to the
1004      * same effect being restarted (e.g., firing only one effect even if the user clicks several times).
1005      * @return {Boolean} True if blocking, else false
1006      */
1007     hasFxBlock : function(){
1008         var q = getQueue(this.dom.id);
1009         return q && q[0] && q[0].block;
1010     },
1011
1012     /* @private */
1013     queueFx : function(o, fn){
1014         var me = fly(this.dom);
1015         if(!me.hasFxBlock()){
1016             Ext.applyIf(o, me.fxDefaults);
1017             if(!o.concurrent){
1018                 var run = me.beforeFx(o);
1019                 fn.block = o.block;
1020                 getQueue(me.dom.id).push(fn);
1021                 if(run){
1022                     me.nextFx();
1023                 }
1024             }else{
1025                 fn.call(me);
1026             }
1027         }
1028         return me;
1029     },
1030
1031     /* @private */
1032     fxWrap : function(pos, o, vis){
1033         var dom = this.dom,
1034             wrap,
1035             wrapXY;
1036         if(!o.wrap || !(wrap = Ext.getDom(o.wrap))){
1037             if(o.fixPosition){
1038                 wrapXY = fly(dom).getXY();
1039             }
1040             var div = document.createElement("div");
1041             div.style.visibility = vis;
1042             wrap = dom.parentNode.insertBefore(div, dom);
1043             fly(wrap).setPositioning(pos);
1044             if(fly(wrap).isStyle(POSITION, "static")){
1045                 fly(wrap).position("relative");
1046             }
1047             fly(dom).clearPositioning('auto');
1048             fly(wrap).clip();
1049             wrap.appendChild(dom);
1050             if(wrapXY){
1051                 fly(wrap).setXY(wrapXY);
1052             }
1053         }
1054         return wrap;
1055     },
1056
1057     /* @private */
1058     fxUnwrap : function(wrap, pos, o){
1059         var dom = this.dom;
1060         fly(dom).clearPositioning();
1061         fly(dom).setPositioning(pos);
1062         if(!o.wrap){
1063             var pn = fly(wrap).dom.parentNode;
1064             pn.insertBefore(dom, wrap);
1065             fly(wrap).remove();
1066         }
1067     },
1068
1069     /* @private */
1070     getFxRestore : function(){
1071         var st = this.dom.style;
1072         return {pos: this.getPositioning(), width: st.width, height : st.height};
1073     },
1074
1075     /* @private */
1076     afterFx : function(o){
1077         var dom = this.dom,
1078             id = dom.id;
1079         if(o.afterStyle){
1080             fly(dom).setStyle(o.afterStyle);
1081         }
1082         if(o.afterCls){
1083             fly(dom).addClass(o.afterCls);
1084         }
1085         if(o.remove == TRUE){
1086             fly(dom).remove();
1087         }
1088         if(o.callback){
1089             o.callback.call(o.scope, fly(dom));
1090         }
1091         if(!o.concurrent){
1092             getQueue(id).shift();
1093             fly(dom).nextFx();
1094         }
1095     },
1096
1097     /* @private */
1098     fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){
1099         animType = animType || 'run';
1100         opt = opt || {};
1101         var anim = Ext.lib.Anim[animType](
1102                 this.dom,
1103                 args,
1104                 (opt.duration || defaultDur) || .35,
1105                 (opt.easing || defaultEase) || EASEOUT,
1106                 cb,
1107                 this
1108             );
1109         opt.anim = anim;
1110         return anim;
1111     }
1112 };
1113
1114 // backwards compat
1115 Ext.Fx.resize = Ext.Fx.scale;
1116
1117 //When included, Ext.Fx is automatically applied to Element so that all basic
1118 //effects are available directly via the Element API
1119 Ext.Element.addMethods(Ext.Fx);
1120 })();
1121 </pre>
1122 </body>
1123 </html>