Fx.js
//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
* @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 display style attribute 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 eg "width:100px", or 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', {<br/>
easing: 'easeOut', <br/>
duration: .5<br/>
});
</code></pre>
* @param {String} anchor （可选） One of the valid Fx anchor positions (defaults to top: 't')
* @param {Object} options （可选） Object literal with any of the Fx config options
* @return {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', {<br/>
easing: 'easeOut', <br/>
duration: .5,<br/>
remove: false,<br />
useDisplay: false
});
</code></pre>
* @param {String} anchor （可选） One of the valid Fx anchor positions (defaults to top: 't')
* @param {Object} options （可选） Object literal with any of the Fx config options
* @return {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({<br/>
easing: 'easeOut', <br/>
duration: .5,<br/>
remove: false,<br />
useDisplay: false
});
</code></pre>
* @param {Object} options （可选） Object literal with any of the Fx config options
* @return {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 using the 'remove' config option if desired.
* Usage:
*<pre><code>
// default
el.switchOff();
// all config options shown with default values
el.switchOff({<br/>
easing: 'easeIn', <br/>
duration: .3,<br/>
remove: false,<br />
useDisplay: false
});
</code></pre>
* @param {Object} options （可选） Object literal with any of the Fx config options
* @return {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", {<br/>
attr: "background-color", //can be any valid css attribute that supports a color value<br/>
endColor: (current color) or "ffffff",<br/>
easing: 'easeIn',<br/>
duration: 1<br/>
});
</code></pre>
* @param {String} color （可选） The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')
* @param {Object} options （可选） Object literal with any of the Fx config options
* @return {Element} The Element
*/
highlight : function(color, o){
var el = this.getFxEl();
o = o || {};
el.queueFx(o, function(){
color = color || "ffff9c";
attr = o.attr || "backgroundColor";
this.clearOpacity();
this.show();
var origColor = this.getColor(attr);
var restoreColor = this.dom.style[attr];
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, {<br/>
duration: 1 //duration of entire animation (not each individual ripple)<br/>
// Note: Easing is not configurable and will be ignored if included
});
</code></pre>
* @param {String} color （可选） The color of the border. Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').
* @param {Number} count （可选） The number of ripples to display (defaults to 1)
* @param {Object} options （可选） Object literal with any of the Fx config options
* @return {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;
duration = o.duration || 1;
this.show();
var b = this.getBox();
var animFn = function(){
var proxy = this.createProxy({
tag:"div",
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.defer((duration/2)*1000, this);
}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 affect.
* Usage:
<pre><code>
el.pause(1);
</code></pre>
* @param {Number} seconds The length of time to pause (in seconds)
* @return {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 opactiy 0 to 100%
el.fadeIn();
// custom: fade in from opcaity 0 to 75% over 2 seconds
el.fadeIn({ endOpacity: .75, duration: 2});
// common config options shown with default values
el.fadeIn({<br/>
endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)<br/>
easing: 'easeOut',<br/>
duration: .5<br/>
});
</code></pre>
* @param {Object} options （可选） Object literal with any of the Fx config options
* @return {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.
* 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({<br/>
endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)<br/>
easing: 'easeOut',<br/>
duration: .5<br/>
remove: false,<br />
useDisplay: false
});
</code></pre>
* @param {Object} options （可选） Object literal with any of the Fx config options
* @return {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],<br/>
[element's height], {<br/>
easing: 'easeOut',<br/>
duration: .35<br/>
});
</code></pre>
* @param {Number} width The new width (pass null to keep the original width)
* @param {Number} height The new height (pass null to keep the original height)
* @param {Object} options （可选） Object literal with any of the Fx config options
* @return {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 affect.
* 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],<br/>
height: [element's height],<br/>
x: [element's x position],<br/>
y: [element's y position],<br/>
opacity: [element's opacity],<br/>
easing: 'easeOut',<br/>
duration: .35<br/>
});
</code></pre>
* @param {Object} options Object literal with any of the Fx config options
* @return {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', {<br/>
easing: 'easeOut', <br/>
duration: .5<br/>
remove: false,<br />
useDisplay: false
});
</code></pre>
* @param {String} anchor （可选） One of the valid Fx anchor positions (defaults to bottom: 'b')
* @param {Object} options （可选） Object literal with any of the Fx config options
* @return {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 {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 {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 {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);
Ext - Copyright © 2006-2007 Ext JS, LLC
All rights reserved.