extjs-rails 4.1.0.alpha5 → 4.1.0.alpha6

data/app/assets/javascripts/src/direct/Transaction.js

@@ -1,41 +0,0 @@
-/**
- * Supporting Class for Ext.Direct (not intended to be used directly).
- */
-Ext.define('Ext.direct.Transaction', {
-    
-    /* Begin Definitions */
-   
-    alias: 'direct.transaction',
-    alternateClassName: 'Ext.Direct.Transaction',
-   
-    statics: {
-        TRANSACTION_ID: 0
-    },
-   
-    /* End Definitions */
-
-    /**
-     * Creates new Transaction.
-     * @param {Object} [config] Config object.
-     */
-    constructor: function(config){
-        var me = this;
-        
-        Ext.apply(me, config);
-        me.id = me.tid = ++me.self.TRANSACTION_ID;
-        me.retryCount = 0;
-    },
-   
-    send: function(){
-         this.provider.queueTransaction(this);
-    },
-
-    retry: function(){
-        this.retryCount++;
-        this.send();
-    },
-
-    getProvider: function(){
-        return this.provider;
-    }
-});

data/app/assets/javascripts/src/dom/Element.alignment.js

@@ -1,378 +0,0 @@
-/**
- * @class Ext.dom.Element
- */
-Ext.dom.Element.override((function() {
-
-    var doc = document,
-        win = window,
-        alignRe = /^([a-z]+)-([a-z]+)(\?)?$/,
-        round = Math.round;
-
-    return {
-
-        /**
-         * Gets the x,y coordinates specified by the anchor position on the element.
-         * @param {String} [anchor='c'] The specified anchor position.  See {@link #alignTo}
-         * for details on supported anchor positions.
-         * @param {Boolean} [local] True to get the local (element top/left-relative) anchor position instead
-         * of page coordinates
-         * @param {Object} [size] An object containing the size to use for calculating anchor position
-         * {width: (target width), height: (target height)} (defaults to the element's current size)
-         * @return {Number[]} [x, y] An array containing the element's x and y coordinates
-         */
-        getAnchorXY: function(anchor, local, mySize) {
-            //Passing a different size is useful for pre-calculating anchors,
-            //especially for anchored animations that change the el size.
-            anchor = (anchor || "tl").toLowerCase();
-            mySize = mySize || {};
-
-            var me = this,
-                isViewport = me.dom == doc.body || me.dom == doc,
-                myWidth = mySize.width || isViewport ? Ext.dom.Element.getViewWidth() : me.getWidth(),
-                myHeight = mySize.height || isViewport ? Ext.dom.Element.getViewHeight() : me.getHeight(),
-                xy,
-                myPos = me.getXY(),
-                scroll = me.getScroll(),
-                extraX = isViewport ? scroll.left : !local ? myPos[0] : 0,
-                extraY = isViewport ? scroll.top : !local ? myPos[1] : 0;
-
-            // Calculate anchor position.
-            // Test most common cases for picker alignment first.
-            switch (anchor) {
-                case 'tl' : xy = [ 0,                    0];
-                            break;
-                case 'bl' : xy = [ 0,                    myHeight];
-                            break;
-                case 'tr' : xy = [ myWidth,              0];
-                            break;
-                case 'c'  : xy = [ round(myWidth * 0.5), round(myHeight * 0.5)];
-                            break;
-                case 't'  : xy = [ round(myWidth * 0.5), 0];
-                            break;
-                case 'l'  : xy = [ 0,                    round(myHeight * 0.5)];
-                            break;
-                case 'r'  : xy = [ myWidth,              round(myHeight * 0.5)];
-                            break;
-                case 'b'  : xy = [ round(myWidth * 0.5), myHeight];
-                            break;
-                case 'br' : xy = [ myWidth,              myHeight];
-            }
-            return [xy[0] + extraX, xy[1] + extraY];
-        },
-
-        /**
-         * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
-         * supported position values.
-         * @param {String/HTMLElement/Ext.Element} element The element to align to.
-         * @param {String} [position="tl-bl?"] The position to align to (defaults to )
-         * @param {Number[]} [offsets] Offset the positioning by [x, y]
-         * @return {Number[]} [x, y]
-         */
-        getAlignToXY : function(alignToEl, posSpec, offset) {
-            alignToEl = Ext.get(alignToEl);
-
-            if (!alignToEl || !alignToEl.dom) {
-                //<debug>
-                Ext.Error.raise({
-                    sourceClass: 'Ext.dom.Element',
-                    sourceMethod: 'getAlignToXY',
-                    msg: 'Attempted to align an element that doesn\'t exist'
-                });
-                //</debug>
-            }
-
-            offset = offset || [0,0];
-            posSpec = (!posSpec || posSpec == "?" ? "tl-bl?" : (!(/-/).test(posSpec) && posSpec !== "" ? "tl-" + posSpec : posSpec || "tl-bl")).toLowerCase();
-
-            var me = this,
-                    myPosition,
-                    alignToElPosition,
-                    x,
-                    y,
-                    myWidth,
-                    myHeight,
-                    alignToElRegion,
-                    viewportWidth = Ext.dom.Element.getViewWidth() - 10, // 10px of margin for ie
-                    viewportHeight = Ext.dom.Element.getViewHeight() - 10, // 10px of margin for ie
-                    p1y,
-                    p1x,
-                    p2y,
-                    p2x,
-                    swapY,
-                    swapX,
-                    docElement = doc.documentElement,
-                    docBody = doc.body,
-                    scrollX = (docElement.scrollLeft || docBody.scrollLeft || 0),// + 5, WHY was 5 ever added?
-                    scrollY = (docElement.scrollTop  || docBody.scrollTop  || 0),// + 5, It means align will fail if the alignTo el was at less than 5,5
-                    constrain, //constrain to viewport
-                    align1,
-                    align2,
-                    alignMatch = posSpec.match(alignRe);
-
-            //<debug>
-            if (!alignMatch) {
-                Ext.Error.raise({
-                    sourceClass: 'Ext.dom.Element',
-                    sourceMethod: 'getAlignToXY',
-                    el: alignToEl,
-                    position: posSpec,
-                    offset: offset,
-                    msg: 'Attemmpted to align an element with an invalid position: "' + posSpec + '"'
-                });
-            }
-            //</debug>
-
-            align1 = alignMatch[1];
-            align2 = alignMatch[2];
-            constrain = !!alignMatch[3];
-
-            //Subtract the aligned el's internal xy from the target's offset xy
-            //plus custom offset to get this Element's new offset xy
-            myPosition = me.getAnchorXY(align1, true);
-            alignToElPosition = alignToEl.getAnchorXY(align2, false);
-
-            x = alignToElPosition[0] - myPosition[0] + offset[0];
-            y = alignToElPosition[1] - myPosition[1] + offset[1];
-
-            // If position spec ended with a "?", then constrain to viewport is necessary
-            if (constrain) {
-                myWidth = me.getWidth();
-                myHeight = me.getHeight();
-                alignToElRegion = alignToEl.getRegion();
-                //If we are at a viewport boundary and the aligned el is anchored on a target border that is
-                //perpendicular to the vp border, allow the aligned el to slide on that border,
-                //otherwise swap the aligned el to the opposite border of the target.
-                p1y = align1.charAt(0);
-                p1x = align1.charAt(align1.length - 1);
-                p2y = align2.charAt(0);
-                p2x = align2.charAt(align2.length - 1);
-                swapY = ((p1y == "t" && p2y == "b") || (p1y == "b" && p2y == "t"));
-                swapX = ((p1x == "r" && p2x == "l") || (p1x == "l" && p2x == "r"));
-
-                if (x + myWidth > viewportWidth + scrollX) {
-                    x = swapX ? alignToElRegion.left - myWidth : viewportWidth + scrollX - myWidth;
-                }
-                if (x < scrollX) {
-                    x = swapX ? alignToElRegion.right : scrollX;
-                }
-                if (y + myHeight > viewportHeight + scrollY) {
-                    y = swapY ? alignToElRegion.top - myHeight : viewportHeight + scrollY - myHeight;
-                }
-                if (y < scrollY) {
-                    y = swapY ? alignToElRegion.bottom : scrollY;
-                }
-            }
-            return [x,y];
-        },
-
-
-        /**
-         * Anchors an element to another element and realigns it when the window is resized.
-         * @param {String/HTMLElement/Ext.Element} element The element to align to.
-         * @param {String} position The position to align to.
-         * @param {Number[]} [offsets] Offset the positioning by [x, y]
-         * @param {Boolean/Object} [animate] True for the default animation or a standard Element animation config object
-         * @param {Boolean/Number} [monitorScroll] True to monitor body scroll and reposition. If this parameter
-         * is a number, it is used as the buffer delay (defaults to 50ms).
-         * @param {Function} [callback] The function to call after the animation finishes
-         * @return {Ext.Element} this
-         */
-        anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback) {
-            var me = this,
-                dom = me.dom,
-                scroll = !Ext.isEmpty(monitorScroll),
-                action = function() {
-                    Ext.fly(dom).alignTo(el, alignment, offsets, animate);
-                    Ext.callback(callback, Ext.fly(dom));
-                },
-                anchor = this.getAnchor();
-
-            // previous listener anchor, remove it
-            this.removeAnchor();
-            Ext.apply(anchor, {
-                fn: action,
-                scroll: scroll
-            });
-
-            Ext.EventManager.onWindowResize(action, null);
-
-            if (scroll) {
-                Ext.EventManager.on(win, 'scroll', action, null,
-                        {buffer: !isNaN(monitorScroll) ? monitorScroll : 50});
-            }
-            action.call(me); // align immediately
-            return me;
-        },
-
-        /**
-         * Remove any anchor to this element. See {@link #anchorTo}.
-         * @return {Ext.dom.Element} this
-         */
-        removeAnchor : function() {
-            var me = this,
-                anchor = this.getAnchor();
-
-            if (anchor && anchor.fn) {
-                Ext.EventManager.removeResizeListener(anchor.fn);
-                if (anchor.scroll) {
-                    Ext.EventManager.un(win, 'scroll', anchor.fn);
-                }
-                delete anchor.fn;
-            }
-            return me;
-        },
-
-        getAlignVector: function(el, spec, offset) {
-            var me = this,
-                myPos = me.getXY(),
-                alignedPos = me.getAlignToXY(el, spec, offset);
-
-            el = Ext.get(el);
-            //<debug>
-            if (!el || !el.dom) {
-                Ext.Error.raise({
-                    sourceClass: 'Ext.dom.Element',
-                    sourceMethod: 'getAlignVector',
-                    msg: 'Attempted to align an element that doesn\'t exist'
-                });
-            }
-            //</debug>
-
-            alignedPos[0] -= myPos[0];
-            alignedPos[1] -= myPos[1];
-            return alignedPos;
-        },
-
-        /**
-         * Aligns this element with another element relative to the specified anchor points. If the other element is the
-         * document it aligns it to the viewport. The position parameter is optional, and can be specified in any one of
-         * the following formats:
-         *
-         * - **Blank**: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").
-         * - **One anchor (deprecated)**: The passed anchor position is used as the target element's anchor point.
-         *   The element being aligned will position its top-left corner (tl) to that point. *This method has been
-         *   deprecated in favor of the newer two anchor syntax below*.
-         * - **Two anchors**: If two values from the table below are passed separated by a dash, the first value is used as the
-         *   element's anchor point, and the second value is used as the target's anchor point.
-         *
-         * In addition to the anchor points, the position parameter also supports the "?" character.  If "?" is passed at the end of
-         * the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to
-         * the viewport if necessary.  Note that the element being aligned might be swapped to align to a different position than
-         * that specified in order to enforce the viewport constraints.
-         * Following are all of the supported anchor positions:
-         *
-         * <pre>
-         * Value  Description
-         * -----  -----------------------------
-         * tl     The top left corner (default)
-         * t      The center of the top edge
-         * tr     The top right corner
-         * l      The center of the left edge
-         * c      In the center of the element
-         * 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>
-         *
-         * Example Usage:
-         *
-         *     // align el to other-el using the default positioning ("tl-bl", non-constrained)
-         *     el.alignTo("other-el");
-         *
-         *     // align the top left corner of el with the top right corner of other-el (constrained to viewport)
-         *     el.alignTo("other-el", "tr?");
-         *
-         *     // align the bottom right corner of el with the center left edge of other-el
-         *     el.alignTo("other-el", "br-l?");
-         *
-         *     // align the center of el with the bottom left corner of other-el and
-         *     // adjust the x position by -6 pixels (and the y position by 0)
-         *     el.alignTo("other-el", "c-bl", [-6, 0]);
-         *
-         * @param {String/HTMLElement/Ext.Element} element The element to align to.
-         * @param {String} [position="tl-bl?"] The position to align to
-         * @param {Number[]} [offsets] Offset the positioning by [x, y]
-         * @param {Boolean/Object} [animate] true for the default animation or a standard Element animation config object
-         * @return {Ext.Element} this
-         */
-        alignTo: function(element, position, offsets, animate) {
-            var me = this;
-            return me.setXY(me.getAlignToXY(element, position, offsets),
-                    me.anim && !!animate ? me.anim(animate) : false);
-        },
-
-        /**
-         * Returns the `[X, Y]` vector by which this element must be translated to make a best attempt
-         * to constrain within the passed constraint. Returns `false` is this element does not need to be moved.
-         *
-         * Priority is given to constraining the top and left within the constraint.
-         *
-         * The constraint may either be an existing element into which this element is to be constrained, or
-         * an {@link Ext.util.Region Region} into which this element is to be constrained.
-         *
-         * @param {Ext.Element/Ext.util.Region} constrainTo The Element or Region into which this element is to be constrained.
-         * @param {Number[]} proposedPosition A proposed `[X, Y]` position to test for validity and to produce a vector for instead
-         * of using this Element's current position;
-         * @returns {Number[]/Boolean} **If** this element *needs* to be translated, an `[X, Y]`
-         * vector by which this element must be translated. Otherwise, `false`.
-         */
-        getConstrainVector: function(constrainTo, proposedPosition) {
-            if (!(constrainTo instanceof Ext.util.Region)) {
-                constrainTo = Ext.get(constrainTo).getViewRegion();
-            }
-            var thisRegion = this.getRegion(),
-                    vector = [0, 0],
-                    shadowSize = this.shadow && this.shadow.offset,
-                    overflowed = false;
-
-            // Shift this region to occupy the proposed position
-            if (proposedPosition) {
-                thisRegion.translateBy(proposedPosition[0] - thisRegion.x, proposedPosition[1] - thisRegion.y);
-            }
-
-            // Reduce the constrain region to allow for shadow
-            // TODO: Rewrite the Shadow class. When that's done, get the extra for each side from the Shadow.
-            if (shadowSize) {
-                constrainTo.adjust(0, -shadowSize, -shadowSize, shadowSize);
-            }
-
-            // Constrain the X coordinate by however much this Element overflows
-            if (thisRegion.right > constrainTo.right) {
-                overflowed = true;
-                vector[0] = (constrainTo.right - thisRegion.right);    // overflowed the right
-            }
-            if (thisRegion.left + vector[0] < constrainTo.left) {
-                overflowed = true;
-                vector[0] = (constrainTo.left - thisRegion.left);      // overflowed the left
-            }
-
-            // Constrain the Y coordinate by however much this Element overflows
-            if (thisRegion.bottom > constrainTo.bottom) {
-                overflowed = true;
-                vector[1] = (constrainTo.bottom - thisRegion.bottom);  // overflowed the bottom
-            }
-            if (thisRegion.top + vector[1] < constrainTo.top) {
-                overflowed = true;
-                vector[1] = (constrainTo.top - thisRegion.top);        // overflowed the top
-            }
-            return overflowed ? vector : false;
-        },
-
-        /**
-        * Calculates the x, y to center this element on the screen
-        * @return {Number[]} The x, y values [x, y]
-        */
-        getCenterXY : function(){
-            return this.getAlignToXY(doc, 'c-c');
-        },
-
-        /**
-        * Centers the Element in either the viewport, or another Element.
-        * @param {String/HTMLElement/Ext.Element} [centerIn] The element in which to center the element.
-        */
-        center : function(centerIn){
-            return this.alignTo(centerIn || doc, 'c-c');
-        }
-    };
-}()));

data/app/assets/javascripts/src/dom/Element.anim.js

@@ -1,962 +0,0 @@
-/**
- * @class Ext.dom.Element
- */
-/* ================================
- * A Note About Wrapped Animations
- * ================================
- * A few of the effects below implement two different animations per effect, one wrapping
- * animation that performs the visual effect and a "no-op" animation on this Element where
- * no attributes of the element itself actually change. The purpose for this is that the
- * wrapper is required for the effect to work and so it does the actual animation work, but
- * we always animate `this` so that the element's events and callbacks work as expected to
- * the callers of this API.
- * 
- * Because of this, we always want each wrap animation to complete first (we don't want to
- * cut off the visual effect early). To ensure that, we arbitrarily increase the duration of
- * the element's no-op animation, also ensuring that it has a decent minimum value -- on slow
- * systems, too-low durations can cause race conditions between the wrap animation and the
- * element animation being removed out of order. Note that in each wrap's `afteranimate`
- * callback it will explicitly terminate the element animation as soon as the wrap is complete,
- * so there's no real danger in making the duration too long.
- * 
- * This applies to all effects that get wrapped, including slideIn, slideOut, switchOff and frame.
- */
-
-Ext.dom.Element.override({
-    // @private override base Ext.util.Animate mixin for animate for backwards compatibility
-    animate: function(config) {
-        var me = this,
-            listeners,
-            anim,
-            animId = me.dom.id || Ext.id(me.dom);
-
-        if (!Ext.fx.Manager.hasFxBlock(animId)) {
-            // Bit of gymnastics here to ensure our internal listeners get bound first
-            if (config.listeners) {
-                listeners = config.listeners;
-                delete config.listeners;
-            }
-            if (config.internalListeners) {
-                config.listeners = config.internalListeners;
-                delete config.internalListeners;
-            }
-            anim = new Ext.fx.Anim(me.anim(config));
-            if (listeners) {
-                anim.on(listeners);
-            }
-            Ext.fx.Manager.queueFx(anim);
-        }
-        return me;
-    },
-
-    // @private override base Ext.util.Animate mixin for animate for backwards compatibility
-    anim: function(config) {
-        if (!Ext.isObject(config)) {
-            return (config) ? {} : false;
-        }
-
-        var me = this,
-            duration = config.duration || Ext.fx.Anim.prototype.duration,
-            easing = config.easing || 'ease',
-            animConfig;
-
-        if (config.stopAnimation) {
-            me.stopAnimation();
-        }
-
-        Ext.applyIf(config, Ext.fx.Manager.getFxDefaults(me.id));
-
-        // Clear any 'paused' defaults.
-        Ext.fx.Manager.setFxDefaults(me.id, {
-            delay: 0
-        });
-
-        animConfig = {
-            // Pass the DOM reference. That's tested first so will be converted to an Ext.fx.Target fastest.
-            target: me.dom,
-            remove: config.remove,
-            alternate: config.alternate || false,
-            duration: duration,
-            easing: easing,
-            callback: config.callback,
-            listeners: config.listeners,
-            iterations: config.iterations || 1,
-            scope: config.scope,
-            block: config.block,
-            concurrent: config.concurrent,
-            delay: config.delay || 0,
-            paused: true,
-            keyframes: config.keyframes,
-            from: config.from || {},
-            to: Ext.apply({}, config)
-        };
-        Ext.apply(animConfig.to, config.to);
-
-        // Anim API properties - backward compat
-        delete animConfig.to.to;
-        delete animConfig.to.from;
-        delete animConfig.to.remove;
-        delete animConfig.to.alternate;
-        delete animConfig.to.keyframes;
-        delete animConfig.to.iterations;
-        delete animConfig.to.listeners;
-        delete animConfig.to.target;
-        delete animConfig.to.paused;
-        delete animConfig.to.callback;
-        delete animConfig.to.scope;
-        delete animConfig.to.duration;
-        delete animConfig.to.easing;
-        delete animConfig.to.concurrent;
-        delete animConfig.to.block;
-        delete animConfig.to.stopAnimation;
-        delete animConfig.to.delay;
-        return animConfig;
-    },
-
-    /**
-     * 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:
-     *
-     *     // 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: 2000 });
-     *
-     *     // common config options shown with default values
-     *     el.slideIn('t', {
-     *         easing: 'easeOut',
-     *         duration: 500
-     *     });
-     *
-     * @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
-     * @param {Boolean} options.preserveScroll Set to true if preservation of any descendant elements'
-     * `scrollTop` values is required. By default the DOM wrapping operation performed by `slideIn` and
-     * `slideOut` causes the browser to lose all scroll positions.
-     * @return {Ext.dom.Element} The Element
-     */
-    slideIn: function(anchor, obj, slideOut) {
-        var me = this,
-            elStyle = me.dom.style,
-            beforeAnim,
-            wrapAnim,
-            restoreScroll,
-            wrapDomParentNode;
-
-        anchor = anchor || "t";
-        obj = obj || {};
-
-        beforeAnim = function() {
-            var animScope = this,
-                listeners = obj.listeners,
-                box, originalStyles, anim, wrap;
-
-            if (!slideOut) {
-                me.fixDisplay();
-            }
-
-            box = me.getBox();
-            if ((anchor == 't' || anchor == 'b') && box.height === 0) {
-                box.height = me.dom.scrollHeight;
-            }
-            else if ((anchor == 'l' || anchor == 'r') && box.width === 0) {
-                box.width = me.dom.scrollWidth;
-            }
-
-            originalStyles = me.getStyles('width', 'height', 'left', 'right', 'top', 'bottom', 'position', 'z-index', true);
-            me.setSize(box.width, box.height);
-
-            // Cache all descendants' scrollTop & scrollLeft values if configured to preserve scroll.
-            if (obj.preserveScroll) {
-                restoreScroll = me.cacheScrollValues();
-            }
-
-            wrap = me.wrap({
-                id: Ext.id() + '-anim-wrap-for-' + me.id,
-                style: {
-                    visibility: slideOut ? 'visible' : 'hidden'
-                }
-            });
-            wrapDomParentNode = wrap.dom.parentNode;
-            wrap.setPositioning(me.getPositioning());
-            if (wrap.isStyle('position', 'static')) {
-                wrap.position('relative');
-            }
-            me.clearPositioning('auto');
-            wrap.clip();
-
-            // The wrap will have reset all descendant scrollTops. Restore them if we cached them.
-            if (restoreScroll) {
-                restoreScroll();
-            }
-
-            // This element is temporarily positioned absolute within its wrapper.
-            // Restore to its default, CSS-inherited visibility setting.
-            // We cannot explicitly poke visibility:visible into its style because that overrides the visibility of the wrap.
-            me.setStyle({
-                visibility: '',
-                position: 'absolute'
-            });
-            if (slideOut) {
-                wrap.setSize(box.width, box.height);
-            }
-
-            switch (anchor) {
-                case 't':
-                    anim = {
-                        from: {
-                            width: box.width + 'px',
-                            height: '0px'
-                        },
-                        to: {
-                            width: box.width + 'px',
-                            height: box.height + 'px'
-                        }
-                    };
-                    elStyle.bottom = '0px';
-                    break;
-                case 'l':
-                    anim = {
-                        from: {
-                            width: '0px',
-                            height: box.height + 'px'
-                        },
-                        to: {
-                            width: box.width + 'px',
-                            height: box.height + 'px'
-                        }
-                    };
-                    elStyle.right = '0px';
-                    break;
-                case 'r':
-                    anim = {
-                        from: {
-                            x: box.x + box.width,
-                            width: '0px',
-                            height: box.height + 'px'
-                        },
-                        to: {
-                            x: box.x,
-                            width: box.width + 'px',
-                            height: box.height + 'px'
-                        }
-                    };
-                    break;
-                case 'b':
-                    anim = {
-                        from: {
-                            y: box.y + box.height,
-                            width: box.width + 'px',
-                            height: '0px'
-                        },
-                        to: {
-                            y: box.y,
-                            width: box.width + 'px',
-                            height: box.height + 'px'
-                        }
-                    };
-                    break;
-                case 'tl':
-                    anim = {
-                        from: {
-                            x: box.x,
-                            y: box.y,
-                            width: '0px',
-                            height: '0px'
-                        },
-                        to: {
-                            width: box.width + 'px',
-                            height: box.height + 'px'
-                        }
-                    };
-                    elStyle.bottom = '0px';
-                    elStyle.right = '0px';
-                    break;
-                case 'bl':
-                    anim = {
-                        from: {
-                            x: box.x + box.width,
-                            width: '0px',
-                            height: '0px'
-                        },
-                        to: {
-                            x: box.x,
-                            width: box.width + 'px',
-                            height: box.height + 'px'
-                        }
-                    };
-                    elStyle.right = '0px';
-                    break;
-                case 'br':
-                    anim = {
-                        from: {
-                            x: box.x + box.width,
-                            y: box.y + box.height,
-                            width: '0px',
-                            height: '0px'
-                        },
-                        to: {
-                            x: box.x,
-                            y: box.y,
-                            width: box.width + 'px',
-                            height: box.height + 'px'
-                        }
-                    };
-                    break;
-                case 'tr':
-                    anim = {
-                        from: {
-                            y: box.y + box.height,
-                            width: '0px',
-                            height: '0px'
-                        },
-                        to: {
-                            y: box.y,
-                            width: box.width + 'px',
-                            height: box.height + 'px'
-                        }
-                    };
-                    elStyle.bottom = '0px';
-                    break;
-            }
-
-            wrap.show();
-            wrapAnim = Ext.apply({}, obj);
-            delete wrapAnim.listeners;
-            wrapAnim = new Ext.fx.Anim(Ext.applyIf(wrapAnim, {
-                target: wrap,
-                duration: 500,
-                easing: 'ease-out',
-                from: slideOut ? anim.to : anim.from,
-                to: slideOut ? anim.from : anim.to
-            }));
-
-            // In the absence of a callback, this listener MUST be added first
-            wrapAnim.on('afteranimate', function() {
-                me.setStyle(originalStyles);
-                if (slideOut) {
-                    if (obj.useDisplay) {
-                        me.setDisplayed(false);
-                    } else {
-                        me.hide();
-                    }
-                }
-                if (wrap.dom) {
-                    if (wrap.dom.parentNode) {
-                        wrap.dom.parentNode.insertBefore(me.dom, wrap.dom);
-                    } else {
-                        wrapDomParentNode.appendChild(me.dom);
-                    }
-                    wrap.remove();
-                }
-                // The unwrap will have reset all descendant scrollTops. Restore them if we cached them.
-                if (restoreScroll) {
-                    restoreScroll();
-                }
-                // kill the no-op element animation created below
-                animScope.end();
-            });
-            // Add configured listeners after
-            if (listeners) {
-                wrapAnim.on(listeners);
-            }
-        };
-
-        me.animate({
-            // See "A Note About Wrapped Animations" at the top of this class:
-            duration: obj.duration ? Math.max(obj.duration, 500) * 2 : 1000,
-            listeners: {
-                beforeanimate: beforeAnim // kick off the wrap animation
-            }
-        });
-        return me;
-    },
-
-
-    /**
-     * Slides the element out of view. An anchor point can be optionally passed to set the end point for the slide
-     * effect. When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will
-     * still take up space in the document. The element must be removed from the DOM using the 'remove' config option if
-     * desired. This function automatically handles wrapping the element with a fixed-size container if needed. See the
-     * Fx class overview for valid anchor point options. Usage:
-     *
-     *     // default: slide the element out to the top
-     *     el.slideOut();
-     *
-     *     // custom: slide the element out to the right with a 2-second duration
-     *     el.slideOut('r', { duration: 2000 });
-     *
-     *     // common config options shown with default values
-     *     el.slideOut('t', {
-     *         easing: 'easeOut',
-     *         duration: 500,
-     *         remove: false,
-     *         useDisplay: false
-     *     });
-     *
-     * @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.dom.Element} The Element
-     */
-    slideOut: function(anchor, o) {
-        return this.slideIn(anchor, o, true);
-    },
-
-    /**
-     * 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. Usage:
-     *
-     *     // default
-     *     el.puff();
-     *
-     *     // common config options shown with default values
-     *     el.puff({
-     *         easing: 'easeOut',
-     *         duration: 500,
-     *         useDisplay: false
-     *     });
-     *
-     * @param {Object} options (optional) Object literal with any of the Fx config options
-     * @return {Ext.dom.Element} The Element
-     */
-    puff: function(obj) {
-        var me = this,
-            beforeAnim,
-            box = me.getBox(),
-            originalStyles = me.getStyles('width', 'height', 'left', 'right', 'top', 'bottom', 'position', 'z-index', 'font-size', 'opacity', true);
-
-       obj = Ext.applyIf(obj || {}, {
-            easing: 'ease-out',
-            duration: 500,
-            useDisplay: false
-        });
-
-        beforeAnim = function() {
-            me.clearOpacity();
-            me.show();
-            this.to = {
-                width: box.width * 2,
-                height: box.height * 2,
-                x: box.x - (box.width / 2),
-                y: box.y - (box.height /2),
-                opacity: 0,
-                fontSize: '200%'
-            };
-            this.on('afteranimate',function() {
-                if (me.dom) {
-                    if (obj.useDisplay) {
-                        me.setDisplayed(false);
-                    } else {
-                        me.hide();
-                    }
-                    me.setStyle(originalStyles);
-                    obj.callback.call(obj.scope);
-                }
-            });
-        };
-
-        me.animate({
-            duration: obj.duration,
-            easing: obj.easing,
-            listeners: {
-                beforeanimate: {
-                    fn: beforeAnim
-                }
-            }
-        });
-        return me;
-    },
-
-    /**
-     * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
-     * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still
-     * take up space in the document. The element must be removed from the DOM using the 'remove' config option if
-     * desired. Usage:
-     *
-     *     // default
-     *     el.switchOff();
-     *
-     *     // all config options shown with default values
-     *     el.switchOff({
-     *         easing: 'easeIn',
-     *         duration: .3,
-     *         remove: false,
-     *         useDisplay: false
-     *     });
-     *
-     * @param {Object} options (optional) Object literal with any of the Fx config options
-     * @return {Ext.dom.Element} The Element
-     */
-    switchOff: function(obj) {
-        var me = this,
-            beforeAnim;
-
-        obj = Ext.applyIf(obj || {}, {
-            easing: 'ease-in',
-            duration: 500,
-            remove: false,
-            useDisplay: false
-        });
-
-        beforeAnim = function() {
-            var animScope = this,
-                size = me.getSize(),
-                xy = me.getXY(),
-                keyframe, position;
-            me.clearOpacity();
-            me.clip();
-            position = me.getPositioning();
-
-            keyframe = new Ext.fx.Animator({
-                target: me,
-                duration: obj.duration,
-                easing: obj.easing,
-                keyframes: {
-                    33: {
-                        opacity: 0.3
-                    },
-                    66: {
-                        height: 1,
-                        y: xy[1] + size.height / 2
-                    },
-                    100: {
-                        width: 1,
-                        x: xy[0] + size.width / 2
-                    }
-                }
-            });
-            keyframe.on('afteranimate', function() {
-                if (obj.useDisplay) {
-                    me.setDisplayed(false);
-                } else {
-                    me.hide();
-                }
-                me.clearOpacity();
-                me.setPositioning(position);
-                me.setSize(size);
-                // kill the no-op element animation created below
-                animScope.end();
-            });
-        };
-        
-        me.animate({
-            // See "A Note About Wrapped Animations" at the top of this class:
-            duration: (Math.max(obj.duration, 500) * 2),
-            listeners: {
-                beforeanimate: {
-                    fn: beforeAnim
-                }
-            }
-        });
-        return me;
-    },
-
-    /**
-     * Shows a ripple of exploding, attenuating borders to draw attention to an Element. Usage:
-     *
-     *     // default: a single light blue ripple
-     *     el.frame();
-     *
-     *     // custom: 3 red ripples lasting 3 seconds total
-     *     el.frame("#ff0000", 3, { duration: 3 });
-     *
-     *     // common config options shown with default values
-     *     el.frame("#C3DAF9", 1, {
-     *         duration: 1 //duration of each individual ripple.
-     *         // Note: Easing is not configurable and will be ignored if included
-     *     });
-     *
-     * @param {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.dom.Element} The Element
-     */
-    frame : function(color, count, obj){
-        var me = this,
-            beforeAnim;
-
-        color = color || '#C3DAF9';
-        count = count || 1;
-        obj = obj || {};
-
-        beforeAnim = function() {
-            me.show();
-            var animScope = this,
-                box = me.getBox(),
-                proxy = Ext.getBody().createChild({
-                    id: me.id + '-anim-proxy',
-                    style: {
-                        position : 'absolute',
-                        'pointer-events': 'none',
-                        'z-index': 35000,
-                        border : '0px solid ' + color
-                    }
-                }),
-                proxyAnim;
-            proxyAnim = new Ext.fx.Anim({
-                target: proxy,
-                duration: obj.duration || 1000,
-                iterations: count,
-                from: {
-                    top: box.y,
-                    left: box.x,
-                    borderWidth: 0,
-                    opacity: 1,
-                    height: box.height,
-                    width: box.width
-                },
-                to: {
-                    top: box.y - 20,
-                    left: box.x - 20,
-                    borderWidth: 10,
-                    opacity: 0,
-                    height: box.height + 40,
-                    width: box.width + 40
-                }
-            });
-            proxyAnim.on('afteranimate', function() {
-                proxy.remove();
-                // kill the no-op element animation created below
-                animScope.end();
-            });
-        };
-
-        me.animate({
-            // See "A Note About Wrapped Animations" at the top of this class:
-            duration: (Math.max(obj.duration, 500) * 2) || 2000,
-            listeners: {
-                beforeanimate: {
-                    fn: beforeAnim
-                }
-            }
-        });
-        return me;
-    },
-
-    /**
-     * 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:
-     *
-     *     // 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: 2000 });
-     *
-     *     // common config options shown with default values
-     *     el.ghost('b', {
-     *         easing: 'easeOut',
-     *         duration: 500
-     *     });
-     *
-     * @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.dom.Element} The Element
-     */
-    ghost: function(anchor, obj) {
-        var me = this,
-            beforeAnim;
-
-        anchor = anchor || "b";
-        beforeAnim = function() {
-            var width = me.getWidth(),
-                height = me.getHeight(),
-                xy = me.getXY(),
-                position = me.getPositioning(),
-                to = {
-                    opacity: 0
-                };
-            switch (anchor) {
-                case 't':
-                    to.y = xy[1] - height;
-                    break;
-                case 'l':
-                    to.x = xy[0] - width;
-                    break;
-                case 'r':
-                    to.x = xy[0] + width;
-                    break;
-                case 'b':
-                    to.y = xy[1] + height;
-                    break;
-                case 'tl':
-                    to.x = xy[0] - width;
-                    to.y = xy[1] - height;
-                    break;
-                case 'bl':
-                    to.x = xy[0] - width;
-                    to.y = xy[1] + height;
-                    break;
-                case 'br':
-                    to.x = xy[0] + width;
-                    to.y = xy[1] + height;
-                    break;
-                case 'tr':
-                    to.x = xy[0] + width;
-                    to.y = xy[1] - height;
-                    break;
-            }
-            this.to = to;
-            this.on('afteranimate', function () {
-                if (me.dom) {
-                    me.hide();
-                    me.clearOpacity();
-                    me.setPositioning(position);
-                }
-            });
-        };
-
-        me.animate(Ext.applyIf(obj || {}, {
-            duration: 500,
-            easing: 'ease-out',
-            listeners: {
-                beforeanimate: {
-                    fn: beforeAnim
-                }
-            }
-        }));
-        return me;
-    },
-
-    /**
-     * Highlights the Element by setting a color (applies to the background-color by default, but can be changed using
-     * the "attr" config option) and then fading back to the original color. If no original color is available, you
-     * should provide the "endColor" config option which will be cleared after the animation. Usage:
-     *
-     *     // default: highlight background to yellow
-     *     el.highlight();
-     *
-     *     // custom: highlight foreground text to blue for 2 seconds
-     *     el.highlight("0000ff", { attr: 'color', duration: 2000 });
-     *
-     *     // common config options shown with default values
-     *     el.highlight("ffff9c", {
-     *         attr: "backgroundColor", //can be any valid CSS property (attribute) that supports a color value
-     *         endColor: (current color) or "ffffff",
-     *         easing: 'easeIn',
-     *         duration: 1000
-     *     });
-     *
-     * @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.dom.Element} The Element
-     */
-    highlight: function(color, o) {
-        var me = this,
-            dom = me.dom,
-            from = {},
-            restore, to, attr, lns, event, fn;
-
-        o = o || {};
-        lns = o.listeners || {};
-        attr = o.attr || 'backgroundColor';
-        from[attr] = color || 'ffff9c';
-
-        if (!o.to) {
-            to = {};
-            to[attr] = o.endColor || me.getColor(attr, 'ffffff', '');
-        }
-        else {
-            to = o.to;
-        }
-
-        // Don't apply directly on lns, since we reference it in our own callbacks below
-        o.listeners = Ext.apply(Ext.apply({}, lns), {
-            beforeanimate: function() {
-                restore = dom.style[attr];
-                me.clearOpacity();
-                me.show();
-
-                event = lns.beforeanimate;
-                if (event) {
-                    fn = event.fn || event;
-                    return fn.apply(event.scope || lns.scope || window, arguments);
-                }
-            },
-            afteranimate: function() {
-                if (dom) {
-                    dom.style[attr] = restore;
-                }
-
-                event = lns.afteranimate;
-                if (event) {
-                    fn = event.fn || event;
-                    fn.apply(event.scope || lns.scope || window, arguments);
-                }
-            }
-        });
-
-        me.animate(Ext.apply({}, o, {
-            duration: 1000,
-            easing: 'ease-in',
-            from: from,
-            to: to
-        }));
-        return me;
-    },
-
-   /**
-    * @deprecated 4.0
-    * Creates a pause before any subsequent queued effects begin. If there are no effects queued after the pause it will
-    * have no effect. Usage:
-    *
-    *     el.pause(1);
-    *
-    * @param {Number} seconds The length of time to pause (in seconds)
-    * @return {Ext.Element} The Element
-    */
-    pause: function(ms) {
-        var me = this;
-        Ext.fx.Manager.setFxDefaults(me.id, {
-            delay: ms
-        });
-        return me;
-    },
-
-    /**
-     * Fade an element in (from transparent to opaque). The ending opacity can be specified using the `opacity`
-     * config option. Usage:
-     *
-     *     // default: fade in from opacity 0 to 100%
-     *     el.fadeIn();
-     *
-     *     // custom: fade in from opacity 0 to 75% over 2 seconds
-     *     el.fadeIn({ opacity: .75, duration: 2000});
-     *
-     *     // common config options shown with default values
-     *     el.fadeIn({
-     *         opacity: 1, //can be any value between 0 and 1 (e.g. .5)
-     *         easing: 'easeOut',
-     *         duration: 500
-     *     });
-     *
-     * @param {Object} options (optional) Object literal with any of the Fx config options
-     * @return {Ext.Element} The Element
-     */
-    fadeIn: function(o) {
-        var me = this;
-        me.animate(Ext.apply({}, o, {
-            opacity: 1,
-            internalListeners: {
-                beforeanimate: function(anim){
-                    // restore any visibility/display that may have 
-                    // been applied by a fadeout animation
-                    if (me.isStyle('display', 'none')) {
-                        me.setDisplayed('');
-                    } else {
-                        me.show();
-                    } 
-                }
-            }
-        }));
-        return this;
-    },
-
-    /**
-     * Fade an element out (from opaque to transparent). The ending opacity can be specified using the `opacity`
-     * config option. Note that IE may require `useDisplay:true` in order to redisplay correctly.
-     * Usage:
-     *
-     *     // default: fade out from the element's current opacity to 0
-     *     el.fadeOut();
-     *
-     *     // custom: fade out from the element's current opacity to 25% over 2 seconds
-     *     el.fadeOut({ opacity: .25, duration: 2000});
-     *
-     *     // common config options shown with default values
-     *     el.fadeOut({
-     *         opacity: 0, //can be any value between 0 and 1 (e.g. .5)
-     *         easing: 'easeOut',
-     *         duration: 500,
-     *         remove: false,
-     *         useDisplay: false
-     *     });
-     *
-     * @param {Object} options (optional) Object literal with any of the Fx config options
-     * @return {Ext.Element} The Element
-     */
-    fadeOut: function(o) {
-        var me = this;
-        o = Ext.apply({
-            opacity: 0,
-            internalListeners: {
-                afteranimate: function(anim){
-                    var dom = me.dom;
-                    if (dom && anim.to.opacity === 0) {
-                        if (o.useDisplay) {
-                            me.setDisplayed(false);
-                        } else {
-                            me.hide();
-                        }
-                    }         
-                }
-            }
-        }, o);
-        me.animate(o);
-        return me;
-    },
-
-    /**
-     * @deprecated 4.0
-     * 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:
-     *
-     *     // change height and width to 100x100 pixels
-     *     el.scale(100, 100);
-     *
-     *     // common config options shown with default values.  The height and width will default to
-     *     // the element's existing values if passed as null.
-     *     el.scale(
-     *         [element's width],
-     *         [element's height], {
-     *             easing: 'easeOut',
-     *             duration: .35
-     *         }
-     *     );
-     *
-     * @param {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.animate(Ext.apply({}, o, {
-            width: w,
-            height: h
-        }));
-        return this;
-    },
-
-    /**
-     * @deprecated 4.0
-     * 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:
-     *
-     *     // slide the element horizontally to x position 200 while changing the height and opacity
-     *     el.shift({ x: 200, height: 50, opacity: .8 });
-     *
-     *     // common config options shown with default values.
-     *     el.shift({
-     *         width: [element's width],
-     *         height: [element's height],
-     *         x: [element's x position],
-     *         y: [element's y position],
-     *         opacity: [element's opacity],
-     *         easing: 'easeOut',
-     *         duration: .35
-     *     });
-     *
-     * @param {Object} options Object literal with any of the Fx config options
-     * @return {Ext.Element} The Element
-     */
-    shift: function(config) {
-        this.animate(config);
-        return this;
-    }
-});