git.roojs.org Git - roojs1/blob - docs/src/Roo_Fx.js.html

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