X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..530ef4b6c5b943cfa68b779d11cf7de29aa878bf:/docs/source/Fx.html?ds=sidebyside diff --git a/docs/source/Fx.html b/docs/source/Fx.html index 8db99a1b..d360de6f 100644 --- a/docs/source/Fx.html +++ b/docs/source/Fx.html @@ -1,1118 +1,1123 @@ - -
-(function(){ - // contants - var NULL = null, - UNDEFINED = undefined, - TRUE = true, - FALSE = false, - SETX = "setX", - SETY = "setY", - SETXY = "setXY", - LEFT = "left", - BOTTOM = "bottom", - TOP = "top", - RIGHT = "right", - HEIGHT = "height", - WIDTH = "width", - POINTS = "points", - HIDDEN = "hidden", - ABSOLUTE = "absolute", - VISIBLE = "visible", - MOTION = "motion", - POSITION = "position", - EASEOUT = "easeOut", - /* - * Use a light flyweight here since we are using so many callbacks and are always assured a DOM element - */ - flyEl = new Ext.Element.Flyweight(), - queues = {}, - getObject = function(o){ - return o || {}; - }, - fly = function(dom){ - flyEl.dom = dom; - flyEl.id = Ext.id(dom); - return flyEl; - }, - /* - * Queueing now stored outside of the element due to closure issues - */ - getQueue = function(id){ - if(!queues[id]){ - queues[id] = []; - } - return queues[id]; - }, - setQueue = function(id, value){ - queues[id] = value; - }; - -//Notifies Element that fx methods are available -Ext.enableFx = TRUE; - -/** - * @class Ext.Fx - *- + + + +A class to provide basic animation and visual effects support. Note: This class is automatically applied - * to the {@link Ext.Element} interface when included, so all effects calls should be performed via {@link Ext.Element}. - * Conversely, since the effects are not actually defined in {@link Ext.Element}, Ext.Fx must be - * {@link Ext#enableFx included} in order for the Element effects to work.
- * - *Method Chaining
- *It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that - * they return the Element object itself as the method return value, it is not always possible to mix the two in a single - * method chain. The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced. - * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately. For this reason, - * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the - * expected results and should be done with care. Also see {@link #callback}.
- * - *Anchor Options for Motion Effects
- *Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element - * that will serve as either the start or end point of the animation. Following are all of the supported anchor positions:
--Value Description ------ ----------------------------- -tl The top left corner -t The center of the top edge -tr The top right corner -l The center of the left edge -r The center of the right edge -bl The bottom left corner -b The center of the bottom edge -br The bottom right corner -- * Note: some Fx methods accept specific custom config parameters. The options shown in the Config Options - * section below are common options that can be passed to any Fx method unless otherwise noted. - * - * @cfg {Function} callback A function called when the effect is finished. Note that effects are queued internally by the - * Fx class, so a callback is not required to specify another effect -- effects can simply be chained together - * and called in sequence (see note for Method Chaining above), for example:- * The callback is intended for any additional code that should run once a particular effect has completed. The Element - * being operated upon is passed as the first parameter. - * - * @cfg {Object} scope The scope of the {@link #callback} function - * - * @cfg {String} easing A valid Ext.lib.Easing value for the effect:- * el.slideIn().highlight(); - *
- * - * @cfg {String} afterCls A css class to apply after the effect - * @cfg {Number} duration The length of time (in seconds) that the effect should last - * - * @cfg {Number} endOpacity Only applicable for {@link #fadeIn} or {@link #fadeOut}, a number between - * 0 and 1 inclusive to configure the ending opacity value. - * - * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes - * @cfg {Boolean} useDisplay Whether to use the display CSS property instead of visibility when hiding Elements (only applies to - * effects that end with the element being visually hidden, ignored otherwise) - * @cfg {String/Object/Function} afterStyle A style specification string, e.g. "width:100px", or an object - * in the form {width:"100px"}, or a function which returns such a specification that will be applied to the - * Element after the effect finishes. - * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs - * @cfg {Boolean} concurrent Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they run in sequence - * @cfg {Boolean} stopFx Whether preceding effects should be stopped and removed before running current effect (only applies to non blocking effects) - */ -Ext.Fx = { - - // private - calls the function taking arguments from the argHash based on the key. Returns the return value of the function. - // this is useful for replacing switch statements (for example). - switchStatements : function(key, fn, argHash){ - return fn.apply(this, argHash[key]); - }, - - /** - * Slides the element into view. An anchor point can be optionally passed to set the point of - * origin for the slide effect. This function automatically handles wrapping the element with - * a fixed-size container if needed. See the Fx class overview for valid anchor point options. - * Usage: - *- *
- backBoth
- *- backIn
- *- backOut
- *- bounceBoth
- *- bounceIn
- *- bounceOut
- *- easeBoth
- *- easeBothStrong
- *- easeIn
- *- easeInStrong
- *- easeNone
- *- easeOut
- *- easeOutStrong
- *- elasticBoth
- *- elasticIn
- *- elasticOut
- *- * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't') - * @param {Object} options (optional) Object literal with any of the Fx config options - * @return {Ext.Element} The Element - */ - slideIn : function(anchor, o){ - o = getObject(o); - var me = this, - dom = me.dom, - st = dom.style, - xy, - r, - b, - wrap, - after, - st, - args, - pt, - bw, - bh; - - anchor = anchor || "t"; - - me.queueFx(o, function(){ - xy = fly(dom).getXY(); - // fix display to visibility - fly(dom).fixDisplay(); - - // restore values after effect - r = fly(dom).getFxRestore(); - b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight}; - b.right = b.x + b.width; - b.bottom = b.y + b.height; - - // fixed size for slide - fly(dom).setWidth(b.width).setHeight(b.height); - - // wrap if needed - wrap = fly(dom).fxWrap(r.pos, o, HIDDEN); - - st.visibility = VISIBLE; - st.position = ABSOLUTE; - - // clear out temp styles after slide and unwrap - function after(){ - fly(dom).fxUnwrap(wrap, r.pos, o); - st.width = r.width; - st.height = r.height; - fly(dom).afterFx(o); - } - - // time to calculate the positions - pt = {to: [b.x, b.y]}; - bw = {to: b.width}; - bh = {to: b.height}; - - function argCalc(wrap, style, ww, wh, sXY, sXYval, s1, s2, w, h, p){ - var ret = {}; - fly(wrap).setWidth(ww).setHeight(wh); - if(fly(wrap)[sXY]){ - fly(wrap)[sXY](sXYval); - } - style[s1] = style[s2] = "0"; - if(w){ - ret.width = w - }; - if(h){ - ret.height = h; - } - if(p){ - ret.points = p; - } - return ret; - }; - - args = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, { - t : [wrap, st, b.width, 0, NULL, NULL, LEFT, BOTTOM, NULL, bh, NULL], - l : [wrap, st, 0, b.height, NULL, NULL, RIGHT, TOP, bw, NULL, NULL], - r : [wrap, st, b.width, b.height, SETX, b.right, LEFT, TOP, NULL, NULL, pt], - b : [wrap, st, b.width, b.height, SETY, b.bottom, LEFT, TOP, NULL, bh, pt], - tl : [wrap, st, 0, 0, NULL, NULL, RIGHT, BOTTOM, bw, bh, pt], - bl : [wrap, st, 0, 0, SETY, b.y + b.height, RIGHT, TOP, bw, bh, pt], - br : [wrap, st, 0, 0, SETXY, [b.right, b.bottom], LEFT, TOP, bw, bh, pt], - tr : [wrap, st, 0, 0, SETX, b.x + b.width, LEFT, BOTTOM, bw, bh, pt] - }); - - st.visibility = VISIBLE; - fly(wrap).show(); - - arguments.callee.anim = fly(wrap).fxanim(args, - o, - MOTION, - .5, - EASEOUT, - after); - }); - return me; - }, - - /** - * Slides the element out of view. An anchor point can be optionally passed to set the end point - * for the slide effect. When the effect is completed, the element will be hidden (visibility = - * 'hidden') but block elements will still take up space in the document. The element must be removed - * from the DOM using the 'remove' config option if desired. This function automatically handles - * wrapping the element with a fixed-size container if needed. See the Fx class overview for valid anchor point options. - * Usage: - *-// default: slide the element in from the top -el.slideIn(); - -// custom: slide the element in from the right with a 2-second duration -el.slideIn('r', { duration: 2 }); - -// common config options shown with default values -el.slideIn('t', { - easing: 'easeOut', - duration: .5 -}); -
- * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't') - * @param {Object} options (optional) Object literal with any of the Fx config options - * @return {Ext.Element} The Element - */ - slideOut : function(anchor, o){ - o = getObject(o); - var me = this, - dom = me.dom, - st = dom.style, - xy = me.getXY(), - wrap, - r, - b, - a, - zero = {to: 0}; - - anchor = anchor || "t"; - - me.queueFx(o, function(){ - - // restore values after effect - r = fly(dom).getFxRestore(); - b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight}; - b.right = b.x + b.width; - b.bottom = b.y + b.height; - - // fixed size for slide - fly(dom).setWidth(b.width).setHeight(b.height); - - // wrap if needed - wrap = fly(dom).fxWrap(r.pos, o, VISIBLE); - - st.visibility = VISIBLE; - st.position = ABSOLUTE; - fly(wrap).setWidth(b.width).setHeight(b.height); - - function after(){ - o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); - fly(dom).fxUnwrap(wrap, r.pos, o); - st.width = r.width; - st.height = r.height; - fly(dom).afterFx(o); - } - - function argCalc(style, s1, s2, p1, v1, p2, v2, p3, v3){ - var ret = {}; - - style[s1] = style[s2] = "0"; - ret[p1] = v1; - if(p2){ - ret[p2] = v2; - } - if(p3){ - ret[p3] = v3; - } - - return ret; - }; - - a = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, { - t : [st, LEFT, BOTTOM, HEIGHT, zero], - l : [st, RIGHT, TOP, WIDTH, zero], - r : [st, LEFT, TOP, WIDTH, zero, POINTS, {to : [b.right, b.y]}], - b : [st, LEFT, TOP, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}], - tl : [st, RIGHT, BOTTOM, WIDTH, zero, HEIGHT, zero], - bl : [st, RIGHT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}], - br : [st, LEFT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x + b.width, b.bottom]}], - tr : [st, LEFT, BOTTOM, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.right, b.y]}] - }); - - arguments.callee.anim = fly(wrap).fxanim(a, - o, - MOTION, - .5, - EASEOUT, - after); - }); - return me; - }, - - /** - * Fades the element out while slowly expanding it in all directions. When the effect is completed, the - * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document. - * The element must be removed from the DOM using the 'remove' config option if desired. - * Usage: - *-// default: slide the element out to the top -el.slideOut(); - -// custom: slide the element out to the right with a 2-second duration -el.slideOut('r', { duration: 2 }); - -// common config options shown with default values -el.slideOut('t', { - easing: 'easeOut', - duration: .5, - remove: false, - useDisplay: false -}); -
- * @param {Object} options (optional) Object literal with any of the Fx config options - * @return {Ext.Element} The Element - */ - puff : function(o){ - o = getObject(o); - var me = this, - dom = me.dom, - st = dom.style, - width, - height, - r; - - me.queueFx(o, function(){ - width = fly(dom).getWidth(); - height = fly(dom).getHeight(); - fly(dom).clearOpacity(); - fly(dom).show(); - - // restore values after effect - r = fly(dom).getFxRestore(); - - function after(){ - o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); - fly(dom).clearOpacity(); - fly(dom).setPositioning(r.pos); - st.width = r.width; - st.height = r.height; - st.fontSize = ''; - fly(dom).afterFx(o); - } - - arguments.callee.anim = fly(dom).fxanim({ - width : {to : fly(dom).adjustWidth(width * 2)}, - height : {to : fly(dom).adjustHeight(height * 2)}, - points : {by : [-width * .5, -height * .5]}, - opacity : {to : 0}, - fontSize: {to : 200, unit: "%"} - }, - o, - MOTION, - .5, - EASEOUT, - after); - }); - return me; - }, - - /** - * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television). - * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still - * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired. - * Usage: - *-// default -el.puff(); - -// common config options shown with default values -el.puff({ - easing: 'easeOut', - duration: .5, - remove: false, - useDisplay: false -}); -
- * @param {Object} options (optional) Object literal with any of the Fx config options - * @return {Ext.Element} The Element - */ - switchOff : function(o){ - o = getObject(o); - var me = this, - dom = me.dom, - st = dom.style, - r; - - me.queueFx(o, function(){ - fly(dom).clearOpacity(); - fly(dom).clip(); - - // restore values after effect - r = fly(dom).getFxRestore(); - - function after(){ - o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); - fly(dom).clearOpacity(); - fly(dom).setPositioning(r.pos); - st.width = r.width; - st.height = r.height; - fly(dom).afterFx(o); - }; - - fly(dom).fxanim({opacity : {to : 0.3}}, - NULL, - NULL, - .1, - NULL, - function(){ - fly(dom).clearOpacity(); - (function(){ - fly(dom).fxanim({ - height : {to : 1}, - points : {by : [0, fly(dom).getHeight() * .5]} - }, - o, - MOTION, - 0.3, - 'easeIn', - after); - }).defer(100); - }); - }); - return me; - }, - - /** - * Highlights the Element by setting a color (applies to the background-color by default, but can be - * changed using the "attr" config option) and then fading back to the original color. If no original - * color is available, you should provide the "endColor" config option which will be cleared after the animation. - * Usage: --// default -el.switchOff(); - -// all config options shown with default values -el.switchOff({ - easing: 'easeIn', - duration: .3, - remove: false, - useDisplay: false -}); -
- * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c') - * @param {Object} options (optional) Object literal with any of the Fx config options - * @return {Ext.Element} The Element - */ - highlight : function(color, o){ - o = getObject(o); - var me = this, - dom = me.dom, - attr = o.attr || "backgroundColor", - a = {}, - restore; - - me.queueFx(o, function(){ - fly(dom).clearOpacity(); - fly(dom).show(); - - function after(){ - dom.style[attr] = restore; - fly(dom).afterFx(o); - } - restore = dom.style[attr]; - a[attr] = {from: color || "ffff9c", to: o.endColor || fly(dom).getColor(attr) || "ffffff"}; - arguments.callee.anim = fly(dom).fxanim(a, - o, - 'color', - 1, - 'easeIn', - after); - }); - return me; - }, - - /** - * Shows a ripple of exploding, attenuating borders to draw attention to an Element. - * Usage: --// default: highlight background to yellow -el.highlight(); - -// custom: highlight foreground text to blue for 2 seconds -el.highlight("0000ff", { attr: 'color', duration: 2 }); - -// common config options shown with default values -el.highlight("ffff9c", { - attr: "background-color", //can be any valid CSS property (attribute) that supports a color value - endColor: (current color) or "ffffff", - easing: 'easeIn', - duration: 1 -}); -
- * @param {String} color (optional) The color of the border. Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9'). - * @param {Number} count (optional) The number of ripples to display (defaults to 1) - * @param {Object} options (optional) Object literal with any of the Fx config options - * @return {Ext.Element} The Element - */ - frame : function(color, count, o){ - o = getObject(o); - var me = this, - dom = me.dom, - proxy, - active; - - me.queueFx(o, function(){ - color = color || "#C3DAF9" - if(color.length == 6){ - color = "#" + color; - } - count = count || 1; - fly(dom).show(); - - var xy = fly(dom).getXY(), - b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight}, - queue = function(){ - proxy = fly(document.body || document.documentElement).createChild({ - style:{ - visbility: HIDDEN, - position : ABSOLUTE, - "z-index": 35000, // yee haw - border : "0px solid " + color - } - }); - return proxy.queueFx({}, animFn); - }; - - - arguments.callee.anim = { - isAnimated: true, - stop: function() { - count = 0; - proxy.stopFx(); - } - }; - - function animFn(){ - var scale = Ext.isBorderBox ? 2 : 1; - active = proxy.anim({ - top : {from : b.y, to : b.y - 20}, - left : {from : b.x, to : b.x - 20}, - borderWidth : {from : 0, to : 10}, - opacity : {from : 1, to : 0}, - height : {from : b.height, to : b.height + 20 * scale}, - width : {from : b.width, to : b.width + 20 * scale} - },{ - duration: o.duration || 1, - callback: function() { - proxy.remove(); - --count > 0 ? queue() : fly(dom).afterFx(o); - } - }); - arguments.callee.anim = { - isAnimated: true, - stop: function(){ - active.stop(); - } - }; - }; - queue(); - }); - return me; - }, - - /** - * Creates a pause before any subsequent queued effects begin. If there are - * no effects queued after the pause it will have no effect. - * Usage: --// default: a single light blue ripple -el.frame(); - -// custom: 3 red ripples lasting 3 seconds total -el.frame("ff0000", 3, { duration: 3 }); - -// common config options shown with default values -el.frame("C3DAF9", 1, { - duration: 1 //duration of each individual ripple. - // Note: Easing is not configurable and will be ignored if included -}); -
- * @param {Number} seconds The length of time to pause (in seconds) - * @return {Ext.Element} The Element - */ - pause : function(seconds){ - var dom = this.dom, - t; - - this.queueFx({}, function(){ - t = setTimeout(function(){ - fly(dom).afterFx({}); - }, seconds * 1000); - arguments.callee.anim = { - isAnimated: true, - stop: function(){ - clearTimeout(t); - fly(dom).afterFx({}); - } - }; - }); - return this; - }, - - /** - * Fade an element in (from transparent to opaque). The ending opacity can be specified - * using the {@link #endOpacity} config option. - * Usage: --el.pause(1); -
- * @param {Object} options (optional) Object literal with any of the Fx config options - * @return {Ext.Element} The Element - */ - fadeIn : function(o){ - o = getObject(o); - var me = this, - dom = me.dom, - to = o.endOpacity || 1; - - me.queueFx(o, function(){ - fly(dom).setOpacity(0); - fly(dom).fixDisplay(); - dom.style.visibility = VISIBLE; - arguments.callee.anim = fly(dom).fxanim({opacity:{to:to}}, - o, NULL, .5, EASEOUT, function(){ - if(to == 1){ - fly(dom).clearOpacity(); - } - fly(dom).afterFx(o); - }); - }); - return me; - }, - - /** - * Fade an element out (from opaque to transparent). The ending opacity can be specified - * using the {@link #endOpacity} config option. Note that IE may require - * {@link #useDisplay}:true in order to redisplay correctly. - * Usage: --// default: fade in from opacity 0 to 100% -el.fadeIn(); - -// custom: fade in from opacity 0 to 75% over 2 seconds -el.fadeIn({ endOpacity: .75, duration: 2}); - -// common config options shown with default values -el.fadeIn({ - endOpacity: 1, //can be any value between 0 and 1 (e.g. .5) - easing: 'easeOut', - duration: .5 -}); -
- * @param {Object} options (optional) Object literal with any of the Fx config options - * @return {Ext.Element} The Element - */ - fadeOut : function(o){ - o = getObject(o); - var me = this, - dom = me.dom, - style = dom.style, - to = o.endOpacity || 0; - - me.queueFx(o, function(){ - arguments.callee.anim = fly(dom).fxanim({ - opacity : {to : to}}, - o, - NULL, - .5, - EASEOUT, - function(){ - if(to == 0){ - Ext.Element.data(dom, 'visibilityMode') == Ext.Element.DISPLAY || o.useDisplay ? - style.display = "none" : - style.visibility = HIDDEN; - - fly(dom).clearOpacity(); - } - fly(dom).afterFx(o); - }); - }); - return me; - }, - - /** - * Animates the transition of an element's dimensions from a starting height/width - * to an ending height/width. This method is a convenience implementation of {@link shift}. - * Usage: --// default: fade out from the element's current opacity to 0 -el.fadeOut(); - -// custom: fade out from the element's current opacity to 25% over 2 seconds -el.fadeOut({ endOpacity: .25, duration: 2}); - -// common config options shown with default values -el.fadeOut({ - endOpacity: 0, //can be any value between 0 and 1 (e.g. .5) - easing: 'easeOut', - duration: .5, - remove: false, - useDisplay: false -}); -
- * @param {Number} width The new width (pass undefined to keep the original width) - * @param {Number} height The new height (pass undefined to keep the original height) - * @param {Object} options (optional) Object literal with any of the Fx config options - * @return {Ext.Element} The Element - */ - scale : function(w, h, o){ - this.shift(Ext.apply({}, o, { - width: w, - height: h - })); - return this; - }, - - /** - * Animates the transition of any combination of an element's dimensions, xy position and/or opacity. - * Any of these properties not specified in the config object will not be changed. This effect - * requires that at least one new dimension, position or opacity setting must be passed in on - * the config object in order for the function to have any effect. - * Usage: --// change height and width to 100x100 pixels -el.scale(100, 100); - -// common config options shown with default values. The height and width will default to -// the element's existing values if passed as null. -el.scale( - [element's width], - [element's height], { - easing: 'easeOut', - duration: .35 - } -); -
- * @param {Object} options Object literal with any of the Fx config options - * @return {Ext.Element} The Element - */ - shift : function(o){ - o = getObject(o); - var dom = this.dom, - a = {}; - - this.queueFx(o, function(){ - for (var prop in o) { - if (o[prop] != UNDEFINED) { - a[prop] = {to : o[prop]}; - } - } - - a.width ? a.width.to = fly(dom).adjustWidth(o.width) : a; - a.height ? a.height.to = fly(dom).adjustWidth(o.height) : a; - - if (a.x || a.y || a.xy) { - a.points = a.xy || - {to : [ a.x ? a.x.to : fly(dom).getX(), - a.y ? a.y.to : fly(dom).getY()]}; - } - - arguments.callee.anim = fly(dom).fxanim(a, - o, - MOTION, - .35, - EASEOUT, - function(){ - fly(dom).afterFx(o); - }); - }); - return this; - }, - - /** - * Slides the element while fading it out of view. An anchor point can be optionally passed to set the - * ending point of the effect. - * Usage: - *-// slide the element horizontally to x position 200 while changing the height and opacity -el.shift({ x: 200, height: 50, opacity: .8 }); - -// common config options shown with default values. -el.shift({ - width: [element's width], - height: [element's height], - x: [element's x position], - y: [element's y position], - opacity: [element's opacity], - easing: 'easeOut', - duration: .35 -}); -
- * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b') - * @param {Object} options (optional) Object literal with any of the Fx config options - * @return {Ext.Element} The Element - */ - ghost : function(anchor, o){ - o = getObject(o); - var me = this, - dom = me.dom, - st = dom.style, - a = {opacity: {to: 0}, points: {}}, - pt = a.points, - r, - w, - h; - - anchor = anchor || "b"; - - me.queueFx(o, function(){ - // restore values after effect - r = fly(dom).getFxRestore(); - w = fly(dom).getWidth(); - h = fly(dom).getHeight(); - - function after(){ - o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); - fly(dom).clearOpacity(); - fly(dom).setPositioning(r.pos); - st.width = r.width; - st.height = r.height; - fly(dom).afterFx(o); - } - - pt.by = fly(dom).switchStatements(anchor.toLowerCase(), function(v1,v2){ return [v1, v2];}, { - t : [0, -h], - l : [-w, 0], - r : [w, 0], - b : [0, h], - tl : [-w, -h], - bl : [-w, h], - br : [w, h], - tr : [w, -h] - }); - - arguments.callee.anim = fly(dom).fxanim(a, - o, - MOTION, - .5, - EASEOUT, after); - }); - return me; - }, - - /** - * Ensures that all effects queued after syncFx is called on the element are - * run concurrently. This is the opposite of {@link #sequenceFx}. - * @return {Ext.Element} The Element - */ - syncFx : function(){ - var me = this; - me.fxDefaults = Ext.apply(me.fxDefaults || {}, { - block : FALSE, - concurrent : TRUE, - stopFx : FALSE - }); - return me; - }, - - /** - * Ensures that all effects queued after sequenceFx is called on the element are - * run in sequence. This is the opposite of {@link #syncFx}. - * @return {Ext.Element} The Element - */ - sequenceFx : function(){ - var me = this; - me.fxDefaults = Ext.apply(me.fxDefaults || {}, { - block : FALSE, - concurrent : FALSE, - stopFx : FALSE - }); - return me; - }, - - /* @private */ - nextFx : function(){ - var ef = getQueue(this.dom.id)[0]; - if(ef){ - ef.call(this); - } - }, - - /** - * Returns true if the element has any effects actively running or queued, else returns false. - * @return {Boolean} True if element has active effects, else false - */ - hasActiveFx : function(){ - return getQueue(this.dom.id)[0]; - }, - - /** - * Stops any running effects and clears the element's internal effects queue if it contains - * any additional effects that haven't started yet. - * @return {Ext.Element} The Element - */ - stopFx : function(finish){ - var me = this, - id = me.dom.id; - if(me.hasActiveFx()){ - var cur = getQueue(id)[0]; - if(cur && cur.anim){ - if(cur.anim.isAnimated){ - setQueue(id, [cur]); //clear - cur.anim.stop(finish !== undefined ? finish : TRUE); - }else{ - setQueue(id, []); - } - } - } - return me; - }, - - /* @private */ - beforeFx : function(o){ - if(this.hasActiveFx() && !o.concurrent){ - if(o.stopFx){ - this.stopFx(); - return TRUE; - } - return FALSE; - } - return TRUE; - }, - - /** - * Returns true if the element is currently blocking so that no other effect can be queued - * until this effect is finished, else returns false if blocking is not set. This is commonly - * used to ensure that an effect initiated by a user action runs to completion prior to the - * same effect being restarted (e.g., firing only one effect even if the user clicks several times). - * @return {Boolean} True if blocking, else false - */ - hasFxBlock : function(){ - var q = getQueue(this.dom.id); - return q && q[0] && q[0].block; - }, - - /* @private */ - queueFx : function(o, fn){ - var me = this; - if(!me.hasFxBlock()){ - Ext.applyIf(o, me.fxDefaults); - if(!o.concurrent){ - var run = me.beforeFx(o); - fn.block = o.block; - getQueue(me.dom.id).push(fn); - if(run){ - me.nextFx(); - } - }else{ - fn.call(me); - } - } - return me; - }, - - /* @private */ - fxWrap : function(pos, o, vis){ - var dom = this.dom, - wrap, - wrapXY; - if(!o.wrap || !(wrap = Ext.getDom(o.wrap))){ - if(o.fixPosition){ - wrapXY = fly(dom).getXY(); - } - var div = document.createElement("div"); - div.style.visibility = vis; - wrap = dom.parentNode.insertBefore(div, dom); - fly(wrap).setPositioning(pos); - if(fly(wrap).isStyle(POSITION, "static")){ - fly(wrap).position("relative"); - } - fly(dom).clearPositioning('auto'); - fly(wrap).clip(); - wrap.appendChild(dom); - if(wrapXY){ - fly(wrap).setXY(wrapXY); - } - } - return wrap; - }, - - /* @private */ - fxUnwrap : function(wrap, pos, o){ - var dom = this.dom; - fly(dom).clearPositioning(); - fly(dom).setPositioning(pos); - if(!o.wrap){ - wrap.parentNode.insertBefore(dom, wrap); - fly(wrap).remove(); - } - }, - - /* @private */ - getFxRestore : function(){ - var st = this.dom.style; - return {pos: this.getPositioning(), width: st.width, height : st.height}; - }, - - /* @private */ - afterFx : function(o){ - var dom = this.dom, - id = dom.id, - notConcurrent = !o.concurrent; - if(o.afterStyle){ - fly(dom).setStyle(o.afterStyle); - } - if(o.afterCls){ - fly(dom).addClass(o.afterCls); - } - if(o.remove == TRUE){ - fly(dom).remove(); - } - if(notConcurrent){ - getQueue(id).shift(); - } - if(o.callback){ - o.callback.call(o.scope, fly(dom)); - } - if(notConcurrent){ - fly(dom).nextFx(); - } - }, - - /* @private */ - fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){ - animType = animType || 'run'; - opt = opt || {}; - var anim = Ext.lib.Anim[animType]( - this.dom, - args, - (opt.duration || defaultDur) || .35, - (opt.easing || defaultEase) || EASEOUT, - cb, - this - ); - opt.anim = anim; - return anim; - } -}; - -// backwards compat -Ext.Fx.resize = Ext.Fx.scale; - -//When included, Ext.Fx is automatically applied to Element so that all basic -//effects are available directly via the Element API -Ext.Element.addMethods(Ext.Fx); -})();-// default: slide the element downward while fading out -el.ghost(); - -// custom: slide the element out to the right with a 2-second duration -el.ghost('r', { duration: 2 }); - -// common config options shown with default values -el.ghost('b', { - easing: 'easeOut', - duration: .5, - remove: false, - useDisplay: false -}); -
/*! + * Ext JS Library 3.2.1 + * Copyright(c) 2006-2010 Ext JS, Inc. + * licensing@extjs.com + * http://www.extjs.com/license + */ +(function(){ + // contants + var NULL = null, + UNDEFINED = undefined, + TRUE = true, + FALSE = false, + SETX = "setX", + SETY = "setY", + SETXY = "setXY", + LEFT = "left", + BOTTOM = "bottom", + TOP = "top", + RIGHT = "right", + HEIGHT = "height", + WIDTH = "width", + POINTS = "points", + HIDDEN = "hidden", + ABSOLUTE = "absolute", + VISIBLE = "visible", + MOTION = "motion", + POSITION = "position", + EASEOUT = "easeOut", + /* + * Use a light flyweight here since we are using so many callbacks and are always assured a DOM element + */ + flyEl = new Ext.Element.Flyweight(), + queues = {}, + getObject = function(o){ + return o || {}; + }, + fly = function(dom){ + flyEl.dom = dom; + flyEl.id = Ext.id(dom); + return flyEl; + }, + /* + * Queueing now stored outside of the element due to closure issues + */ + getQueue = function(id){ + if(!queues[id]){ + queues[id] = []; + } + return queues[id]; + }, + setQueue = function(id, value){ + queues[id] = value; + }; + +//Notifies Element that fx methods are available +Ext.enableFx = TRUE; + +/** + * @class Ext.Fx + *+ \ No newline at end of fileA class to provide basic animation and visual effects support. Note: This class is automatically applied + * to the {@link Ext.Element} interface when included, so all effects calls should be performed via {@link Ext.Element}. + * Conversely, since the effects are not actually defined in {@link Ext.Element}, Ext.Fx must be + * {@link Ext#enableFx included} in order for the Element effects to work.
+ * + *Method Chaining
+ *It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that + * they return the Element object itself as the method return value, it is not always possible to mix the two in a single + * method chain. The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced. + * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately. For this reason, + * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the + * expected results and should be done with care. Also see {@link #callback}.
+ * + *Anchor Options for Motion Effects
+ *Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element + * that will serve as either the start or end point of the animation. Following are all of the supported anchor positions:
++Value Description +----- ----------------------------- +tl The top left corner +t The center of the top edge +tr The top right corner +l The center of the left edge +r The center of the right edge +bl The bottom left corner +b The center of the bottom edge +br The bottom right corner ++ * Note: some Fx methods accept specific custom config parameters. The options shown in the Config Options + * section below are common options that can be passed to any Fx method unless otherwise noted. + * + * @cfg {Function} callback A function called when the effect is finished. Note that effects are queued internally by the + * Fx class, so a callback is not required to specify another effect -- effects can simply be chained together + * and called in sequence (see note for Method Chaining above), for example:+ * The callback is intended for any additional code that should run once a particular effect has completed. The Element + * being operated upon is passed as the first parameter. + * + * @cfg {Object} scope The scope (+ * el.slideIn().highlight(); + *
this
reference) in which the {@link #callback} function is executed. Defaults to the browser window. + * + * @cfg {String} easing A valid Ext.lib.Easing value for the effect:+ * + * @cfg {String} afterCls A css class to apply after the effect + * @cfg {Number} duration The length of time (in seconds) that the effect should last + * + * @cfg {Number} endOpacity Only applicable for {@link #fadeIn} or {@link #fadeOut}, a number between + * 0 and 1 inclusive to configure the ending opacity value. + * + * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes + * @cfg {Boolean} useDisplay Whether to use the display CSS property instead of visibility when hiding Elements (only applies to + * effects that end with the element being visually hidden, ignored otherwise) + * @cfg {String/Object/Function} afterStyle A style specification string, e.g. "width:100px", or an object + * in the form {width:"100px"}, or a function which returns such a specification that will be applied to the + * Element after the effect finishes. + * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs + * @cfg {Boolean} concurrent Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they run in sequence + * @cfg {Boolean} stopFx Whether preceding effects should be stopped and removed before running current effect (only applies to non blocking effects) + */ +Ext.Fx = { + + // private - calls the function taking arguments from the argHash based on the key. Returns the return value of the function. + // this is useful for replacing switch statements (for example). + switchStatements : function(key, fn, argHash){ + return fn.apply(this, argHash[key]); + }, + + /** + * Slides the element into view. An anchor point can be optionally passed to set the point of + * origin for the slide effect. This function automatically handles wrapping the element with + * a fixed-size container if needed. See the Fx class overview for valid anchor point options. + * Usage: + *+ *
- backBoth
+ *- backIn
+ *- backOut
+ *- bounceBoth
+ *- bounceIn
+ *- bounceOut
+ *- easeBoth
+ *- easeBothStrong
+ *- easeIn
+ *- easeInStrong
+ *- easeNone
+ *- easeOut
+ *- easeOutStrong
+ *- elasticBoth
+ *- elasticIn
+ *- elasticOut
+ *+ * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't') + * @param {Object} options (optional) Object literal with any of the Fx config options + * @return {Ext.Element} The Element + */ + slideIn : function(anchor, o){ + o = getObject(o); + var me = this, + dom = me.dom, + st = dom.style, + xy, + r, + b, + wrap, + after, + st, + args, + pt, + bw, + bh; + + anchor = anchor || "t"; + + me.queueFx(o, function(){ + xy = fly(dom).getXY(); + // fix display to visibility + fly(dom).fixDisplay(); + + // restore values after effect + r = fly(dom).getFxRestore(); + b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight}; + b.right = b.x + b.width; + b.bottom = b.y + b.height; + + // fixed size for slide + fly(dom).setWidth(b.width).setHeight(b.height); + + // wrap if needed + wrap = fly(dom).fxWrap(r.pos, o, HIDDEN); + + st.visibility = VISIBLE; + st.position = ABSOLUTE; + + // clear out temp styles after slide and unwrap + function after(){ + fly(dom).fxUnwrap(wrap, r.pos, o); + st.width = r.width; + st.height = r.height; + fly(dom).afterFx(o); + } + + // time to calculate the positions + pt = {to: [b.x, b.y]}; + bw = {to: b.width}; + bh = {to: b.height}; + + function argCalc(wrap, style, ww, wh, sXY, sXYval, s1, s2, w, h, p){ + var ret = {}; + fly(wrap).setWidth(ww).setHeight(wh); + if(fly(wrap)[sXY]){ + fly(wrap)[sXY](sXYval); + } + style[s1] = style[s2] = "0"; + if(w){ + ret.width = w + }; + if(h){ + ret.height = h; + } + if(p){ + ret.points = p; + } + return ret; + }; + + args = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, { + t : [wrap, st, b.width, 0, NULL, NULL, LEFT, BOTTOM, NULL, bh, NULL], + l : [wrap, st, 0, b.height, NULL, NULL, RIGHT, TOP, bw, NULL, NULL], + r : [wrap, st, b.width, b.height, SETX, b.right, LEFT, TOP, NULL, NULL, pt], + b : [wrap, st, b.width, b.height, SETY, b.bottom, LEFT, TOP, NULL, bh, pt], + tl : [wrap, st, 0, 0, NULL, NULL, RIGHT, BOTTOM, bw, bh, pt], + bl : [wrap, st, 0, 0, SETY, b.y + b.height, RIGHT, TOP, bw, bh, pt], + br : [wrap, st, 0, 0, SETXY, [b.right, b.bottom], LEFT, TOP, bw, bh, pt], + tr : [wrap, st, 0, 0, SETX, b.x + b.width, LEFT, BOTTOM, bw, bh, pt] + }); + + st.visibility = VISIBLE; + fly(wrap).show(); + + arguments.callee.anim = fly(wrap).fxanim(args, + o, + MOTION, + .5, + EASEOUT, + after); + }); + return me; + }, + + /** + * Slides the element out of view. An anchor point can be optionally passed to set the end point + * for the slide effect. When the effect is completed, the element will be hidden (visibility = + * 'hidden') but block elements will still take up space in the document. The element must be removed + * from the DOM using the 'remove' config option if desired. This function automatically handles + * wrapping the element with a fixed-size container if needed. See the Fx class overview for valid anchor point options. + * Usage: + *+// default: slide the element in from the top +el.slideIn(); + +// custom: slide the element in from the right with a 2-second duration +el.slideIn('r', { duration: 2 }); + +// common config options shown with default values +el.slideIn('t', { + easing: 'easeOut', + duration: .5 +}); +
+ * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't') + * @param {Object} options (optional) Object literal with any of the Fx config options + * @return {Ext.Element} The Element + */ + slideOut : function(anchor, o){ + o = getObject(o); + var me = this, + dom = me.dom, + st = dom.style, + xy = me.getXY(), + wrap, + r, + b, + a, + zero = {to: 0}; + + anchor = anchor || "t"; + + me.queueFx(o, function(){ + + // restore values after effect + r = fly(dom).getFxRestore(); + b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight}; + b.right = b.x + b.width; + b.bottom = b.y + b.height; + + // fixed size for slide + fly(dom).setWidth(b.width).setHeight(b.height); + + // wrap if needed + wrap = fly(dom).fxWrap(r.pos, o, VISIBLE); + + st.visibility = VISIBLE; + st.position = ABSOLUTE; + fly(wrap).setWidth(b.width).setHeight(b.height); + + function after(){ + o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); + fly(dom).fxUnwrap(wrap, r.pos, o); + st.width = r.width; + st.height = r.height; + fly(dom).afterFx(o); + } + + function argCalc(style, s1, s2, p1, v1, p2, v2, p3, v3){ + var ret = {}; + + style[s1] = style[s2] = "0"; + ret[p1] = v1; + if(p2){ + ret[p2] = v2; + } + if(p3){ + ret[p3] = v3; + } + + return ret; + }; + + a = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, { + t : [st, LEFT, BOTTOM, HEIGHT, zero], + l : [st, RIGHT, TOP, WIDTH, zero], + r : [st, LEFT, TOP, WIDTH, zero, POINTS, {to : [b.right, b.y]}], + b : [st, LEFT, TOP, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}], + tl : [st, RIGHT, BOTTOM, WIDTH, zero, HEIGHT, zero], + bl : [st, RIGHT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}], + br : [st, LEFT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x + b.width, b.bottom]}], + tr : [st, LEFT, BOTTOM, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.right, b.y]}] + }); + + arguments.callee.anim = fly(wrap).fxanim(a, + o, + MOTION, + .5, + EASEOUT, + after); + }); + return me; + }, + + /** + * Fades the element out while slowly expanding it in all directions. When the effect is completed, the + * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document. + * The element must be removed from the DOM using the 'remove' config option if desired. + * Usage: + *+// default: slide the element out to the top +el.slideOut(); + +// custom: slide the element out to the right with a 2-second duration +el.slideOut('r', { duration: 2 }); + +// common config options shown with default values +el.slideOut('t', { + easing: 'easeOut', + duration: .5, + remove: false, + useDisplay: false +}); +
+ * @param {Object} options (optional) Object literal with any of the Fx config options + * @return {Ext.Element} The Element + */ + puff : function(o){ + o = getObject(o); + var me = this, + dom = me.dom, + st = dom.style, + width, + height, + r; + + me.queueFx(o, function(){ + width = fly(dom).getWidth(); + height = fly(dom).getHeight(); + fly(dom).clearOpacity(); + fly(dom).show(); + + // restore values after effect + r = fly(dom).getFxRestore(); + + function after(){ + o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); + fly(dom).clearOpacity(); + fly(dom).setPositioning(r.pos); + st.width = r.width; + st.height = r.height; + st.fontSize = ''; + fly(dom).afterFx(o); + } + + arguments.callee.anim = fly(dom).fxanim({ + width : {to : fly(dom).adjustWidth(width * 2)}, + height : {to : fly(dom).adjustHeight(height * 2)}, + points : {by : [-width * .5, -height * .5]}, + opacity : {to : 0}, + fontSize: {to : 200, unit: "%"} + }, + o, + MOTION, + .5, + EASEOUT, + after); + }); + return me; + }, + + /** + * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television). + * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still + * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired. + * Usage: + *+// default +el.puff(); + +// common config options shown with default values +el.puff({ + easing: 'easeOut', + duration: .5, + remove: false, + useDisplay: false +}); +
+ * @param {Object} options (optional) Object literal with any of the Fx config options + * @return {Ext.Element} The Element + */ + switchOff : function(o){ + o = getObject(o); + var me = this, + dom = me.dom, + st = dom.style, + r; + + me.queueFx(o, function(){ + fly(dom).clearOpacity(); + fly(dom).clip(); + + // restore values after effect + r = fly(dom).getFxRestore(); + + function after(){ + o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); + fly(dom).clearOpacity(); + fly(dom).setPositioning(r.pos); + st.width = r.width; + st.height = r.height; + fly(dom).afterFx(o); + }; + + fly(dom).fxanim({opacity : {to : 0.3}}, + NULL, + NULL, + .1, + NULL, + function(){ + fly(dom).clearOpacity(); + (function(){ + fly(dom).fxanim({ + height : {to : 1}, + points : {by : [0, fly(dom).getHeight() * .5]} + }, + o, + MOTION, + 0.3, + 'easeIn', + after); + }).defer(100); + }); + }); + return me; + }, + + /** + * Highlights the Element by setting a color (applies to the background-color by default, but can be + * changed using the "attr" config option) and then fading back to the original color. If no original + * color is available, you should provide the "endColor" config option which will be cleared after the animation. + * Usage: ++// default +el.switchOff(); + +// all config options shown with default values +el.switchOff({ + easing: 'easeIn', + duration: .3, + remove: false, + useDisplay: false +}); +
+ * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c') + * @param {Object} options (optional) Object literal with any of the Fx config options + * @return {Ext.Element} The Element + */ + highlight : function(color, o){ + o = getObject(o); + var me = this, + dom = me.dom, + attr = o.attr || "backgroundColor", + a = {}, + restore; + + me.queueFx(o, function(){ + fly(dom).clearOpacity(); + fly(dom).show(); + + function after(){ + dom.style[attr] = restore; + fly(dom).afterFx(o); + } + restore = dom.style[attr]; + a[attr] = {from: color || "ffff9c", to: o.endColor || fly(dom).getColor(attr) || "ffffff"}; + arguments.callee.anim = fly(dom).fxanim(a, + o, + 'color', + 1, + 'easeIn', + after); + }); + return me; + }, + + /** + * Shows a ripple of exploding, attenuating borders to draw attention to an Element. + * Usage: ++// default: highlight background to yellow +el.highlight(); + +// custom: highlight foreground text to blue for 2 seconds +el.highlight("0000ff", { attr: 'color', duration: 2 }); + +// common config options shown with default values +el.highlight("ffff9c", { + attr: "background-color", //can be any valid CSS property (attribute) that supports a color value + endColor: (current color) or "ffffff", + easing: 'easeIn', + duration: 1 +}); +
+ * @param {String} color (optional) The color of the border. Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9'). + * @param {Number} count (optional) The number of ripples to display (defaults to 1) + * @param {Object} options (optional) Object literal with any of the Fx config options + * @return {Ext.Element} The Element + */ + frame : function(color, count, o){ + o = getObject(o); + var me = this, + dom = me.dom, + proxy, + active; + + me.queueFx(o, function(){ + color = color || '#C3DAF9'; + if(color.length == 6){ + color = '#' + color; + } + count = count || 1; + fly(dom).show(); + + var xy = fly(dom).getXY(), + b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight}, + queue = function(){ + proxy = fly(document.body || document.documentElement).createChild({ + style:{ + position : ABSOLUTE, + 'z-index': 35000, // yee haw + border : '0px solid ' + color + } + }); + return proxy.queueFx({}, animFn); + }; + + + arguments.callee.anim = { + isAnimated: true, + stop: function() { + count = 0; + proxy.stopFx(); + } + }; + + function animFn(){ + var scale = Ext.isBorderBox ? 2 : 1; + active = proxy.anim({ + top : {from : b.y, to : b.y - 20}, + left : {from : b.x, to : b.x - 20}, + borderWidth : {from : 0, to : 10}, + opacity : {from : 1, to : 0}, + height : {from : b.height, to : b.height + 20 * scale}, + width : {from : b.width, to : b.width + 20 * scale} + },{ + duration: o.duration || 1, + callback: function() { + proxy.remove(); + --count > 0 ? queue() : fly(dom).afterFx(o); + } + }); + arguments.callee.anim = { + isAnimated: true, + stop: function(){ + active.stop(); + } + }; + }; + queue(); + }); + return me; + }, + + /** + * Creates a pause before any subsequent queued effects begin. If there are + * no effects queued after the pause it will have no effect. + * Usage: ++// default: a single light blue ripple +el.frame(); + +// custom: 3 red ripples lasting 3 seconds total +el.frame("ff0000", 3, { duration: 3 }); + +// common config options shown with default values +el.frame("C3DAF9", 1, { + duration: 1 //duration of each individual ripple. + // Note: Easing is not configurable and will be ignored if included +}); +
+ * @param {Number} seconds The length of time to pause (in seconds) + * @return {Ext.Element} The Element + */ + pause : function(seconds){ + var dom = this.dom, + t; + + this.queueFx({}, function(){ + t = setTimeout(function(){ + fly(dom).afterFx({}); + }, seconds * 1000); + arguments.callee.anim = { + isAnimated: true, + stop: function(){ + clearTimeout(t); + fly(dom).afterFx({}); + } + }; + }); + return this; + }, + + /** + * Fade an element in (from transparent to opaque). The ending opacity can be specified + * using the {@link #endOpacity} config option. + * Usage: ++el.pause(1); +
+ * @param {Object} options (optional) Object literal with any of the Fx config options + * @return {Ext.Element} The Element + */ + fadeIn : function(o){ + o = getObject(o); + var me = this, + dom = me.dom, + to = o.endOpacity || 1; + + me.queueFx(o, function(){ + fly(dom).setOpacity(0); + fly(dom).fixDisplay(); + dom.style.visibility = VISIBLE; + arguments.callee.anim = fly(dom).fxanim({opacity:{to:to}}, + o, NULL, .5, EASEOUT, function(){ + if(to == 1){ + fly(dom).clearOpacity(); + } + fly(dom).afterFx(o); + }); + }); + return me; + }, + + /** + * Fade an element out (from opaque to transparent). The ending opacity can be specified + * using the {@link #endOpacity} config option. Note that IE may require + * {@link #useDisplay}:true in order to redisplay correctly. + * Usage: ++// default: fade in from opacity 0 to 100% +el.fadeIn(); + +// custom: fade in from opacity 0 to 75% over 2 seconds +el.fadeIn({ endOpacity: .75, duration: 2}); + +// common config options shown with default values +el.fadeIn({ + endOpacity: 1, //can be any value between 0 and 1 (e.g. .5) + easing: 'easeOut', + duration: .5 +}); +
+ * @param {Object} options (optional) Object literal with any of the Fx config options + * @return {Ext.Element} The Element + */ + fadeOut : function(o){ + o = getObject(o); + var me = this, + dom = me.dom, + style = dom.style, + to = o.endOpacity || 0; + + me.queueFx(o, function(){ + arguments.callee.anim = fly(dom).fxanim({ + opacity : {to : to}}, + o, + NULL, + .5, + EASEOUT, + function(){ + if(to == 0){ + Ext.Element.data(dom, 'visibilityMode') == Ext.Element.DISPLAY || o.useDisplay ? + style.display = "none" : + style.visibility = HIDDEN; + + fly(dom).clearOpacity(); + } + fly(dom).afterFx(o); + }); + }); + return me; + }, + + /** + * Animates the transition of an element's dimensions from a starting height/width + * to an ending height/width. This method is a convenience implementation of {@link shift}. + * Usage: ++// default: fade out from the element's current opacity to 0 +el.fadeOut(); + +// custom: fade out from the element's current opacity to 25% over 2 seconds +el.fadeOut({ endOpacity: .25, duration: 2}); + +// common config options shown with default values +el.fadeOut({ + endOpacity: 0, //can be any value between 0 and 1 (e.g. .5) + easing: 'easeOut', + duration: .5, + remove: false, + useDisplay: false +}); +
+ * @param {Number} width The new width (pass undefined to keep the original width) + * @param {Number} height The new height (pass undefined to keep the original height) + * @param {Object} options (optional) Object literal with any of the Fx config options + * @return {Ext.Element} The Element + */ + scale : function(w, h, o){ + this.shift(Ext.apply({}, o, { + width: w, + height: h + })); + return this; + }, + + /** + * Animates the transition of any combination of an element's dimensions, xy position and/or opacity. + * Any of these properties not specified in the config object will not be changed. This effect + * requires that at least one new dimension, position or opacity setting must be passed in on + * the config object in order for the function to have any effect. + * Usage: ++// change height and width to 100x100 pixels +el.scale(100, 100); + +// common config options shown with default values. The height and width will default to +// the element's existing values if passed as null. +el.scale( + [element's width], + [element's height], { + easing: 'easeOut', + duration: .35 + } +); +
+ * @param {Object} options Object literal with any of the Fx config options + * @return {Ext.Element} The Element + */ + shift : function(o){ + o = getObject(o); + var dom = this.dom, + a = {}; + + this.queueFx(o, function(){ + for (var prop in o) { + if (o[prop] != UNDEFINED) { + a[prop] = {to : o[prop]}; + } + } + + a.width ? a.width.to = fly(dom).adjustWidth(o.width) : a; + a.height ? a.height.to = fly(dom).adjustWidth(o.height) : a; + + if (a.x || a.y || a.xy) { + a.points = a.xy || + {to : [ a.x ? a.x.to : fly(dom).getX(), + a.y ? a.y.to : fly(dom).getY()]}; + } + + arguments.callee.anim = fly(dom).fxanim(a, + o, + MOTION, + .35, + EASEOUT, + function(){ + fly(dom).afterFx(o); + }); + }); + return this; + }, + + /** + * Slides the element while fading it out of view. An anchor point can be optionally passed to set the + * ending point of the effect. + * Usage: + *+// slide the element horizontally to x position 200 while changing the height and opacity +el.shift({ x: 200, height: 50, opacity: .8 }); + +// common config options shown with default values. +el.shift({ + width: [element's width], + height: [element's height], + x: [element's x position], + y: [element's y position], + opacity: [element's opacity], + easing: 'easeOut', + duration: .35 +}); +
+ * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b') + * @param {Object} options (optional) Object literal with any of the Fx config options + * @return {Ext.Element} The Element + */ + ghost : function(anchor, o){ + o = getObject(o); + var me = this, + dom = me.dom, + st = dom.style, + a = {opacity: {to: 0}, points: {}}, + pt = a.points, + r, + w, + h; + + anchor = anchor || "b"; + + me.queueFx(o, function(){ + // restore values after effect + r = fly(dom).getFxRestore(); + w = fly(dom).getWidth(); + h = fly(dom).getHeight(); + + function after(){ + o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); + fly(dom).clearOpacity(); + fly(dom).setPositioning(r.pos); + st.width = r.width; + st.height = r.height; + fly(dom).afterFx(o); + } + + pt.by = fly(dom).switchStatements(anchor.toLowerCase(), function(v1,v2){ return [v1, v2];}, { + t : [0, -h], + l : [-w, 0], + r : [w, 0], + b : [0, h], + tl : [-w, -h], + bl : [-w, h], + br : [w, h], + tr : [w, -h] + }); + + arguments.callee.anim = fly(dom).fxanim(a, + o, + MOTION, + .5, + EASEOUT, after); + }); + return me; + }, + + /** + * Ensures that all effects queued after syncFx is called on the element are + * run concurrently. This is the opposite of {@link #sequenceFx}. + * @return {Ext.Element} The Element + */ + syncFx : function(){ + var me = this; + me.fxDefaults = Ext.apply(me.fxDefaults || {}, { + block : FALSE, + concurrent : TRUE, + stopFx : FALSE + }); + return me; + }, + + /** + * Ensures that all effects queued after sequenceFx is called on the element are + * run in sequence. This is the opposite of {@link #syncFx}. + * @return {Ext.Element} The Element + */ + sequenceFx : function(){ + var me = this; + me.fxDefaults = Ext.apply(me.fxDefaults || {}, { + block : FALSE, + concurrent : FALSE, + stopFx : FALSE + }); + return me; + }, + + /* @private */ + nextFx : function(){ + var ef = getQueue(this.dom.id)[0]; + if(ef){ + ef.call(this); + } + }, + + /** + * Returns true if the element has any effects actively running or queued, else returns false. + * @return {Boolean} True if element has active effects, else false + */ + hasActiveFx : function(){ + return getQueue(this.dom.id)[0]; + }, + + /** + * Stops any running effects and clears the element's internal effects queue if it contains + * any additional effects that haven't started yet. + * @return {Ext.Element} The Element + */ + stopFx : function(finish){ + var me = this, + id = me.dom.id; + if(me.hasActiveFx()){ + var cur = getQueue(id)[0]; + if(cur && cur.anim){ + if(cur.anim.isAnimated){ + setQueue(id, [cur]); //clear + cur.anim.stop(finish !== undefined ? finish : TRUE); + }else{ + setQueue(id, []); + } + } + } + return me; + }, + + /* @private */ + beforeFx : function(o){ + if(this.hasActiveFx() && !o.concurrent){ + if(o.stopFx){ + this.stopFx(); + return TRUE; + } + return FALSE; + } + return TRUE; + }, + + /** + * Returns true if the element is currently blocking so that no other effect can be queued + * until this effect is finished, else returns false if blocking is not set. This is commonly + * used to ensure that an effect initiated by a user action runs to completion prior to the + * same effect being restarted (e.g., firing only one effect even if the user clicks several times). + * @return {Boolean} True if blocking, else false + */ + hasFxBlock : function(){ + var q = getQueue(this.dom.id); + return q && q[0] && q[0].block; + }, + + /* @private */ + queueFx : function(o, fn){ + var me = fly(this.dom); + if(!me.hasFxBlock()){ + Ext.applyIf(o, me.fxDefaults); + if(!o.concurrent){ + var run = me.beforeFx(o); + fn.block = o.block; + getQueue(me.dom.id).push(fn); + if(run){ + me.nextFx(); + } + }else{ + fn.call(me); + } + } + return me; + }, + + /* @private */ + fxWrap : function(pos, o, vis){ + var dom = this.dom, + wrap, + wrapXY; + if(!o.wrap || !(wrap = Ext.getDom(o.wrap))){ + if(o.fixPosition){ + wrapXY = fly(dom).getXY(); + } + var div = document.createElement("div"); + div.style.visibility = vis; + wrap = dom.parentNode.insertBefore(div, dom); + fly(wrap).setPositioning(pos); + if(fly(wrap).isStyle(POSITION, "static")){ + fly(wrap).position("relative"); + } + fly(dom).clearPositioning('auto'); + fly(wrap).clip(); + wrap.appendChild(dom); + if(wrapXY){ + fly(wrap).setXY(wrapXY); + } + } + return wrap; + }, + + /* @private */ + fxUnwrap : function(wrap, pos, o){ + var dom = this.dom; + fly(dom).clearPositioning(); + fly(dom).setPositioning(pos); + if(!o.wrap){ + var pn = fly(wrap).dom.parentNode; + pn.insertBefore(dom, wrap); + fly(wrap).remove(); + } + }, + + /* @private */ + getFxRestore : function(){ + var st = this.dom.style; + return {pos: this.getPositioning(), width: st.width, height : st.height}; + }, + + /* @private */ + afterFx : function(o){ + var dom = this.dom, + id = dom.id; + if(o.afterStyle){ + fly(dom).setStyle(o.afterStyle); + } + if(o.afterCls){ + fly(dom).addClass(o.afterCls); + } + if(o.remove == TRUE){ + fly(dom).remove(); + } + if(o.callback){ + o.callback.call(o.scope, fly(dom)); + } + if(!o.concurrent){ + getQueue(id).shift(); + fly(dom).nextFx(); + } + }, + + /* @private */ + fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){ + animType = animType || 'run'; + opt = opt || {}; + var anim = Ext.lib.Anim[animType]( + this.dom, + args, + (opt.duration || defaultDur) || .35, + (opt.easing || defaultEase) || EASEOUT, + cb, + this + ); + opt.anim = anim; + return anim; + } +}; + +// backwards compat +Ext.Fx.resize = Ext.Fx.scale; + +//When included, Ext.Fx is automatically applied to Element so that all basic +//effects are available directly via the Element API +Ext.Element.addMethods(Ext.Fx); +})(); ++// default: slide the element downward while fading out +el.ghost(); + +// custom: slide the element out to the right with a 2-second duration +el.ghost('r', { duration: 2 }); + +// common config options shown with default values +el.ghost('b', { + easing: 'easeOut', + duration: .5, + remove: false, + useDisplay: false +}); +