extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/direct/Transaction.js

@@ -0,0 +1,41 @@
+/**
+ * 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/extjs-rails/src/dom/Element.alignment.js

@@ -0,0 +1,378 @@
+/**
+ * @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/extjs-rails/src/dom/Element.anim.js

@@ -0,0 +1,962 @@
+/**
+ * @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;
+    }
+});