projects / roojs1 / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Fix #5654 - roojspacker - get it working as a doc tool...
[roojs1] / docs.old / symbols / src / Roo_Fx.js.html
diff --git a/docs.old/symbols/src/Roo_Fx.js.html b/docs.old/symbols/src/Roo_Fx.js.html
new file mode 100644 (file)
index 0000000..4e323e4
--- /dev/null
+++ b/docs.old/symbols/src/Roo_Fx.js.html
@@ -0,0 +1,1004 @@
+<html><head><title>../roojs1/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">/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * &lt;script type=&quot;text/javascript&quot;&gt;
+ */
+
+
+
+//Notifies Element that fx methods are available
+</span><span class="jsdoc-var">Roo.enableFx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
+
+</span><span class="jsdoc-comment">/**
+ * @class Roo.Fx
+ * &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
+ * to the {@link Roo.Element} interface when included, so all effects calls should be performed via Element.
+ * 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 
+ * Element effects to work.&lt;/p&gt;&lt;br/&gt;
+ *
+ * &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
+ * they return the Element object itself as the method return value, it is not always possible to mix the two in a single
+ * method chain.  The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.
+ * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately.  For this reason,
+ * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the
+ * expected results and should be done with care.&lt;/p&gt;&lt;br/&gt;
+ *
+ * &lt;p&gt;Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element
+ * that will serve as either the start or end point of the animation.  Following are all of the supported anchor positions:&lt;/p&gt;
+&lt;pre&gt;
+Value  Description
+-----  -----------------------------
+tl     The top left corner
+t      The center of the top edge
+tr     The top right corner
+l      The center of the left edge
+r      The center of the right edge
+bl     The bottom left corner
+b      The center of the bottom edge
+br     The bottom right corner
+&lt;/pre&gt;
+ * &lt;b&gt;Although some Fx methods accept specific custom config parameters, the ones shown in the Config Options section
+ * below are common options that can be passed to any Fx method.&lt;/b&gt;
+ * @cfg {Function} callback A function called when the effect is finished
+ * @cfg {Object} scope The scope of the effect function
+ * @cfg {String} easing A valid Easing value for the effect
+ * @cfg {String} afterCls A css class to apply after the effect
+ * @cfg {Number} duration The length of time (in seconds) that the effect should last
+ * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes
+ * @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 
+ * effects that end with the element being visually hidden, ignored otherwise)
+ * @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
+ * a function which returns such a specification that will be applied to the Element after the effect finishes
+ * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs
+ * @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
+ * @cfg {Boolean} stopFx Whether subsequent effects should be stopped and removed after the current effect finishes
+ */
+</span><span class="jsdoc-var">Roo.Fx </span><span class="jsdoc-syntax">= {
+       </span><span class="jsdoc-comment">/**
+        * Slides the element into view.  An anchor point can be optionally passed to set the point of
+        * origin for the slide effect.  This function automatically handles wrapping the element with
+        * a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
+        * Usage:
+        *&lt;pre&gt;&lt;code&gt;
+// default: slide the element in from the top
+el.slideIn();
+
+// custom: slide the element in from the right with a 2-second duration
+el.slideIn('r', { duration: 2 });
+
+// common config options shown with default values
+el.slideIn('t', {
+    easing: 'easeOut',
+    duration: .5
+});
+&lt;/code&gt;&lt;/pre&gt;
+        * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
+        * @param {Object} options (optional) Object literal with any of the Fx config options
+        * @return {Roo.Element} The Element
+        */
+    </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">){
+        </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">();
+        </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
+
+        </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">(){
+
+            </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">;
+
+            </span><span class="jsdoc-comment">// fix display to visibility
+            </span><span class="jsdoc-var">this.fixDisplay</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-comment">// restore values after effect
+            </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">();
+            </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">();
+            </span><span class="jsdoc-comment">// fixed size for slide
+            </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">);
+
+            </span><span class="jsdoc-comment">// wrap if needed
+            </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">);
+
+            </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">;
+            </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">;
+            </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">;
+
+            </span><span class="jsdoc-comment">// clear out temp styles after slide and unwrap
+            </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">(){
+                </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">);
+                </span><span class="jsdoc-var">st.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.width</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">st.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.height</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+            };
+            </span><span class="jsdoc-comment">// time to calc the positions
+            </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">};
+
+            </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">anchor.toLowerCase</span><span class="jsdoc-syntax">()){
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;t&quot;</span><span class="jsdoc-syntax">:
+                    </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);
+                    </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">;
+                    </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-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;l&quot;</span><span class="jsdoc-syntax">:
+                    </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">);
+                    </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">;
+                    </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-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;r&quot;</span><span class="jsdoc-syntax">:
+                    </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">);
+                    </span><span class="jsdoc-var">wrap.setX</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.right</span><span class="jsdoc-syntax">);
+                    </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">;
+                    </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">};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;b&quot;</span><span class="jsdoc-syntax">:
+                    </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);
+                    </span><span class="jsdoc-var">wrap.setY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.bottom</span><span class="jsdoc-syntax">);
+                    </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">;
+                    </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">};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;tl&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(0, 0);
+                    </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">;
+                    </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-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;bl&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(0, 0);
+                    </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">);
+                    </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">;
+                    </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">};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;br&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(0, 0);
+                    </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">]);
+                    </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">;
+                    </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">};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;tr&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(0, 0);
+                    </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">);
+                    </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">;
+                    </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">};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            }
+            </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">;
+            </span><span class="jsdoc-var">wrap.show</span><span class="jsdoc-syntax">();
+
+            </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">,
+                </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">.</span><span class="jsdoc-syntax">5,
+                </span><span class="jsdoc-string">'easeOut'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">after</span><span class="jsdoc-syntax">);
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+    
+       </span><span class="jsdoc-comment">/**
+        * Slides the element out of view.  An anchor point can be optionally passed to set the end point
+        * for the slide effect.  When the effect is completed, the element will be hidden (visibility = 
+        * 'hidden') but block elements will still take up space in the document.  The element must be removed
+        * from the DOM using the 'remove' config option if desired.  This function automatically handles 
+        * wrapping the element with a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
+        * Usage:
+        *&lt;pre&gt;&lt;code&gt;
+// default: slide the element out to the top
+el.slideOut();
+
+// custom: slide the element out to the right with a 2-second duration
+el.slideOut('r', { duration: 2 });
+
+// common config options shown with default values
+el.slideOut('t', {
+    easing: 'easeOut',
+    duration: .5,
+    remove: false,
+    useDisplay: false
+});
+&lt;/code&gt;&lt;/pre&gt;
+        * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
+        * @param {Object} options (optional) Object literal with any of the Fx config options
+        * @return {Roo.Element} The Element
+        */
+    </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">){
+        </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">();
+        </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
+
+        </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">(){
+
+            </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">;
+
+            </span><span class="jsdoc-comment">// restore values after effect
+            </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">();
+            
+            </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">();
+            </span><span class="jsdoc-comment">// fixed size for slide
+            </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">);
+
+            </span><span class="jsdoc-comment">// wrap if needed
+            </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">);
+
+            </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">;
+            </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">;
+            </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">;
+
+            </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">);
+
+            </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">(){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.useDisplay</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">el.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">el.hide</span><span class="jsdoc-syntax">();
+                }
+
+                </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">);
+
+                </span><span class="jsdoc-var">st.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.width</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">st.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.height</span><span class="jsdoc-syntax">;
+
+                </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+            };
+
+            </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};
+            </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">anchor.toLowerCase</span><span class="jsdoc-syntax">()){
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;t&quot;</span><span class="jsdoc-syntax">:
+                    </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">;
+                    </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-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;l&quot;</span><span class="jsdoc-syntax">:
+                    </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">;
+                    </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-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;r&quot;</span><span class="jsdoc-syntax">:
+                    </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">;
+                    </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">]}};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;b&quot;</span><span class="jsdoc-syntax">:
+                    </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">;
+                    </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">]}};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;tl&quot;</span><span class="jsdoc-syntax">:
+                    </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">;
+                    </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-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;bl&quot;</span><span class="jsdoc-syntax">:
+                    </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">;
+                    </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">]}};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;br&quot;</span><span class="jsdoc-syntax">:
+                    </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">;
+                    </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">]}};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;tr&quot;</span><span class="jsdoc-syntax">:
+                    </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">;
+                    </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">]}};
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            }
+
+            </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">,
+                </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">.</span><span class="jsdoc-syntax">5,
+                </span><span class="jsdoc-string">&quot;easeOut&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">after</span><span class="jsdoc-syntax">);
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">/**
+        * Fades the element out while slowly expanding it in all directions.  When the effect is completed, the 
+        * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document. 
+        * The element must be removed from the DOM using the 'remove' config option if desired.
+        * Usage:
+        *&lt;pre&gt;&lt;code&gt;
+// default
+el.puff();
+
+// common config options shown with default values
+el.puff({
+    easing: 'easeOut',
+    duration: .5,
+    remove: false,
+    useDisplay: false
+});
+&lt;/code&gt;&lt;/pre&gt;
+        * @param {Object} options (optional) Object literal with any of the Fx config options
+        * @return {Roo.Element} The Element
+        */
+    </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">){
+        </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">();
+        </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
+
+        </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">(){
+            </span><span class="jsdoc-var">this.clearOpacity</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.show</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-comment">// restore values after effect
+            </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">();
+            </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">;
+
+            </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">(){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.useDisplay</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">el.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">el.hide</span><span class="jsdoc-syntax">();
+                }
+
+                </span><span class="jsdoc-var">el.clearOpacity</span><span class="jsdoc-syntax">();
+
+                </span><span class="jsdoc-var">el.setPositioning</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.pos</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">st.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.width</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">st.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.height</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">st.fontSize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+            };
+
+            </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">();
+            </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">();
+
+            </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">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)},
+                    </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)},
+                    </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">.</span><span class="jsdoc-syntax">5), -(</span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">.</span><span class="jsdoc-syntax">5)]},
+                    </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">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">}
+                },
+                </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">.</span><span class="jsdoc-syntax">5,
+                </span><span class="jsdoc-string">&quot;easeOut&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">after</span><span class="jsdoc-syntax">);
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">/**
+        * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
+        * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still 
+        * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
+        * Usage:
+        *&lt;pre&gt;&lt;code&gt;
+// default
+el.switchOff();
+
+// all config options shown with default values
+el.switchOff({
+    easing: 'easeIn',
+    duration: .3,
+    remove: false,
+    useDisplay: false
+});
+&lt;/code&gt;&lt;/pre&gt;
+        * @param {Object} options (optional) Object literal with any of the Fx config options
+        * @return {Roo.Element} The Element
+        */
+    </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">){
+        </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">();
+        </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
+
+        </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">(){
+            </span><span class="jsdoc-var">this.clearOpacity</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.clip</span><span class="jsdoc-syntax">();
+
+            </span><span class="jsdoc-comment">// restore values after effect
+            </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">();
+            </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">;
+
+            </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">(){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.useDisplay</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">el.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">el.hide</span><span class="jsdoc-syntax">();
+                }
+
+                </span><span class="jsdoc-var">el.clearOpacity</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">el.setPositioning</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.pos</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">st.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.width</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">st.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.height</span><span class="jsdoc-syntax">;
+
+                </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</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">: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">.</span><span class="jsdoc-syntax">1, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-var">this.clearOpacity</span><span class="jsdoc-syntax">();
+                (</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                    </span><span class="jsdoc-var">this.fxanim</span><span class="jsdoc-syntax">({
+                        </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:1},
+                        </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">.</span><span class="jsdoc-syntax">5]}
+                    }, </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">);
+                })</span><span class="jsdoc-var">.defer</span><span class="jsdoc-syntax">(100, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            });
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+    </span><span class="jsdoc-comment">/**
+     * Highlights the Element by setting a color (applies to the background-color by default, but can be
+     * changed using the &quot;attr&quot; config option) and then fading back to the original color. If no original
+     * color is available, you should provide the &quot;endColor&quot; config option which will be cleared after the animation.
+     * Usage:
+&lt;pre&gt;&lt;code&gt;
+// default: highlight background to yellow
+el.highlight();
+
+// custom: highlight foreground text to blue for 2 seconds
+el.highlight(&quot;0000ff&quot;, { attr: 'color', duration: 2 });
+
+// common config options shown with default values
+el.highlight(&quot;ffff9c&quot;, {
+    attr: &quot;background-color&quot;, //can be any valid CSS property (attribute) that supports a color value
+    endColor: (current color) or &quot;ffffff&quot;,
+    easing: 'easeIn',
+    duration: 1
+});
+&lt;/code&gt;&lt;/pre&gt;
+     * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')
+     * @param {Object} options (optional) Object literal with any of the Fx config options
+     * @return {Roo.Element} The Element
+     */        
+    </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">){
+        </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">();
+        </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
+
+        </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">(){
+            </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">;
+            </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">;
+
+            </span><span class="jsdoc-var">this.clearOpacity</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.show</span><span class="jsdoc-syntax">();
+
+            </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">);
+            </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">];
+            </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">;
+
+            </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">(){
+                </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">;
+                </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+            };
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {};
+            </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">};
+            </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">,
+                </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-string">'color'</span><span class="jsdoc-syntax">,
+                1,
+                </span><span class="jsdoc-string">'easeIn'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">after</span><span class="jsdoc-syntax">);
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+   </span><span class="jsdoc-comment">/**
+    * Shows a ripple of exploding, attenuating borders to draw attention to an Element.
+    * Usage:
+&lt;pre&gt;&lt;code&gt;
+// default: a single light blue ripple
+el.frame();
+
+// custom: 3 red ripples lasting 3 seconds total
+el.frame(&quot;ff0000&quot;, 3, { duration: 3 });
+
+// common config options shown with default values
+el.frame(&quot;C3DAF9&quot;, 1, {
+    duration: 1 //duration of entire animation (not each individual ripple)
+    // Note: Easing is not configurable and will be ignored if included
+});
+&lt;/code&gt;&lt;/pre&gt;
+    * @param {String} color (optional) The color of the border.  Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').
+    * @param {Number} count (optional) The number of ripples to display (defaults to 1)
+    * @param {Object} options (optional) Object literal with any of the Fx config options
+    * @return {Roo.Element} The Element
+    */
+    </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">){
+        </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">();
+        </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
+
+        </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">(){
+            </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">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">color.length </span><span class="jsdoc-syntax">== 6){
+                </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">;
+            }
+            </span><span class="jsdoc-var">count </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">count </span><span class="jsdoc-syntax">|| 1;
+            </span><span class="jsdoc-var">duration </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.duration </span><span class="jsdoc-syntax">|| 1;
+            </span><span class="jsdoc-var">this.show</span><span class="jsdoc-syntax">();
+
+            </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">();
+            </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">(){
+                </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">({
+
+                     </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">:{
+                        </span><span class="jsdoc-var">visbility</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;hidden&quot;</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">&quot;absolute&quot;</span><span class="jsdoc-syntax">,
+                        </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
+                        </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
+                     </span><span class="jsdoc-syntax">}
+                  });
+                </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;
+                </span><span class="jsdoc-var">proxy.animate</span><span class="jsdoc-syntax">({
+                    </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},
+                    </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},
+                    </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},
+                    </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},
+                    </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">))},
+                    </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">))}
+                }, </span><span class="jsdoc-var">duration</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                    </span><span class="jsdoc-var">proxy.remove</span><span class="jsdoc-syntax">();
+                });
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(--</span><span class="jsdoc-var">count </span><span class="jsdoc-syntax">&gt; 0){
+                     </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">);
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+                }
+            };
+            </span><span class="jsdoc-var">animFn.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+   </span><span class="jsdoc-comment">/**
+    * Creates a pause before any subsequent queued effects begin.  If there are
+    * no effects queued after the pause it will have no effect.
+    * Usage:
+&lt;pre&gt;&lt;code&gt;
+el.pause(1);
+&lt;/code&gt;&lt;/pre&gt;
+    * @param {Number} seconds The length of time to pause (in seconds)
+    * @return {Roo.Element} The Element
+    */
+    </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">){
+        </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">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= {};
+
+        </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">(){
+            </span><span class="jsdoc-var">setTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+            }, </span><span class="jsdoc-var">seconds </span><span class="jsdoc-syntax">* 1000);
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+   </span><span class="jsdoc-comment">/**
+    * Fade an element in (from transparent to opaque).  The ending opacity can be specified
+    * using the &quot;endOpacity&quot; config option.
+    * Usage:
+&lt;pre&gt;&lt;code&gt;
+// default: fade in from opacity 0 to 100%
+el.fadeIn();
+
+// custom: fade in from opacity 0 to 75% over 2 seconds
+el.fadeIn({ endOpacity: .75, duration: 2});
+
+// common config options shown with default values
+el.fadeIn({
+    endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
+    easing: 'easeOut',
+    duration: .5
+});
+&lt;/code&gt;&lt;/pre&gt;
+    * @param {Object} options (optional) Object literal with any of the Fx config options
+    * @return {Roo.Element} The Element
+    */
+    </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">){
+        </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">();
+        </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
+        </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">(){
+            </span><span class="jsdoc-var">this.setOpacity</span><span class="jsdoc-syntax">(0);
+            </span><span class="jsdoc-var">this.fixDisplay</span><span class="jsdoc-syntax">();
+            </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">;
+            </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;
+            </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">}},
+                </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">.</span><span class="jsdoc-syntax">5, </span><span class="jsdoc-string">&quot;easeOut&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">to </span><span class="jsdoc-syntax">== 1){
+                    </span><span class="jsdoc-var">this.clearOpacity</span><span class="jsdoc-syntax">();
+                }
+                </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+            });
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+   </span><span class="jsdoc-comment">/**
+    * Fade an element out (from opaque to transparent).  The ending opacity can be specified
+    * using the &quot;endOpacity&quot; config option.
+    * Usage:
+&lt;pre&gt;&lt;code&gt;
+// default: fade out from the element's current opacity to 0
+el.fadeOut();
+
+// custom: fade out from the element's current opacity to 25% over 2 seconds
+el.fadeOut({ endOpacity: .25, duration: 2});
+
+// common config options shown with default values
+el.fadeOut({
+    endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
+    easing: 'easeOut',
+    duration: .5
+    remove: false,
+    useDisplay: false
+});
+&lt;/code&gt;&lt;/pre&gt;
+    * @param {Object} options (optional) Object literal with any of the Fx config options
+    * @return {Roo.Element} The Element
+    */
+    </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">){
+        </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">();
+        </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
+        </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">(){
+            </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}},
+                </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">.</span><span class="jsdoc-syntax">5, </span><span class="jsdoc-string">&quot;easeOut&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </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">){
+                     </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">;
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                     </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">;
+                }
+                </span><span class="jsdoc-var">this.clearOpacity</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+            });
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+   </span><span class="jsdoc-comment">/**
+    * Animates the transition of an element's dimensions from a starting height/width
+    * to an ending height/width.
+    * Usage:
+&lt;pre&gt;&lt;code&gt;
+// change height and width to 100x100 pixels
+el.scale(100, 100);
+
+// common config options shown with default values.  The height and width will default to
+// the element's existing values if passed as null.
+el.scale(
+    [element's width],
+    [element's height], {
+    easing: 'easeOut',
+    duration: .35
+});
+&lt;/code&gt;&lt;/pre&gt;
+    * @param {Number} width  The new width (pass undefined to keep the original width)
+    * @param {Number} height  The new height (pass undefined to keep the original height)
+    * @param {Object} options (optional) Object literal with any of the Fx config options
+    * @return {Roo.Element} The Element
+    */
+    </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">){
+        </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">, {
+            </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">h
+        </span><span class="jsdoc-syntax">}));
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+   </span><span class="jsdoc-comment">/**
+    * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
+    * Any of these properties not specified in the config object will not be changed.  This effect 
+    * requires that at least one new dimension, position or opacity setting must be passed in on
+    * the config object in order for the function to have any effect.
+    * Usage:
+&lt;pre&gt;&lt;code&gt;
+// slide the element horizontally to x position 200 while changing the height and opacity
+el.shift({ x: 200, height: 50, opacity: .8 });
+
+// common config options shown with default values.
+el.shift({
+    width: [element's width],
+    height: [element's height],
+    x: [element's x position],
+    y: [element's y position],
+    opacity: [element's opacity],
+    easing: 'easeOut',
+    duration: .35
+});
+&lt;/code&gt;&lt;/pre&gt;
+    * @param {Object} options  Object literal with any of the Fx config options
+    * @return {Roo.Element} The Element
+    */
+    </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">){
+        </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">();
+        </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
+        </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">(){
+            </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">;
+            </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">){
+                </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">)};
+            }
+            </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">){
+                </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">)};
+            }
+            </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">){
+                </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">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">(),
+                    </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">()
+                ]};
+            }
+            </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">){
+                </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">};
+            }
+            </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">){
+                </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">};
+            }
+            </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">,
+                </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">.</span><span class="jsdoc-syntax">35, </span><span class="jsdoc-string">&quot;easeOut&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+            });
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">/**
+        * Slides the element while fading it out of view.  An anchor point can be optionally passed to set the 
+        * ending point of the effect.
+        * Usage:
+        *&lt;pre&gt;&lt;code&gt;
+// default: slide the element downward while fading out
+el.ghost();
+
+// custom: slide the element out to the right with a 2-second duration
+el.ghost('r', { duration: 2 });
+
+// common config options shown with default values
+el.ghost('b', {
+    easing: 'easeOut',
+    duration: .5
+    remove: false,
+    useDisplay: false
+});
+&lt;/code&gt;&lt;/pre&gt;
+        * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')
+        * @param {Object} options (optional) Object literal with any of the Fx config options
+        * @return {Roo.Element} The Element
+        */
+    </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">){
+        </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">();
+        </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
+
+        </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">(){
+            </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">;
+
+            </span><span class="jsdoc-comment">// restore values after effect
+            </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">();
+            </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">(),
+                </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getHeight</span><span class="jsdoc-syntax">();
+
+            </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">;
+
+            </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">(){
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.useDisplay</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">el.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+                }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                    </span><span class="jsdoc-var">el.hide</span><span class="jsdoc-syntax">();
+                }
+
+                </span><span class="jsdoc-var">el.clearOpacity</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">el.setPositioning</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.pos</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-var">st.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.width</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">st.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.height</span><span class="jsdoc-syntax">;
+
+                </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
+            };
+
+            </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">;
+            </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">anchor.toLowerCase</span><span class="jsdoc-syntax">()){
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;t&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">pt.by </span><span class="jsdoc-syntax">= [0, -</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">];
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;l&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">pt.by </span><span class="jsdoc-syntax">= [-</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, 0];
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;r&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">pt.by </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, 0];
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;b&quot;</span><span class="jsdoc-syntax">:
+                    </span><span class="jsdoc-var">pt.by </span><span class="jsdoc-syntax">= [0, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">];
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;tl&quot;</span><span class="jsdoc-syntax">:
+                    </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">];
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;bl&quot;</span><span class="jsdoc-syntax">:
+                    </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">];
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;br&quot;</span><span class="jsdoc-syntax">:
+                    </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">];
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">&quot;tr&quot;</span><span class="jsdoc-syntax">:
+                    </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">];
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            }
+
+            </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">,
+                </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">.</span><span class="jsdoc-syntax">5,
+                </span><span class="jsdoc-string">&quot;easeOut&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">after</span><span class="jsdoc-syntax">);
+        });
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">/**
+        * Ensures that all effects queued after syncFx is called on the element are
+        * run concurrently.  This is the opposite of {@link #sequenceFx}.
+        * @return {Roo.Element} The Element
+        */
+    </span><span class="jsdoc-var">syncFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </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">|| {}, {
+            </span><span class="jsdoc-var">block </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">concurrent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">stopFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false
+        </span><span class="jsdoc-syntax">});
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">/**
+        * Ensures that all effects queued after sequenceFx is called on the element are
+        * run in sequence.  This is the opposite of {@link #syncFx}.
+        * @return {Roo.Element} The Element
+        */
+    </span><span class="jsdoc-var">sequenceFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </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">|| {}, {
+            </span><span class="jsdoc-var">block </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">concurrent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">stopFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false
+        </span><span class="jsdoc-syntax">});
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">/* @private */
+    </span><span class="jsdoc-var">nextFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </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];
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ef</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">ef.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+        }
+    },
+
+       </span><span class="jsdoc-comment">/**
+        * Returns true if the element has any effects actively running or queued, else returns false.
+        * @return {Boolean} True if element has active effects, else false
+        */
+    </span><span class="jsdoc-var">hasActiveFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </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];
+    },
+
+       </span><span class="jsdoc-comment">/**
+        * Stops any running effects and clears the element's internal effects queue if it contains
+        * any additional effects that haven't started yet.
+        * @return {Roo.Element} The Element
+        */
+    </span><span class="jsdoc-var">stopFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hasActiveFx</span><span class="jsdoc-syntax">()){
+            </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];
+            </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">()){
+                </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
+                </span><span class="jsdoc-var">cur.anim.stop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+            }
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">/* @private */
+    </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">){
+        </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">){
+           </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.stopFx</span><span class="jsdoc-syntax">){
+               </span><span class="jsdoc-var">this.stopFx</span><span class="jsdoc-syntax">();
+               </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
+           }
+           </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">/**
+        * Returns true if the element is currently blocking so that no other effect can be queued
+        * until this effect is finished, else returns false if blocking is not set.  This is commonly
+        * used to ensure that an effect initiated by a user action runs to completion prior to the
+        * same effect being restarted (e.g., firing only one effect even if the user clicks several times).
+        * @return {Boolean} True if blocking, else false
+        */
+    </span><span class="jsdoc-var">hasFxBlock </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </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">;
+        </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">;
+    },
+
+       </span><span class="jsdoc-comment">/* @private */
+    </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">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.fxQueue</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.fxQueue </span><span class="jsdoc-syntax">= [];
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.hasFxBlock</span><span class="jsdoc-syntax">()){
+            </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">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">o.concurrent</span><span class="jsdoc-syntax">){
+                </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">);
+                </span><span class="jsdoc-var">fn.block </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.block</span><span class="jsdoc-syntax">;
+                </span><span class="jsdoc-var">this.fxQueue.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">run</span><span class="jsdoc-syntax">){
+                    </span><span class="jsdoc-var">this.nextFx</span><span class="jsdoc-syntax">();
+                }
+            }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
+                </span><span class="jsdoc-var">fn.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+            }
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">/* @private */
+    </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">){
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">wrap</span><span class="jsdoc-syntax">;
+        </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">))){
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">wrapXY</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.fixPosition</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">wrapXY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getXY</span><span class="jsdoc-syntax">();
+            }
+            </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">);
+            </span><span class="jsdoc-var">div.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">vis</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">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">));
+            </span><span class="jsdoc-var">wrap.setPositioning</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">);
+            </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">){
+                </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">);
+            }
+            </span><span class="jsdoc-var">this.clearPositioning</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'auto'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">wrap.clip</span><span class="jsdoc-syntax">();
+            </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">);
+            </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">wrapXY</span><span class="jsdoc-syntax">){
+                </span><span class="jsdoc-var">wrap.setXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">wrapXY</span><span class="jsdoc-syntax">);
+            }
+        }
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">wrap</span><span class="jsdoc-syntax">;
+    },
+
+       </span><span class="jsdoc-comment">/* @private */
+    </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">){
+        </span><span class="jsdoc-var">this.clearPositioning</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.setPositioning</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">);
+        </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.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">);
+            </span><span class="jsdoc-var">wrap.remove</span><span class="jsdoc-syntax">();
+        }
+    },
+
+       </span><span class="jsdoc-comment">/* @private */
+    </span><span class="jsdoc-var">getFxRestore </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+        </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">;
+        </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">};
+    },
+
+       </span><span class="jsdoc-comment">/* @private */
+    </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">){
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.afterStyle</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.applyStyles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.afterStyle</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.afterCls</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.afterCls</span><span class="jsdoc-syntax">);
+        }
+        </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">){
+            </span><span class="jsdoc-var">this.remove</span><span class="jsdoc-syntax">();
+        }
+        </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">]);
+        </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">o.concurrent</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">this.fxQueue.shift</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.nextFx</span><span class="jsdoc-syntax">();
+        }
+    },
+
+       </span><span class="jsdoc-comment">/* @private */
+    </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
+        </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">);
+    },
+
+       </span><span class="jsdoc-comment">/* @private */
+    </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">){
+        </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">;
+        </span><span class="jsdoc-var">opt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">opt </span><span class="jsdoc-syntax">|| {};
+        </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">](
+            </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">,
+            (</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">.</span><span class="jsdoc-syntax">35,
+            (</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">,
+            </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
+                </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">);
+            },
+            </span><span class="jsdoc-var">this
+        </span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">opt.anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">anim</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">anim</span><span class="jsdoc-syntax">;
+    }
+};
+
+</span><span class="jsdoc-comment">// backwords compat
+</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">;
+
+</span><span class="jsdoc-comment">//When included, Roo.Fx is automatically applied to Element so that all basic
+//effects are available directly via the Element API
+</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>
\ No newline at end of file
RooJS - Version 1