中间件编程

开发平台：

JavaScript

ext-all-debug.js：源码内容

opacity: {to: .3, from: 1},
height: {to: 50, from: el.getHeight()},
width: {to: 300, from: el.getWidth()},
top : {by: - 100, unit: 'px'},
points: {
to: [50, 100], // go to this point
control: [ // optional bezier way points
[ 600, 800],
[-100, 200]
]
}
},
3000, // animation duration (milliseconds!)
null, // callback
'easeOut', // easing method
'motion' // animation type ('run','color','motion','scroll')
);
* </code></pre>
* </li>
* <li><tt>'scroll'</tt>
* Animate horizontal or vertical scrolling of an overflowing page element.
* <pre><code>
el.animate(
// animation control object
{
scroll: {to: [400, 300]}
},
0.35, // animation duration
null, // callback
'easeOut', // easing method
'scroll' // animation type ('run','color','motion','scroll')
);
* </code></pre>
* </li>
* </ul></div>
*
* </ul></div>
*
* @param {Object} args The animation control args
* @param {Float} duration (optional) How long the animation lasts in seconds (defaults to <tt>.35</tt>)
* @param {Function} onComplete (optional) Function to call when animation completes
* @param {String} easing (optional) {@link Ext.Fx#easing} method to use (defaults to <tt>'easeOut'</tt>)
* @param {String} animType (optional) <tt>'run'</tt> is the default. Can also be <tt>'color'</tt>,
* <tt>'motion'</tt>, or <tt>'scroll'</tt>
* @return {Ext.Element} this
*/
animate : function(args, duration, onComplete, easing, animType){
this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);
return this;
},
/*
* @private Internal animation call
*/
anim : function(args, opt, animType, defaultDur, defaultEase, cb){
animType = animType || 'run';
opt = opt || {};
var me = this,
anim = Ext.lib.Anim[animType](
me.dom,
args,
(opt.duration || defaultDur) || .35,
(opt.easing || defaultEase) || 'easeOut',
function(){
if(cb) cb.call(me);
if(opt.callback) opt.callback.call(opt.scope || me, me, opt);
},
me
);
opt.anim = anim;
return anim;
},
// private legacy anim prep
preanim : function(a, i){
return !a[i] ? false : (Ext.isObject(a[i]) ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});
},
/**
* Checks whether the element is currently visible using both visibility and display properties.
* @return {Boolean} True if the element is currently visible, else false
*/
isVisible : function() {
return !this.isStyle(VISIBILITY, HIDDEN) && !this.isStyle(DISPLAY, NONE);
},
/**
* Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
* the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
* @param {Boolean} visible Whether the element is visible
* @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
* @return {Ext.Element} this
*/
setVisible : function(visible, animate){
var me = this,
dom = me.dom,
isDisplay = getVisMode(this.dom) == ELDISPLAY;
if (!animate || !me.anim) {
if(isDisplay){
me.setDisplayed(visible);
}else{
me.fixDisplay();
dom.style.visibility = visible ? "visible" : HIDDEN;
}
}else{
// closure for composites
if(visible){
me.setOpacity(.01);
me.setVisible(true);
}
me.anim({opacity: { to: (visible?1:0) }},
me.preanim(arguments, 1),
null,
.35,
'easeIn',
function(){
if(!visible){
dom.style[isDisplay ? DISPLAY : VISIBILITY] = (isDisplay) ? NONE : HIDDEN;
Ext.fly(dom).setOpacity(1);
}
});
}
return me;
},
/**
* Toggles the element's visibility or display, depending on visibility mode.
* @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
* @return {Ext.Element} this
*/
toggle : function(animate){
var me = this;
me.setVisible(!me.isVisible(), me.preanim(arguments, 0));
return me;
},
/**
* Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
* @param {Mixed} value Boolean value to display the element using its default display, or a string to set the display directly.
* @return {Ext.Element} this
*/
setDisplayed : function(value) {
if(typeof value == "boolean"){
value = value ? getDisplay(this.dom) : NONE;
}
this.setStyle(DISPLAY, value);
return this;
},
// private
fixDisplay : function(){
var me = this;
if(me.isStyle(DISPLAY, NONE)){
me.setStyle(VISIBILITY, HIDDEN);
me.setStyle(DISPLAY, getDisplay(this.dom)); // first try reverting to default
if(me.isStyle(DISPLAY, NONE)){ // if that fails, default to block
me.setStyle(DISPLAY, "block");
}
}
},
/**
* Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
hide : function(animate){
this.setVisible(false, this.preanim(arguments, 0));
return this;
},
/**
* Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
show : function(animate){
this.setVisible(true, this.preanim(arguments, 0));
return this;
}
}
}());/**
* @class Ext.Element
*/
Ext.Element.addMethods(
function(){
var VISIBILITY = "visibility",
DISPLAY = "display",
HIDDEN = "hidden",
NONE = "none",
XMASKED = "x-masked",
XMASKEDRELATIVE = "x-masked-relative",
data = Ext.Element.data;
return {
/**
* Checks whether the element is currently visible using both visibility and display properties.
* @param {Boolean} deep (optional) True to walk the dom and see if parent elements are hidden (defaults to false)
* @return {Boolean} True if the element is currently visible, else false
*/
isVisible : function(deep) {
var vis = !this.isStyle(VISIBILITY,HIDDEN) && !this.isStyle(DISPLAY,NONE),
p = this.dom.parentNode;
if(deep !== true || !vis){
return vis;
}
while(p && !/body/i.test(p.tagName)){
if(!Ext.fly(p, '_isVisible').isVisible()){
return false;
}
p = p.parentNode;
}
return true;
},
/**
* Returns true if display is not "none"
* @return {Boolean}
*/
isDisplayed : function() {
return !this.isStyle(DISPLAY, NONE);
},
/**
* Convenience method for setVisibilityMode(Element.DISPLAY)
* @param {String} display (optional) What to set display to when visible
* @return {Ext.Element} this
*/
enableDisplayMode : function(display){
this.setVisibilityMode(Ext.Element.DISPLAY);
if(!Ext.isEmpty(display)){
data(this.dom, 'originalDisplay', display);
}
return this;
},
/**
* Puts a mask over this element to disable user interaction. Requires core.css.
* This method can only be applied to elements which accept child nodes.
* @param {String} msg (optional) A message to display in the mask
* @param {String} msgCls (optional) A css class to apply to the msg element
* @return {Element} The mask element
*/
mask : function(msg, msgCls){
var me = this,
dom = me.dom,
dh = Ext.DomHelper,
EXTELMASKMSG = "ext-el-mask-msg",
el,
mask;
if(me.getStyle("position") == "static"){
me.addClass(XMASKEDRELATIVE);
}
if((el = data(dom, 'maskMsg'))){
el.remove();
}
if((el = data(dom, 'mask'))){
el.remove();
}
mask = dh.append(dom, {cls : "ext-el-mask"}, true);
data(dom, 'mask', mask);
me.addClass(XMASKED);
mask.setDisplayed(true);
if(typeof msg == 'string'){
var mm = dh.append(dom, {cls : EXTELMASKMSG, cn:{tag:'div'}}, true);
data(dom, 'maskMsg', mm);
mm.dom.className = msgCls ? EXTELMASKMSG + " " + msgCls : EXTELMASKMSG;
mm.dom.firstChild.innerHTML = msg;
mm.setDisplayed(true);
mm.center(me);
}
if(Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && me.getStyle('height') == 'auto'){ // ie will not expand full height automatically
mask.setSize(undefined, me.getHeight());
}
return mask;
},
/**
* Removes a previously applied mask.
*/
unmask : function(){
var me = this,
dom = me.dom,
mask = data(dom, 'mask'),
maskMsg = data(dom, 'maskMsg');
if(mask){
if(maskMsg){
maskMsg.remove();
data(dom, 'maskMsg', undefined);
}
mask.remove();
data(dom, 'mask', undefined);
}
me.removeClass([XMASKED, XMASKEDRELATIVE]);
},
/**
* Returns true if this element is masked
* @return {Boolean}
*/
isMasked : function(){
var m = data(this.dom, 'mask');
return m && m.isVisible();
},
/**
* Creates an iframe shim for this element to keep selects and other windowed objects from
* showing through.
* @return {Ext.Element} The new shim element
*/
createShim : function(){
var el = document.createElement('iframe'),
shim;
el.frameBorder = '0';
el.className = 'ext-shim';
if(Ext.isIE && Ext.isSecure){
el.src = Ext.SSL_SECURE_URL;
}
shim = Ext.get(this.dom.parentNode.insertBefore(el, this.dom));
shim.autoBoxAdjust = false;
return shim;
}
};
}());/**
* @class Ext.Element
*/
Ext.Element.addMethods({
/**
* Convenience method for constructing a KeyMap
* @param {Number/Array/Object/String} key Either a string with the keys to listen for, the numeric key code, array of key codes or an object with the following options:
* {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
* @param {Function} fn The function to call
* @param {Object} scope (optional) The scope of the function
* @return {Ext.KeyMap} The KeyMap created
*/
addKeyListener : function(key, fn, scope){
var config;
if(!Ext.isObject(key) || Ext.isArray(key)){
config = {
key: key,
fn: fn,
scope: scope
};
}else{
config = {
key : key.key,
shift : key.shift,
ctrl : key.ctrl,
alt : key.alt,
fn: fn,
scope: scope
};
}
return new Ext.KeyMap(this, config);
},
/**
* Creates a KeyMap for this element
* @param {Object} config The KeyMap config. See {@link Ext.KeyMap} for more details
* @return {Ext.KeyMap} The KeyMap created
*/
addKeyMap : function(config){
return new Ext.KeyMap(this, config);
}
});(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 <tt>{@link #callback}</tt>.
*
* 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:
<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>
* 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:<pre><code>
* el.slideIn().highlight();
* </code></pre>
* 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 <tt>{@link #callback}</tt> function
*
* @cfg {String} easing A valid Ext.lib.Easing value for the effect:<div class="mdetail-params"><ul>
* <li><tt>backBoth</tt></li>
* <li><tt>backIn</tt></li>
* <li><tt>backOut</tt></li>
* <li><tt>bounceBoth</tt></li>
* <li><tt>bounceIn</tt></li>
* <li><tt>bounceOut</tt></li>
* <li><tt>easeBoth</tt></li>
* <li><tt>easeBothStrong</tt></li>
* <li><tt>easeIn</tt></li>
* <li><tt>easeInStrong</tt></li>
* <li><tt>easeNone</tt></li>
* <li><tt>easeOut</tt></li>
* <li><tt>easeOutStrong</tt></li>
* <li><tt>elasticBoth</tt></li>
* <li><tt>elasticIn</tt></li>
* <li><tt>elasticOut</tt></li>
* </ul></div>
*
* @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
* <tt>0</tt> and <tt>1</tt> 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. <tt>"width:100px"</tt>, or an object
* in the form <tt>{width:"100px"}</tt>, 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:
*<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){
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:
*<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){
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:
*<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){
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:
*<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){
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:
<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){
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:
<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 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){
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:
<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 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 <tt>{@link #endOpacity}</tt> 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){
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 <tt>{@link #endOpacity}</tt> config option. Note that IE may require
* <tt>{@link #useDisplay}:true</tt> 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){
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:
<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){
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:
*<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){
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);
})();/**
* @class Ext.CompositeElementLite
* Flyweight composite class. Reuses the same Ext.Element for element operations.
<pre><code>
var els = Ext.select("#some-el div.some-class");
// or select directly from an existing element
var el = Ext.get('some-el');
el.select('div.some-class');
els.setWidth(100); // all elements become 100 width
els.hide(true); // all elements fade out and hide
// or
els.setWidth(100).hide(true);
</code></pre>
* NOTE: Although they are not listed, this class supports all of the set/update methods of Ext.Element. All Ext.Element
* actions will be performed on all the elements in this collection.
*/
Ext.CompositeElementLite = function(els, root){
this.elements = [];
this.add(els, root);
this.el = new Ext.Element.Flyweight();
};
Ext.CompositeElementLite.prototype = {
isComposite: true,
/**
* Returns the number of elements in this composite
* @return Number
*/
getCount : function(){
return this.elements.length;
},
add : function(els){
if(els){
if (Ext.isArray(els)) {
this.elements = this.elements.concat(els);
} else {
var yels = this.elements;
Ext.each(els, function(e) {
yels.push(e);
});
}
}
return this;
},
invoke : function(fn, args){
var els = this.elements,
el = this.el;
Ext.each(els, function(e) {
el.dom = e;
Ext.Element.prototype[fn].apply(el, args);
});
return this;
},
/**
* Returns a flyweight Element of the dom element object at the specified index
* @param {Number} index
* @return {Ext.Element}
*/
item : function(index){
var me = this;
if(!me.elements[index]){
return null;
}
me.el.dom = me.elements[index];
return me.el;
},
// fixes scope with flyweight
addListener : function(eventName, handler, scope, opt){
Ext.each(this.elements, function(e) {
Ext.EventManager.on(e, eventName, handler, scope || e, opt);
});
return this;
},
/**
* Calls the passed function passing (el, this, index) for each element in this composite. The element
* passed is the flyweight (shared) Ext.Element instance, so if you require a
* a reference to the dom node, use el.dom.
* @param {Function} fn The function to call
* @param {Object} scope (optional) The this object (defaults to the element)
* @return {CompositeElement} this
*/
each : function(fn, scope){
var me = this,
el = me.el;
Ext.each(me.elements, function(e,i) {
el.dom = e;
return fn.call(scope || el, el, me, i);
});
return me;
},
/**
* Find the index of the passed element within the composite collection.
* @param el {Mixed} The id of an element, or an Ext.Element, or an HtmlElement to find within the composite collection.
* @return Number The index of the passed Ext.Element in the composite collection, or -1 if not found.
*/
indexOf : function(el){
return this.elements.indexOf(Ext.getDom(el));
},
/**
* Replaces the specified element with the passed element.
* @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite
* to replace.
* @param {Mixed} replacement The id of an element or the Element itself.
* @param {Boolean} domReplace (Optional) True to remove and replace the element in the document too.
* @return {CompositeElement} this
*/
replaceElement : function(el, replacement, domReplace){
var index = !isNaN(el) ? el : this.indexOf(el),
d;
if(index > -1){
replacement = Ext.getDom(replacement);
if(domReplace){
d = this.elements[index];
d.parentNode.insertBefore(replacement, d);
Ext.removeNode(d);
}
this.elements.splice(index, 1, replacement);
}
return this;
},
/**
* Removes all elements.
*/
clear : function(){
this.elements = [];
}
};
Ext.CompositeElementLite.prototype.on = Ext.CompositeElementLite.prototype.addListener;
(function(){
var fnName,
ElProto = Ext.Element.prototype,
CelProto = Ext.CompositeElementLite.prototype;
for(fnName in ElProto){
if(Ext.isFunction(ElProto[fnName])){
(function(fnName){
CelProto[fnName] = CelProto[fnName] || function(){
return this.invoke(fnName, arguments);
};
}).call(CelProto, fnName);
}
}
})();
if(Ext.DomQuery){
Ext.Element.selectorFunction = Ext.DomQuery.select;
}
/**
* Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
* to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
* {@link Ext.CompositeElementLite CompositeElementLite} object.
* @param {String/Array} selector The CSS selector or an array of elements
* @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object) Not supported in core
* @param {HTMLElement/String} root (optional) The root element of the query or id of the root
* @return {CompositeElementLite/CompositeElement}
* @member Ext.Element