New file |
0,0 → 1,1005 |
/* |
* Ext JS Library 2.0.2 |
* Copyright(c) 2006-2008, Ext JS, LLC. |
* licensing@extjs.com |
* |
* http://extjs.com/license |
*/ |
|
|
//Notifies Element that fx methods are available |
Ext.enableFx = true; |
|
/** |
* @class Ext.Fx |
* <p>A class to provide basic animation and visual effects support. <b>Note:</b> This class is automatically applied |
* to the {@link Ext.Element} interface when included, so all effects calls should be performed via Element. |
* Conversely, since the effects are not actually defined in Element, Ext.Fx <b>must</b> be included in order for the |
* Element effects to work.</p><br/> |
* |
* <p>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.</p><br/> |
* |
* <p>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:</p> |
<pre> |
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 |
</pre> |
* <b>Although some Fx methods accept specific custom config parameters, the ones shown in the Config Options section |
* below are common options that can be passed to any Fx method.</b> |
* |
* @cfg {Function} callback A function called when the effect is finished. Note that effects are queued internally by the |
* Fx class, so do not need to use the callback parameter to specify another effect -- effects can simply be chained together |
* and called in sequence (e.g., el.slideIn().highlight();). The callback is intended for any additional code that should |
* run once a particular effect has completed. |
* @cfg {Object} scope The scope of the effect function |
* @cfg {String} easing A valid Easing value for the effect |
* @cfg {String} afterCls A css class to apply after the effect |
* @cfg {Number} duration The length of time (in seconds) that the effect should last |
* @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes |
* @cfg {Boolean} useDisplay Whether to use the <i>display</i> CSS property instead of <i>visibility</i> 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 subsequent effects should be stopped and removed after the current effect finishes |
*/ |
Ext.Fx = { |
/** |
* 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: |
*<pre><code> |
// 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 |
}); |
</code></pre> |
* @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){ |
var el = this.getFxEl(); |
o = o || {}; |
|
el.queueFx(o, function(){ |
|
anchor = anchor || "t"; |
|
// fix display to visibility |
this.fixDisplay(); |
|
// restore values after effect |
var r = this.getFxRestore(); |
var b = this.getBox(); |
// fixed size for slide |
this.setSize(b); |
|
// wrap if needed |
var wrap = this.fxWrap(r.pos, o, "hidden"); |
|
var st = this.dom.style; |
st.visibility = "visible"; |
st.position = "absolute"; |
|
// clear out temp styles after slide and unwrap |
var after = function(){ |
el.fxUnwrap(wrap, r.pos, o); |
st.width = r.width; |
st.height = r.height; |
el.afterFx(o); |
}; |
// time to calc the positions |
var a, pt = {to: [b.x, b.y]}, bw = {to: b.width}, bh = {to: b.height}; |
|
switch(anchor.toLowerCase()){ |
case "t": |
wrap.setSize(b.width, 0); |
st.left = st.bottom = "0"; |
a = {height: bh}; |
break; |
case "l": |
wrap.setSize(0, b.height); |
st.right = st.top = "0"; |
a = {width: bw}; |
break; |
case "r": |
wrap.setSize(0, b.height); |
wrap.setX(b.right); |
st.left = st.top = "0"; |
a = {width: bw, points: pt}; |
break; |
case "b": |
wrap.setSize(b.width, 0); |
wrap.setY(b.bottom); |
st.left = st.top = "0"; |
a = {height: bh, points: pt}; |
break; |
case "tl": |
wrap.setSize(0, 0); |
st.right = st.bottom = "0"; |
a = {width: bw, height: bh}; |
break; |
case "bl": |
wrap.setSize(0, 0); |
wrap.setY(b.y+b.height); |
st.right = st.top = "0"; |
a = {width: bw, height: bh, points: pt}; |
break; |
case "br": |
wrap.setSize(0, 0); |
wrap.setXY([b.right, b.bottom]); |
st.left = st.top = "0"; |
a = {width: bw, height: bh, points: pt}; |
break; |
case "tr": |
wrap.setSize(0, 0); |
wrap.setX(b.x+b.width); |
st.left = st.bottom = "0"; |
a = {width: bw, height: bh, points: pt}; |
break; |
} |
this.dom.style.visibility = "visible"; |
wrap.show(); |
|
arguments.callee.anim = wrap.fxanim(a, |
o, |
'motion', |
.5, |
'easeOut', after); |
}); |
return this; |
}, |
|
/** |
* 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: |
*<pre><code> |
// 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 |
}); |
</code></pre> |
* @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){ |
var el = this.getFxEl(); |
o = o || {}; |
|
el.queueFx(o, function(){ |
|
anchor = anchor || "t"; |
|
// restore values after effect |
var r = this.getFxRestore(); |
|
var b = this.getBox(); |
// fixed size for slide |
this.setSize(b); |
|
// wrap if needed |
var wrap = this.fxWrap(r.pos, o, "visible"); |
|
var st = this.dom.style; |
st.visibility = "visible"; |
st.position = "absolute"; |
|
wrap.setSize(b); |
|
var after = function(){ |
if(o.useDisplay){ |
el.setDisplayed(false); |
}else{ |
el.hide(); |
} |
|
el.fxUnwrap(wrap, r.pos, o); |
|
st.width = r.width; |
st.height = r.height; |
|
el.afterFx(o); |
}; |
|
var a, zero = {to: 0}; |
switch(anchor.toLowerCase()){ |
case "t": |
st.left = st.bottom = "0"; |
a = {height: zero}; |
break; |
case "l": |
st.right = st.top = "0"; |
a = {width: zero}; |
break; |
case "r": |
st.left = st.top = "0"; |
a = {width: zero, points: {to:[b.right, b.y]}}; |
break; |
case "b": |
st.left = st.top = "0"; |
a = {height: zero, points: {to:[b.x, b.bottom]}}; |
break; |
case "tl": |
st.right = st.bottom = "0"; |
a = {width: zero, height: zero}; |
break; |
case "bl": |
st.right = st.top = "0"; |
a = {width: zero, height: zero, points: {to:[b.x, b.bottom]}}; |
break; |
case "br": |
st.left = st.top = "0"; |
a = {width: zero, height: zero, points: {to:[b.x+b.width, b.bottom]}}; |
break; |
case "tr": |
st.left = st.bottom = "0"; |
a = {width: zero, height: zero, points: {to:[b.right, b.y]}}; |
break; |
} |
|
arguments.callee.anim = wrap.fxanim(a, |
o, |
'motion', |
.5, |
"easeOut", after); |
}); |
return this; |
}, |
|
/** |
* 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: |
*<pre><code> |
// default |
el.puff(); |
|
// common config options shown with default values |
el.puff({ |
easing: 'easeOut', |
duration: .5, |
remove: false, |
useDisplay: false |
}); |
</code></pre> |
* @param {Object} options (optional) Object literal with any of the Fx config options |
* @return {Ext.Element} The Element |
*/ |
puff : function(o){ |
var el = this.getFxEl(); |
o = o || {}; |
|
el.queueFx(o, function(){ |
this.clearOpacity(); |
this.show(); |
|
// restore values after effect |
var r = this.getFxRestore(); |
var st = this.dom.style; |
|
var after = function(){ |
if(o.useDisplay){ |
el.setDisplayed(false); |
}else{ |
el.hide(); |
} |
|
el.clearOpacity(); |
|
el.setPositioning(r.pos); |
st.width = r.width; |
st.height = r.height; |
st.fontSize = ''; |
el.afterFx(o); |
}; |
|
var width = this.getWidth(); |
var height = this.getHeight(); |
|
arguments.callee.anim = this.fxanim({ |
width : {to: this.adjustWidth(width * 2)}, |
height : {to: this.adjustHeight(height * 2)}, |
points : {by: [-(width * .5), -(height * .5)]}, |
opacity : {to: 0}, |
fontSize: {to:200, unit: "%"} |
}, |
o, |
'motion', |
.5, |
"easeOut", after); |
}); |
return this; |
}, |
|
/** |
* 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: |
*<pre><code> |
// default |
el.switchOff(); |
|
// all config options shown with default values |
el.switchOff({ |
easing: 'easeIn', |
duration: .3, |
remove: false, |
useDisplay: false |
}); |
</code></pre> |
* @param {Object} options (optional) Object literal with any of the Fx config options |
* @return {Ext.Element} The Element |
*/ |
switchOff : function(o){ |
var el = this.getFxEl(); |
o = o || {}; |
|
el.queueFx(o, function(){ |
this.clearOpacity(); |
this.clip(); |
|
// restore values after effect |
var r = this.getFxRestore(); |
var st = this.dom.style; |
|
var after = function(){ |
if(o.useDisplay){ |
el.setDisplayed(false); |
}else{ |
el.hide(); |
} |
|
el.clearOpacity(); |
el.setPositioning(r.pos); |
st.width = r.width; |
st.height = r.height; |
|
el.afterFx(o); |
}; |
|
this.fxanim({opacity:{to:0.3}}, null, null, .1, null, function(){ |
this.clearOpacity(); |
(function(){ |
this.fxanim({ |
height:{to:1}, |
points:{by:[0, this.getHeight() * .5]} |
}, o, 'motion', 0.3, 'easeIn', after); |
}).defer(100, this); |
}); |
}); |
return this; |
}, |
|
/** |
* 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: |
<pre><code> |
// 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 |
}); |
</code></pre> |
* @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){ |
var el = this.getFxEl(); |
o = o || {}; |
|
el.queueFx(o, function(){ |
color = color || "ffff9c"; |
var attr = o.attr || "backgroundColor"; |
|
this.clearOpacity(); |
this.show(); |
|
var origColor = this.getColor(attr); |
var restoreColor = this.dom.style[attr]; |
var endColor = (o.endColor || origColor) || "ffffff"; |
|
var after = function(){ |
el.dom.style[attr] = restoreColor; |
el.afterFx(o); |
}; |
|
var a = {}; |
a[attr] = {from: color, to: endColor}; |
arguments.callee.anim = this.fxanim(a, |
o, |
'color', |
1, |
'easeIn', after); |
}); |
return this; |
}, |
|
/** |
* Shows a ripple of exploding, attenuating borders to draw attention to an Element. |
* Usage: |
<pre><code> |
// 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 entire animation (not each individual ripple) |
// Note: Easing is not configurable and will be ignored if included |
}); |
</code></pre> |
* @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){ |
var el = this.getFxEl(); |
o = o || {}; |
|
el.queueFx(o, function(){ |
color = color || "#C3DAF9"; |
if(color.length == 6){ |
color = "#" + color; |
} |
count = count || 1; |
var duration = o.duration || 1; |
this.show(); |
|
var b = this.getBox(); |
var animFn = function(){ |
var proxy = Ext.getBody().createChild({ |
style:{ |
visbility:"hidden", |
position:"absolute", |
"z-index":"35000", // yee haw |
border:"0px solid " + color |
} |
}); |
var scale = Ext.isBorderBox ? 2 : 1; |
proxy.animate({ |
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, function(){ |
proxy.remove(); |
if(--count > 0){ |
animFn(); |
}else{ |
el.afterFx(o); |
} |
}); |
}; |
animFn.call(this); |
}); |
return this; |
}, |
|
/** |
* Creates a pause before any subsequent queued effects begin. If there are |
* no effects queued after the pause it will have no effect. |
* Usage: |
<pre><code> |
el.pause(1); |
</code></pre> |
* @param {Number} seconds The length of time to pause (in seconds) |
* @return {Ext.Element} The Element |
*/ |
pause : function(seconds){ |
var el = this.getFxEl(); |
var o = {}; |
|
el.queueFx(o, function(){ |
setTimeout(function(){ |
el.afterFx(o); |
}, seconds * 1000); |
}); |
return this; |
}, |
|
/** |
* Fade an element in (from transparent to opaque). The ending opacity can be specified |
* using the "endOpacity" config option. |
* Usage: |
<pre><code> |
// 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 |
}); |
</code></pre> |
* @param {Object} options (optional) Object literal with any of the Fx config options |
* @return {Ext.Element} The Element |
*/ |
fadeIn : function(o){ |
var el = this.getFxEl(); |
o = o || {}; |
el.queueFx(o, function(){ |
this.setOpacity(0); |
this.fixDisplay(); |
this.dom.style.visibility = 'visible'; |
var to = o.endOpacity || 1; |
arguments.callee.anim = this.fxanim({opacity:{to:to}}, |
o, null, .5, "easeOut", function(){ |
if(to == 1){ |
this.clearOpacity(); |
} |
el.afterFx(o); |
}); |
}); |
return this; |
}, |
|
/** |
* Fade an element out (from opaque to transparent). The ending opacity can be specified |
* using the "endOpacity" config option. Note that IE may require useDisplay:true in order |
* to redisplay correctly. |
* Usage: |
<pre><code> |
// 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 |
}); |
</code></pre> |
* @param {Object} options (optional) Object literal with any of the Fx config options |
* @return {Ext.Element} The Element |
*/ |
fadeOut : function(o){ |
var el = this.getFxEl(); |
o = o || {}; |
el.queueFx(o, function(){ |
arguments.callee.anim = this.fxanim({opacity:{to:o.endOpacity || 0}}, |
o, null, .5, "easeOut", function(){ |
if(this.visibilityMode == Ext.Element.DISPLAY || o.useDisplay){ |
this.dom.style.display = "none"; |
}else{ |
this.dom.style.visibility = "hidden"; |
} |
this.clearOpacity(); |
el.afterFx(o); |
}); |
}); |
return this; |
}, |
|
/** |
* Animates the transition of an element's dimensions from a starting height/width |
* to an ending height/width. |
* Usage: |
<pre><code> |
// 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 |
} |
); |
</code></pre> |
* @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: |
<pre><code> |
// 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 |
}); |
</code></pre> |
* @param {Object} options Object literal with any of the Fx config options |
* @return {Ext.Element} The Element |
*/ |
shift : function(o){ |
var el = this.getFxEl(); |
o = o || {}; |
el.queueFx(o, function(){ |
var a = {}, w = o.width, h = o.height, x = o.x, y = o.y, op = o.opacity; |
if(w !== undefined){ |
a.width = {to: this.adjustWidth(w)}; |
} |
if(h !== undefined){ |
a.height = {to: this.adjustHeight(h)}; |
} |
if(x !== undefined || y !== undefined){ |
a.points = {to: [ |
x !== undefined ? x : this.getX(), |
y !== undefined ? y : this.getY() |
]}; |
} |
if(op !== undefined){ |
a.opacity = {to: op}; |
} |
if(o.xy !== undefined){ |
a.points = {to: o.xy}; |
} |
arguments.callee.anim = this.fxanim(a, |
o, 'motion', .35, "easeOut", function(){ |
el.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: |
*<pre><code> |
// 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 |
}); |
</code></pre> |
* @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){ |
var el = this.getFxEl(); |
o = o || {}; |
|
el.queueFx(o, function(){ |
anchor = anchor || "b"; |
|
// restore values after effect |
var r = this.getFxRestore(); |
var w = this.getWidth(), |
h = this.getHeight(); |
|
var st = this.dom.style; |
|
var after = function(){ |
if(o.useDisplay){ |
el.setDisplayed(false); |
}else{ |
el.hide(); |
} |
|
el.clearOpacity(); |
el.setPositioning(r.pos); |
st.width = r.width; |
st.height = r.height; |
|
el.afterFx(o); |
}; |
|
var a = {opacity: {to: 0}, points: {}}, pt = a.points; |
switch(anchor.toLowerCase()){ |
case "t": |
pt.by = [0, -h]; |
break; |
case "l": |
pt.by = [-w, 0]; |
break; |
case "r": |
pt.by = [w, 0]; |
break; |
case "b": |
pt.by = [0, h]; |
break; |
case "tl": |
pt.by = [-w, -h]; |
break; |
case "bl": |
pt.by = [-w, h]; |
break; |
case "br": |
pt.by = [w, h]; |
break; |
case "tr": |
pt.by = [w, -h]; |
break; |
} |
|
arguments.callee.anim = this.fxanim(a, |
o, |
'motion', |
.5, |
"easeOut", after); |
}); |
return this; |
}, |
|
/** |
* 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(){ |
this.fxDefaults = Ext.apply(this.fxDefaults || {}, { |
block : false, |
concurrent : true, |
stopFx : false |
}); |
return this; |
}, |
|
/** |
* 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(){ |
this.fxDefaults = Ext.apply(this.fxDefaults || {}, { |
block : false, |
concurrent : false, |
stopFx : false |
}); |
return this; |
}, |
|
/* @private */ |
nextFx : function(){ |
var ef = this.fxQueue[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 this.fxQueue && this.fxQueue[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(){ |
if(this.hasActiveFx()){ |
var cur = this.fxQueue[0]; |
if(cur && cur.anim && cur.anim.isAnimated()){ |
this.fxQueue = [cur]; // clear out others |
cur.anim.stop(true); |
} |
} |
return this; |
}, |
|
/* @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 = this.fxQueue; |
return q && q[0] && q[0].block; |
}, |
|
/* @private */ |
queueFx : function(o, fn){ |
if(!this.fxQueue){ |
this.fxQueue = []; |
} |
if(!this.hasFxBlock()){ |
Ext.applyIf(o, this.fxDefaults); |
if(!o.concurrent){ |
var run = this.beforeFx(o); |
fn.block = o.block; |
this.fxQueue.push(fn); |
if(run){ |
this.nextFx(); |
} |
}else{ |
fn.call(this); |
} |
} |
return this; |
}, |
|
/* @private */ |
fxWrap : function(pos, o, vis){ |
var wrap; |
if(!o.wrap || !(wrap = Ext.get(o.wrap))){ |
var wrapXY; |
if(o.fixPosition){ |
wrapXY = this.getXY(); |
} |
var div = document.createElement("div"); |
div.style.visibility = vis; |
wrap = Ext.get(this.dom.parentNode.insertBefore(div, this.dom)); |
wrap.setPositioning(pos); |
if(wrap.getStyle("position") == "static"){ |
wrap.position("relative"); |
} |
this.clearPositioning('auto'); |
wrap.clip(); |
wrap.dom.appendChild(this.dom); |
if(wrapXY){ |
wrap.setXY(wrapXY); |
} |
} |
return wrap; |
}, |
|
/* @private */ |
fxUnwrap : function(wrap, pos, o){ |
this.clearPositioning(); |
this.setPositioning(pos); |
if(!o.wrap){ |
wrap.dom.parentNode.insertBefore(this.dom, wrap.dom); |
wrap.remove(); |
} |
}, |
|
/* @private */ |
getFxRestore : function(){ |
var st = this.dom.style; |
return {pos: this.getPositioning(), width: st.width, height : st.height}; |
}, |
|
/* @private */ |
afterFx : function(o){ |
if(o.afterStyle){ |
this.applyStyles(o.afterStyle); |
} |
if(o.afterCls){ |
this.addClass(o.afterCls); |
} |
if(o.remove === true){ |
this.remove(); |
} |
Ext.callback(o.callback, o.scope, [this]); |
if(!o.concurrent){ |
this.fxQueue.shift(); |
this.nextFx(); |
} |
}, |
|
/* @private */ |
getFxEl : function(){ // support for composite element fx |
return Ext.get(this.dom); |
}, |
|
/* @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', |
function(){ |
Ext.callback(cb, this); |
}, |
this |
); |
opt.anim = anim; |
return anim; |
} |
}; |
|
// backwords 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.apply(Ext.Element.prototype, Ext.Fx); |