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