ext-foundation-debug.js
资源名称:ext-3.0.0.zip [点击查看]
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:503k
源码类别:
中间件编程
开发平台:
JavaScript
- } else if(pos) {
- me.setStyle(POSITION, pos);
- }
- if(zIndex){
- me.setStyle(ZINDEX, zIndex);
- }
- if(x || y) me.setXY([x || false, y || false]);
- },
- /**
- * Clear positioning back to the default when the document was loaded
- * @param {String} value (optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'.
- * @return {Ext.Element} this
- */
- clearPositioning : function(value){
- value = value || '';
- this.setStyle({
- left : value,
- right : value,
- top : value,
- bottom : value,
- "z-index" : "",
- position : STATIC
- });
- return this;
- },
- /**
- * Gets an object with all CSS positioning properties. Useful along with setPostioning to get
- * snapshot before performing an update and then restoring the element.
- * @return {Object}
- */
- getPositioning : function(){
- var l = this.getStyle(LEFT);
- var t = this.getStyle(TOP);
- return {
- "position" : this.getStyle(POSITION),
- "left" : l,
- "right" : l ? "" : this.getStyle(RIGHT),
- "top" : t,
- "bottom" : t ? "" : this.getStyle(BOTTOM),
- "z-index" : this.getStyle(ZINDEX)
- };
- },
- /**
- * Set positioning with an object returned by getPositioning().
- * @param {Object} posCfg
- * @return {Ext.Element} this
- */
- setPositioning : function(pc){
- var me = this,
- style = me.dom.style;
- me.setStyle(pc);
- if(pc.right == AUTO){
- style.right = "";
- }
- if(pc.bottom == AUTO){
- style.bottom = "";
- }
- return me;
- },
- /**
- * Translates the passed page coordinates into left/top css values for this element
- * @param {Number/Array} x The page x or an array containing [x, y]
- * @param {Number} y (optional) The page y, required if x is not an array
- * @return {Object} An object with left and top properties. e.g. {left: (value), top: (value)}
- */
- translatePoints : function(x, y){
- y = isNaN(x[1]) ? y : x[1];
- x = isNaN(x[0]) ? x : x[0];
- var me = this,
- relative = me.isStyle(POSITION, RELATIVE),
- o = me.getXY(),
- l = parseInt(me.getStyle(LEFT), 10),
- t = parseInt(me.getStyle(TOP), 10);
- l = !isNaN(l) ? l : (relative ? 0 : me.dom.offsetLeft);
- t = !isNaN(t) ? t : (relative ? 0 : me.dom.offsetTop);
- return {left: (x - o[0] + l), top: (y - o[1] + t)};
- },
- animTest : animTest
- });
- })();/**
- * @class Ext.Element
- */
- Ext.Element.addMethods({
- /**
- * Sets the element's box. Use getBox() on another element to get a box obj. If animate is true then width, height, x and y will be animated concurrently.
- * @param {Object} box The box to fill {x, y, width, height}
- * @param {Boolean} adjust (optional) Whether to adjust for box-model issues automatically
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
- * @return {Ext.Element} this
- */
- setBox : function(box, adjust, animate){
- var me = this,
- w = box.width,
- h = box.height;
- if((adjust && !me.autoBoxAdjust) && !me.isBorderBox()){
- w -= (me.getBorderWidth("lr") + me.getPadding("lr"));
- h -= (me.getBorderWidth("tb") + me.getPadding("tb"));
- }
- me.setBounds(box.x, box.y, w, h, me.animTest.call(me, arguments, animate, 2));
- return me;
- },
- /**
- * Return a box {x, y, width, height} that can be used to set another elements
- * size/location to match this element.
- * @param {Boolean} contentBox (optional) If true a box for the content of the element is returned.
- * @param {Boolean} local (optional) If true the element's left and top are returned instead of page x/y.
- * @return {Object} box An object in the format {x, y, width, height}
- */
- getBox : function(contentBox, local) {
- var me = this,
- xy,
- left,
- top,
- getBorderWidth = me.getBorderWidth,
- getPadding = me.getPadding,
- l,
- r,
- t,
- b;
- if(!local){
- xy = me.getXY();
- }else{
- left = parseInt(me.getStyle("left"), 10) || 0;
- top = parseInt(me.getStyle("top"), 10) || 0;
- xy = [left, top];
- }
- var el = me.dom, w = el.offsetWidth, h = el.offsetHeight, bx;
- if(!contentBox){
- bx = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: w, height: h};
- }else{
- l = getBorderWidth.call(me, "l") + getPadding.call(me, "l");
- r = getBorderWidth.call(me, "r") + getPadding.call(me, "r");
- t = getBorderWidth.call(me, "t") + getPadding.call(me, "t");
- b = getBorderWidth.call(me, "b") + getPadding.call(me, "b");
- bx = {x: xy[0]+l, y: xy[1]+t, 0: xy[0]+l, 1: xy[1]+t, width: w-(l+r), height: h-(t+b)};
- }
- bx.right = bx.x + bx.width;
- bx.bottom = bx.y + bx.height;
- return bx;
- },
- /**
- * Move this element relative to its current position.
- * @param {String} direction Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").
- * @param {Number} distance How far to move the element in pixels
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
- * @return {Ext.Element} this
- */
- move : function(direction, distance, animate){
- var me = this,
- xy = me.getXY(),
- x = xy[0],
- y = xy[1],
- left = [x - distance, y],
- right = [x + distance, y],
- top = [x, y - distance],
- bottom = [x, y + distance],
- hash = {
- l : left,
- left : left,
- r : right,
- right : right,
- t : top,
- top : top,
- up : top,
- b : bottom,
- bottom : bottom,
- down : bottom
- };
- direction = direction.toLowerCase();
- me.moveTo(hash[direction][0], hash[direction][1], me.animTest.call(me, arguments, animate, 2));
- },
- /**
- * Quick set left and top adding default units
- * @param {String} left The left CSS property value
- * @param {String} top The top CSS property value
- * @return {Ext.Element} this
- */
- setLeftTop : function(left, top){
- var me = this,
- style = me.dom.style;
- style.left = me.addUnits(left);
- style.top = me.addUnits(top);
- return me;
- },
- /**
- * Returns the region of the given element.
- * The element must be part of the DOM tree to have a region (display:none or elements not appended return false).
- * @return {Region} A Ext.lib.Region containing "top, left, bottom, right" member data.
- */
- getRegion : function(){
- return Ext.lib.Dom.getRegion(this.dom);
- },
- /**
- * Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.
- * @param {Number} x X value for new position (coordinates are page-based)
- * @param {Number} y Y value for new position (coordinates are page-based)
- * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
- * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels)</li>
- * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
- * </ul></div>
- * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
- * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels)</li>
- * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
- * </ul></div>
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
- * @return {Ext.Element} this
- */
- setBounds : function(x, y, width, height, animate){
- var me = this;
- if (!animate || !me.anim) {
- me.setSize(width, height);
- me.setLocation(x, y);
- } else {
- me.anim({points: {to: [x, y]},
- width: {to: me.adjustWidth(width)},
- height: {to: me.adjustHeight(height)}},
- me.preanim(arguments, 4),
- 'motion');
- }
- return me;
- },
- /**
- * Sets the element's position and size the specified region. If animation is true then width, height, x and y will be animated concurrently.
- * @param {Ext.lib.Region} region The region to fill
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
- * @return {Ext.Element} this
- */
- setRegion : function(region, animate) {
- return this.setBounds(region.left, region.top, region.right-region.left, region.bottom-region.top, this.animTest.call(this, arguments, animate, 1));
- }
- });/**
- * @class Ext.Element
- */
- Ext.Element.addMethods({
- /**
- * Returns true if this element is scrollable.
- * @return {Boolean}
- */
- isScrollable : function(){
- var dom = this.dom;
- return dom.scrollHeight > dom.clientHeight || dom.scrollWidth > dom.clientWidth;
- },
- /**
- * Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it will try to do it. For auto bounds checking, use scroll().
- * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
- * @param {Number} value The new scroll value.
- * @return {Element} this
- */
- scrollTo : function(side, value){
- this.dom["scroll" + (/top/i.test(side) ? "Top" : "Left")] = value;
- return this;
- },
- /**
- * Returns the current scroll position of the element.
- * @return {Object} An object containing the scroll position in the format {left: (scrollLeft), top: (scrollTop)}
- */
- getScroll : function(){
- var d = this.dom,
- doc = document,
- body = doc.body,
- docElement = doc.documentElement,
- l,
- t,
- ret;
- if(d == doc || d == body){
- if(Ext.isIE && Ext.isStrict){
- l = docElement.scrollLeft;
- t = docElement.scrollTop;
- }else{
- l = window.pageXOffset;
- t = window.pageYOffset;
- }
- ret = {left: l || (body ? body.scrollLeft : 0), top: t || (body ? body.scrollTop : 0)};
- }else{
- ret = {left: d.scrollLeft, top: d.scrollTop};
- }
- return ret;
- }
- });/**
- * @class Ext.Element
- */
- Ext.Element.addMethods({
- /**
- * Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it will try to do it. For auto bounds checking, use scroll().
- * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
- * @param {Number} value The new scroll value
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
- * @return {Element} this
- */
- scrollTo : function(side, value, animate){
- var tester = /top/i,
- prop = "scroll" + (tester.test(side) ? "Top" : "Left"),
- me = this,
- dom = me.dom;
- if (!animate || !me.anim) {
- dom[prop] = value;
- } else {
- me.anim({scroll: {to: tester.test(prop) ? [dom[prop], value] : [value, dom[prop]]}},
- me.preanim(arguments, 2), 'scroll');
- }
- return me;
- },
- /**
- * Scrolls this element into view within the passed container.
- * @param {Mixed} container (optional) The container element to scroll (defaults to document.body). Should be a
- * string (id), dom node, or Ext.Element.
- * @param {Boolean} hscroll (optional) False to disable horizontal scroll (defaults to true)
- * @return {Ext.Element} this
- */
- scrollIntoView : function(container, hscroll){
- var c = Ext.getDom(container) || Ext.getBody().dom,
- el = this.dom,
- o = this.getOffsetsTo(c),
- l = o[0] + c.scrollLeft,
- t = o[1] + c.scrollTop,
- b = t + el.offsetHeight,
- r = l + el.offsetWidth,
- ch = c.clientHeight,
- ct = parseInt(c.scrollTop, 10),
- cl = parseInt(c.scrollLeft, 10),
- cb = ct + ch,
- cr = cl + c.clientWidth;
- if (el.offsetHeight > ch || t < ct) {
- c.scrollTop = t;
- } else if (b > cb){
- c.scrollTop = b-ch;
- }
- c.scrollTop = c.scrollTop; // corrects IE, other browsers will ignore
- if(hscroll !== false){
- if(el.offsetWidth > c.clientWidth || l < cl){
- c.scrollLeft = l;
- }else if(r > cr){
- c.scrollLeft = r - c.clientWidth;
- }
- c.scrollLeft = c.scrollLeft;
- }
- return this;
- },
- // private
- scrollChildIntoView : function(child, hscroll){
- Ext.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);
- },
- /**
- * Scrolls this element the specified direction. Does bounds checking to make sure the scroll is
- * within this element's scrollable range.
- * @param {String} direction Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").
- * @param {Number} distance How far to scroll the element in pixels
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
- * @return {Boolean} Returns true if a scroll was triggered or false if the element
- * was scrolled as far as it could go.
- */
- scroll : function(direction, distance, animate){
- if(!this.isScrollable()){
- return;
- }
- var el = this.dom,
- l = el.scrollLeft, t = el.scrollTop,
- w = el.scrollWidth, h = el.scrollHeight,
- cw = el.clientWidth, ch = el.clientHeight,
- scrolled = false, v,
- hash = {
- l: Math.min(l + distance, w-cw),
- r: v = Math.max(l - distance, 0),
- t: Math.max(t - distance, 0),
- b: Math.min(t + distance, h-ch)
- };
- hash.d = hash.b;
- hash.u = hash.t;
- direction = direction.substr(0, 1);
- if((v = hash[direction]) > -1){
- scrolled = true;
- this.scrollTo(direction == 'l' || direction == 'r' ? 'left' : 'top', v, this.preanim(arguments, 2));
- }
- return scrolled;
- }
- });/**
- * @class Ext.Element
- */
- /**
- * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element
- * @static
- * @type Number
- */
- Ext.Element.VISIBILITY = 1;
- /**
- * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element
- * @static
- * @type Number
- */
- Ext.Element.DISPLAY = 2;
- Ext.Element.addMethods(function(){
- var VISIBILITY = "visibility",
- DISPLAY = "display",
- HIDDEN = "hidden",
- NONE = "none",
- ORIGINALDISPLAY = 'originalDisplay',
- VISMODE = 'visibilityMode',
- ELDISPLAY = Ext.Element.DISPLAY,
- data = Ext.Element.data,
- getDisplay = function(dom){
- var d = data(dom, ORIGINALDISPLAY);
- if(d === undefined){
- data(dom, ORIGINALDISPLAY, d = '');
- }
- return d;
- },
- getVisMode = function(dom){
- var m = data(dom, VISMODE);
- if(m === undefined){
- data(dom, VISMODE, m = 1)
- }
- return m;
- };
- return {
- /**
- * The element's default display mode (defaults to "")
- * @type String
- */
- originalDisplay : "",
- visibilityMode : 1,
- /**
- * Sets the element's visibility mode. When setVisible() is called it
- * will use this to determine whether to set the visibility or the display property.
- * @param visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY
- * @return {Ext.Element} this
- */
- setVisibilityMode : function(visMode){
- data(this.dom, VISMODE, visMode);
- return this;
- },
- /**
- * Perform custom animation on this element.
- * <div><ul class="mdetail-params">
- * <li><u>Animation Properties</u></li>
- *
- * <p>The Animation Control Object enables gradual transitions for any member of an
- * element's style object that takes a numeric value including but not limited to
- * these properties:</p><div><ul class="mdetail-params">
- * <li><tt>bottom, top, left, right</tt></li>
- * <li><tt>height, width</tt></li>
- * <li><tt>margin, padding</tt></li>
- * <li><tt>borderWidth</tt></li>
- * <li><tt>opacity</tt></li>
- * <li><tt>fontSize</tt></li>
- * <li><tt>lineHeight</tt></li>
- * </ul></div>
- *
- *
- * <li><u>Animation Property Attributes</u></li>
- *
- * <p>Each Animation Property is a config object with optional properties:</p>
- * <div><ul class="mdetail-params">
- * <li><tt>by</tt>* : relative change - start at current value, change by this value</li>
- * <li><tt>from</tt> : ignore current value, start from this value</li>
- * <li><tt>to</tt>* : start at current value, go to this value</li>
- * <li><tt>unit</tt> : any allowable unit specification</li>
- * <p>* do not specify both <tt>to</tt> and <tt>by</tt> for an animation property</p>
- * </ul></div>
- *
- * <li><u>Animation Types</u></li>
- *
- * <p>The supported animation types:</p><div><ul class="mdetail-params">
- * <li><tt>'run'</tt> : Default
- * <pre><code>
- var el = Ext.get('complexEl');
- el.animate(
- // animation control object
- {
- borderWidth: {to: 3, from: 0},
- opacity: {to: .3, from: 1},
- height: {to: 50, from: el.getHeight()},
- width: {to: 300, from: el.getWidth()},
- top : {by: - 100, unit: 'px'},
- },
- 0.35, // animation duration
- null, // callback
- 'easeOut', // easing method
- 'run' // animation type ('run','color','motion','scroll')
- );
- * </code></pre>
- * </li>
- * <li><tt>'color'</tt>
- * <p>Animates transition of background, text, or border colors.</p>
- * <pre><code>
- el.animate(
- // animation control object
- {
- color: { to: '#06e' },
- backgroundColor: { to: '#e06' }
- },
- 0.35, // animation duration
- null, // callback
- 'easeOut', // easing method
- 'color' // animation type ('run','color','motion','scroll')
- );
- * </code></pre>
- * </li>
- *
- * <li><tt>'motion'</tt>
- * <p>Animates the motion of an element to/from specific points using optional bezier
- * way points during transit.</p>
- * <pre><code>
- el.animate(
- // animation control object
- {
- borderWidth: {to: 3, from: 0},
- 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>
- * <p>Animate horizontal or vertical scrolling of an overflowing page element.</p>
- * <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
- * <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 {@link Ext.Element}.
- * Conversely, since the effects are not actually defined in {@link Ext.Element}, Ext.Fx <b>must</b> be
- * {@link Ext#enableFx included} in order for the Element effects to work.</p><br/>
- *
- * <p><b><u>Method Chaining</u></b></p>
- * <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. Also see <tt>{@link #callback}</tt>.</p><br/>
- *
- * <p><b><u>Anchor Options for Motion Effects</u></b></p>
- * <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>Note</b>: 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.</b>
- *
- * @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 <b><u>Method Chaining</u></b> 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:</p><div class="mdetail-params"><ul>
- * <li><b><tt>backBoth</tt></b></li>
- * <li><b><tt>backIn</tt></b></li>
- * <li><b><tt>backOut</tt></b></li>
- * <li><b><tt>bounceBoth</tt></b></li>
- * <li><b><tt>bounceIn</tt></b></li>
- * <li><b><tt>bounceOut</tt></b></li>
- * <li><b><tt>easeBoth</tt></b></li>
- * <li><b><tt>easeBothStrong</tt></b></li>
- * <li><b><tt>easeIn</tt></b></li>
- * <li><b><tt>easeInStrong</tt></b></li>
- * <li><b><tt>easeNone</tt></b></li>
- * <li><b><tt>easeOut</tt></b></li>
- * <li><b><tt>easeOutStrong</tt></b></li>
- * <li><b><tt>elasticBoth</tt></b></li>
- * <li><b><tt>elasticIn</tt></b></li>
- * <li><b><tt>elasticOut</tt></b></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 <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. <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><br><br>
- * <b>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.</b>
- */
- 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. <b>The element
- * passed is the flyweight (shared) Ext.Element instance, so if you require a
- * a reference to the dom node, use el.dom.</b>
- * @param {Function} fn The function to call
- * @param {Object} scope (optional) The <i>this</i> 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) <b>Not supported in core</b>
- * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
- * @return {CompositeElementLite/CompositeElement}
- * @member Ext.Element
- * @method select
- */
- Ext.Element.select = function(selector, unique, root){
- var els;
- if(typeof selector == "string"){
- els = Ext.Element.selectorFunction(selector, root);
- }else if(selector.length !== undefined){
- els = selector;
- }else{
- throw "Invalid selector";
- }
- return new Ext.CompositeElementLite(els);
- };
- /**
- * 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.