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