开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > Java编程 > JavaScript > 查看源码
Fx.js
资源名称：ext-3.1.0.zip　[点击查看]
上传用户：dawnssy
上传日期：2022-08-06
资源大小：9345k
文件大小：39k
源码类别：

JavaScript

开发平台：

JavaScript

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