extjs-rails 4.1.0.alpha1

data/app/assets/javascripts/extjs-rails/src/core/src/dom/AbstractElement.position.js

@@ -0,0 +1,356 @@
+/**
+ * @class Ext.dom.AbstractElement
+ */
+(function(){
+
+var Element = Ext.dom.AbstractElement;
+
+Element.override({
+
+    /**
+     * Gets the current X position of the element based on page coordinates.  Element must be part of the DOM
+     * tree to have page coordinates (display:none or elements not appended return false).
+     * @return {Number} The X position of the element
+     */
+    getX: function(el) {
+        return this.getXY(el)[0];
+    },
+
+    /**
+     * Gets the current Y position of the element based on page coordinates.  Element must be part of the DOM
+     * tree to have page coordinates (display:none or elements not appended return false).
+     * @return {Number} The Y position of the element
+     */
+    getY: function(el) {
+        return this.getXY(el)[1];
+    },
+
+    /**
+     * Gets the current position of the element based on page coordinates.  Element must be part of the DOM
+     * tree to have page coordinates (display:none or elements not appended return false).
+     * @return {Array} The XY position of the element
+     */
+    getXY: function() {
+        // @FEATUREDETECT
+        var point = window.webkitConvertPointFromNodeToPage(this.dom, new WebKitPoint(0, 0));
+        return [point.x, point.y];
+    },
+
+    /**
+     * Returns the offsets of this element from the passed element. Both element must be part of the DOM
+     * tree and not have display:none to have page coordinates.
+     * @param {Ext.Element/HTMLElement/String} element The element to get the offsets from.
+     * @return {Array} The XY page offsets (e.g. [100, -200])
+     */
+    getOffsetsTo: function(el){
+        var o = this.getXY(),
+            e = Ext.fly(el, '_internal').getXY();
+        return [o[0]-e[0],o[1]-e[1]];
+    },
+
+    /**
+     * Sets the X position of the element based on page coordinates.  Element must be part of the DOM tree
+     * to have page coordinates (display:none or elements not appended return false).
+     * @param {Number} The X position of the element
+     * @param {Boolean/Object} [animate] True for the default animation, or a standard Element
+     * animation config object
+     * @return {Ext.dom.AbstractElement} this
+     */
+    setX: function(x){
+        return this.setXY([x, this.getY()]);
+    },
+
+    /**
+     * Sets the Y position of the element based on page coordinates.  Element must be part of the DOM tree
+     * to have page coordinates (display:none or elements not appended return false).
+     * @param {Number} The Y position of the element
+     * @param {Boolean/Object} [animate] True for the default animation, or a standard Element
+     * animation config object
+     * @return {Ext.dom.AbstractElement} this
+     */
+    setY: function(y) {
+        return this.setXY([this.getX(), y]);
+    },
+
+    /**
+     * Sets the element's left position directly using CSS style (instead of {@link #setX}).
+     * @param {String} left The left CSS property value
+     * @return {Ext.dom.AbstractElement} this
+     */
+    setLeft: function(left) {
+        this.setStyle('left', Element.addUnits(left));
+        return this;
+    },
+
+    /**
+     * Sets the element's top position directly using CSS style (instead of {@link #setY}).
+     * @param {String} top The top CSS property value
+     * @return {Ext.dom.AbstractElement} this
+     */
+    setTop: function(top) {
+        this.setStyle('top', Element.addUnits(top));
+        return this;
+    },
+
+    /**
+     * Sets the element's CSS right style.
+     * @param {String} right The right CSS property value
+     * @return {Ext.dom.AbstractElement} this
+     */
+    setRight: function(right) {
+        this.setStyle('right', Element.addUnits(right));
+        return this;
+    },
+
+    /**
+     * Sets the element's CSS bottom style.
+     * @param {String} bottom The bottom CSS property value
+     * @return {Ext.dom.AbstractElement} this
+     */
+    setBottom: function(bottom) {
+        this.setStyle('bottom', Element.addUnits(bottom));
+        return this;
+    },
+
+    /**
+     * Sets the position of the element in page coordinates, regardless of how the element is positioned.
+     * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
+     * @param {Array} pos Contains X & Y [x, y] values for new position (coordinates are page-based)
+     * @param {Boolean/Object} [animate] True for the default animation, or a standard Element animation config object
+     * @return {Ext.dom.AbstractElement} this
+     */
+    setXY: function(pos) {
+        var me = this,
+            pts,
+            style,
+            pt;
+
+        if (arguments.length > 1) {
+            pos = [pos, arguments[1]];
+        }
+
+        // me.position();
+        pts = me.translatePoints(pos);
+        style = me.dom.style;
+
+        for (pt in pts) {
+            if (!pts.hasOwnProperty(pt)) {
+                continue;
+            }
+            if (!isNaN(pts[pt])) {
+                style[pt] = pts[pt] + "px";
+            }
+        }
+        return me;
+    },
+
+    /**
+     * Gets the left X coordinate
+     * @param {Boolean} local True to get the local css position instead of page coordinate
+     * @return {Number}
+     */
+    getLeft: function(local) {
+        return parseInt(this.getStyle('left'), 10) || 0;
+    },
+
+    /**
+     * Gets the right X coordinate of the element (element X position + element width)
+     * @param {Boolean} local True to get the local css position instead of page coordinate
+     * @return {Number}
+     */
+    getRight: function(local) {
+        return parseInt(this.getStyle('right'), 10) || 0;
+    },
+
+    /**
+     * Gets the top Y coordinate
+     * @param {Boolean} local True to get the local css position instead of page coordinate
+     * @return {Number}
+     */
+    getTop: function(local) {
+        return parseInt(this.getStyle('top'), 10) || 0;
+    },
+
+    /**
+     * Gets the bottom Y coordinate of the element (element Y position + element height)
+     * @param {Boolean} local True to get the local css position instead of page coordinate
+     * @return {Number}
+     */
+    getBottom: function(local) {
+        return parseInt(this.getStyle('bottom'), 10) || 0;
+    },
+
+    /**
+     * Translates the passed page coordinates into left/top css values for this element
+     * @param {Number/Array} x The page x or an array containing [x, y]
+     * @param {Number} [y] The page y, required if x is not an array
+     * @return {Object} An object with left and top properties. e.g. {left: (value), top: (value)}
+     */
+    translatePoints: function(x, y) {
+        y = isNaN(x[1]) ? y : x[1];
+        x = isNaN(x[0]) ? x : x[0];
+        var me = this,
+            relative = me.isStyle('position', 'relative'),
+            o = me.getXY(),
+            l = parseInt(me.getStyle('left'), 10),
+            t = parseInt(me.getStyle('top'), 10);
+
+        l = !isNaN(l) ? l : (relative ? 0 : me.dom.offsetLeft);
+        t = !isNaN(t) ? t : (relative ? 0 : me.dom.offsetTop);
+
+        return {left: (x - o[0] + l), top: (y - o[1] + t)};
+    },
+
+    /**
+     * Sets the element's box. Use getBox() on another element to get a box obj.
+     * If animate is true then width, height, x and y will be animated concurrently.
+     * @param {Object} box The box to fill {x, y, width, height}
+     * @param {Boolean} [adjust] Whether to adjust for box-model issues automatically
+     * @param {Boolean/Object} [animate] true for the default animation or a standard
+     * Element animation config object
+     * @return {Ext.dom.AbstractElement} this
+     */
+    setBox: function(box) {
+        var me = this,
+            width = box.width,
+            height = box.height,
+            top = box.top,
+            left = box.left;
+
+        if (left !== undefined) {
+            me.setLeft(left);
+        }
+        if (top !== undefined) {
+            me.setTop(top);
+        }
+        if (width !== undefined) {
+            me.setWidth(width);
+        }
+        if (height !== undefined) {
+            me.setHeight(height);
+        }
+
+        return this;
+    },
+
+    /**
+     * Return an object defining the area of this Element which can be passed to {@link #setBox} to
+     * set another Element's size/location to match this element.
+     *
+     * @param {Boolean} [contentBox] If true a box for the content of the element is returned.
+     * @param {Boolean} [local] If true the element's left and top are returned instead of page x/y.
+     * @return {Object} box An object in the format:
+     *
+     *     {
+     *         x: <Element's X position>,
+     *         y: <Element's Y position>,
+     *         width: <Element's width>,
+     *         height: <Element's height>,
+     *         bottom: <Element's lower bound>,
+     *         right: <Element's rightmost bound>
+     *     }
+     *
+     * The returned object may also be addressed as an Array where index 0 contains the X position
+     * and index 1 contains the Y position. So the result may also be used for {@link #setXY}
+     */
+    getBox: function(contentBox, local) {
+        var me = this,
+            dom = me.dom,
+            width = dom.offsetWidth,
+            height = dom.offsetHeight,
+            xy, box, l, r, t, b;
+
+        if (!local) {
+            xy = me.getXY();
+        }
+        else if (contentBox) {
+            xy = [0,0];
+        }
+        else {
+            xy = [parseInt(me.getStyle("left"), 10) || 0, parseInt(me.getStyle("top"), 10) || 0];
+        }
+
+        if (!contentBox) {
+            box = {
+                x: xy[0],
+                y: xy[1],
+                0: xy[0],
+                1: xy[1],
+                width: width,
+                height: height
+            };
+        }
+        else {
+            l = me.getBorderWidth.call(me, "l") + me.getPadding.call(me, "l");
+            r = me.getBorderWidth.call(me, "r") + me.getPadding.call(me, "r");
+            t = me.getBorderWidth.call(me, "t") + me.getPadding.call(me, "t");
+            b = me.getBorderWidth.call(me, "b") + me.getPadding.call(me, "b");
+            box = {
+                x: xy[0] + l,
+                y: xy[1] + t,
+                0: xy[0] + l,
+                1: xy[1] + t,
+                width: width - (l + r),
+                height: height - (t + b)
+            };
+        }
+
+        box.left = box.x;
+        box.top = box.y;
+        box.right = box.x + box.width;
+        box.bottom = box.y + box.height;
+
+        return box;
+    },
+
+    /**
+     * Return an object defining the area of this Element which can be passed to {@link #setBox} to
+     * set another Element's size/location to match this element.
+     *
+     * @param {Boolean} [asRegion] If true an Ext.util.Region will be returned
+     * @return {Object} box An object in the format
+     *
+     *     {
+     *         x: <Element's X position>,
+     *         y: <Element's Y position>,
+     *         width: <Element's width>,
+     *         height: <Element's height>,
+     *         bottom: <Element's lower bound>,
+     *         right: <Element's rightmost bound>
+     *     }
+     *
+     * The returned object may also be addressed as an Array where index 0 contains the X position
+     * and index 1 contains the Y position. So the result may also be used for {@link #setXY}
+     */
+    getPageBox: function(getRegion) {
+        var me = this,
+            el = me.dom,
+            w = el.offsetWidth,
+            h = el.offsetHeight,
+            xy = me.getXY(),
+            t = xy[1],
+            r = xy[0] + w,
+            b = xy[1] + h,
+            l = xy[0];
+
+        if (!el) {
+            return new Ext.util.Region();
+        }
+
+        if (getRegion) {
+            return new Ext.util.Region(t, r, b, l);
+        }
+        else {
+            return {
+                left: l,
+                top: t,
+                width: w,
+                height: h,
+                right: r,
+                bottom: b
+            };
+        }
+    }
+});
+
+}());

data/app/assets/javascripts/extjs-rails/src/core/src/dom/AbstractElement.static.js

@@ -0,0 +1,474 @@
+/**
+ * @class Ext.dom.AbstractElement
+ */
+Ext.dom.AbstractElement.addInheritableStatics({
+    unitRe: /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,
+    camelRe: /(-[a-z])/gi,
+    cssRe: /([a-z0-9\-]+)\s*:\s*([^;\s]+(?:\s*[^;\s]+)*);?/gi,
+    opacityRe: /alpha\(opacity=(.*)\)/i,
+    propertyCache: {},
+    defaultUnit : "px",
+    borders: {l: 'border-left-width', r: 'border-right-width', t: 'border-top-width', b: 'border-bottom-width'},
+    paddings: {l: 'padding-left', r: 'padding-right', t: 'padding-top', b: 'padding-bottom'},
+    margins: {l: 'margin-left', r: 'margin-right', t: 'margin-top', b: 'margin-bottom'},
+    /**
+     * Test if size has a unit, otherwise appends the passed unit string, or the default for this Element.
+     * @param size {Object} The size to set
+     * @param units {String} The units to append to a numeric size value
+     * @private
+     * @static
+     */
+    addUnits: function(size, units) {
+        // Most common case first: Size is set to a number
+        if (typeof size == 'number') {
+            return size + (units || this.defaultUnit || 'px');
+        }
+
+        // Size set to a value which means "auto"
+        if (size === "" || size == "auto" || size === undefined || size === null) {
+            return size || '';
+        }
+
+        // Otherwise, warn if it's not a valid CSS measurement
+        if (!this.unitRe.test(size)) {
+            //<debug>
+            if (Ext.isDefined(Ext.global.console)) {
+                Ext.global.console.warn("Warning, size detected as NaN on Element.addUnits.");
+            }
+            //</debug>
+            return size || '';
+        }
+
+        return size;
+    },
+
+    /**
+     * @static
+     * @private
+     */
+    isAncestor: function(p, c) {
+        var ret = false;
+
+        p = Ext.getDom(p);
+        c = Ext.getDom(c);
+        if (p && c) {
+            if (p.contains) {
+                return p.contains(c);
+            } else if (p.compareDocumentPosition) {
+                return !!(p.compareDocumentPosition(c) & 16);
+            } else {
+                while ((c = c.parentNode)) {
+                    ret = c == p || ret;
+                }
+            }
+        }
+        return ret;
+    },
+
+    /**
+     * Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
+     * (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)
+     * @static
+     * @param {Number/String} box The encoded margins
+     * @return {Object} An object with margin sizes for top, right, bottom and left
+     */
+    parseBox: function(box) {
+        if (typeof box != 'string') {
+            box = box.toString();
+        }
+        var parts  = box.split(' '),
+            ln = parts.length;
+
+        if (ln == 1) {
+            parts[1] = parts[2] = parts[3] = parts[0];
+        }
+        else if (ln == 2) {
+            parts[2] = parts[0];
+            parts[3] = parts[1];
+        }
+        else if (ln == 3) {
+            parts[3] = parts[1];
+        }
+
+        return {
+            top   :parseFloat(parts[0]) || 0,
+            right :parseFloat(parts[1]) || 0,
+            bottom:parseFloat(parts[2]) || 0,
+            left  :parseFloat(parts[3]) || 0
+        };
+    },
+
+    /**
+     * Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
+     * (e.g. 10, "10", "10 10", "10 10 10" and "10 10 10 10" are all valid options and would return the same result)
+     * @static
+     * @param {Number/String} box The encoded margins
+     * @param {String} units The type of units to add
+     * @return {String} An string with unitized (px if units is not specified) metrics for top, right, bottom and left
+     */
+    unitizeBox: function(box, units) {
+        var a = this.addUnits,
+            b = this.parseBox(box);
+
+        return a(b.top, units) + ' ' +
+               a(b.right, units) + ' ' +
+               a(b.bottom, units) + ' ' +
+               a(b.left, units);
+
+    },
+
+    // private
+    camelReplaceFn: function(m, a) {
+        return a.charAt(1).toUpperCase();
+    },
+
+    /**
+     * Normalizes CSS property keys from dash delimited to camel case JavaScript Syntax.
+     * For example:
+     *
+     * - border-width -> borderWidth
+     * - padding-top -> paddingTop
+     *
+     * @static
+     * @param {String} prop The property to normalize
+     * @return {String} The normalized string
+     */
+    normalize: function(prop) {
+        // TODO: Mobile optimization?
+        if (prop == 'float') {
+            prop = Ext.supports.Float ? 'cssFloat' : 'styleFloat';
+        }
+        return this.propertyCache[prop] || (this.propertyCache[prop] = prop.replace(this.camelRe, this.camelReplaceFn));
+    },
+
+    /**
+     * Retrieves the document height
+     * @static
+     * @return {Number} documentHeight
+     */
+    getDocumentHeight: function() {
+        return Math.max(!Ext.isStrict ? document.body.scrollHeight : document.documentElement.scrollHeight, this.getViewportHeight());
+    },
+
+    /**
+     * Retrieves the document width
+     * @static
+     * @return {Number} documentWidth
+     */
+    getDocumentWidth: function() {
+        return Math.max(!Ext.isStrict ? document.body.scrollWidth : document.documentElement.scrollWidth, this.getViewportWidth());
+    },
+
+    /**
+     * Retrieves the viewport height of the window.
+     * @static
+     * @return {Number} viewportHeight
+     */
+    getViewportHeight: function(){
+        return window.innerHeight;
+    },
+
+    /**
+     * Retrieves the viewport width of the window.
+     * @static
+     * @return {Number} viewportWidth
+     */
+    getViewportWidth: function() {
+        return window.innerWidth;
+    },
+
+    /**
+     * Retrieves the viewport size of the window.
+     * @static
+     * @return {Object} object containing width and height properties
+     */
+    getViewSize: function() {
+        return {
+            width: window.innerWidth,
+            height: window.innerHeight
+        };
+    },
+
+    /**
+     * Retrieves the current orientation of the window. This is calculated by
+     * determing if the height is greater than the width.
+     * @static
+     * @return {String} Orientation of window: 'portrait' or 'landscape'
+     */
+    getOrientation: function() {
+        if (Ext.supports.OrientationChange) {
+            return (window.orientation == 0) ? 'portrait' : 'landscape';
+        }
+
+        return (window.innerHeight > window.innerWidth) ? 'portrait' : 'landscape';
+    },
+
+    /**
+     * Returns the top Element that is located at the passed coordinates
+     * @static
+     * @param {Number} x The x coordinate
+     * @param {Number} y The y coordinate
+     * @return {String} The found Element
+     */
+    fromPoint: function(x, y) {
+        return Ext.get(document.elementFromPoint(x, y));
+    },
+
+    /**
+     * Converts a CSS string into an object with a property for each style.
+     *
+     * The sample code below would return an object with 2 properties, one
+     * for background-color and one for color.
+     *
+     *     var css = 'background-color: red;color: blue; ';
+     *     console.log(Ext.dom.Element.parseStyles(css));
+     *
+     * @static
+     * @param {String} styles A CSS string
+     * @return {Object} styles
+     */
+    parseStyles: function(styles){
+        var out = {},
+            cssRe = this.cssRe,
+            matches;
+
+        if (styles) {
+            // Since we're using the g flag on the regex, we need to set the lastIndex.
+            // This automatically happens on some implementations, but not others, see:
+            // http://stackoverflow.com/questions/2645273/javascript-regular-expression-literal-persists-between-function-calls
+            // http://blog.stevenlevithan.com/archives/fixing-javascript-regexp
+            cssRe.lastIndex = 0;
+            while ((matches = cssRe.exec(styles))) {
+                out[matches[1]] = matches[2];
+            }
+        }
+        return out;
+    }
+});
+
+//TODO Need serious cleanups
+(function(){
+    var doc = document,
+        AbstractElement = Ext.dom.AbstractElement,
+        activeElement = null,
+        isCSS1 = doc.compatMode == "CSS1Compat",
+        flyInstance,
+        fly = function (el) {
+            if (!flyInstance) {
+                flyInstance = new AbstractElement.Fly();
+            }
+            flyInstance.attach(el);
+            return flyInstance;
+        };
+
+    // If the browser does not support document.activeElement we need some assistance.
+    // This covers old Safari 3.2 (4.0 added activeElement along with just about all
+    // other browsers). We need this support to handle issues with old Safari.
+    if (!('activeElement' in doc) && doc.addEventListener) {
+        doc.addEventListener('focus',
+            function (ev) {
+                if (ev && ev.target) {
+                    activeElement = (ev.target == doc) ? null : ev.target;
+                }
+            }, true);
+    }
+
+    /*
+     * Helper function to create the function that will restore the selection.
+     */
+    function makeSelectionRestoreFn (activeEl, start, end) {
+        return function () {
+            activeEl.selectionStart = start;
+            activeEl.selectionEnd = end;
+        };
+    }
+
+    AbstractElement.addInheritableStatics({
+        /**
+         * Returns the active element in the DOM. If the browser supports activeElement
+         * on the document, this is returned. If not, the focus is tracked and the active
+         * element is maintained internally.
+         * @return {HTMLElement} The active (focused) element in the document.
+         */
+        getActiveElement: function () {
+            return doc.activeElement || activeElement;
+        },
+
+        /**
+         * Creates a function to call to clean up problems with the work-around for the
+         * WebKit RightMargin bug. The work-around is to add "display: 'inline-block'" to
+         * the element before calling getComputedStyle and then to restore its original
+         * display value. The problem with this is that it corrupts the selection of an
+         * INPUT or TEXTAREA element (as in the "I-beam" goes away but ths focus remains).
+         * To cleanup after this, we need to capture the selection of any such element and
+         * then restore it after we have restored the display style.
+         *
+         * @param {Ext.dom.Element} target The top-most element being adjusted.
+         * @private
+         */
+        getRightMarginFixCleaner: function (target) {
+            var supports = Ext.supports,
+                hasInputBug = supports.DisplayChangeInputSelectionBug,
+                hasTextAreaBug = supports.DisplayChangeTextAreaSelectionBug,
+                activeEl,
+                tag,
+                start,
+                end;
+
+            if (hasInputBug || hasTextAreaBug) {
+                activeEl = doc.activeElement || activeElement; // save a call
+                tag = activeEl && activeEl.tagName;
+
+                if ((hasTextAreaBug && tag == 'TEXTAREA') ||
+                    (hasInputBug && tag == 'INPUT' && activeEl.type == 'text')) {
+                    if (Ext.dom.Element.isAncestor(target, activeEl)) {
+                        start = activeEl.selectionStart;
+                        end = activeEl.selectionEnd;
+
+                        if (Ext.isNumber(start) && Ext.isNumber(end)) { // to be safe...
+                            // We don't create the raw closure here inline because that
+                            // will be costly even if we don't want to return it (nested
+                            // function decls and exprs are often instantiated on entry
+                            // regardless of whether execution ever reaches them):
+                            return makeSelectionRestoreFn(activeEl, start, end);
+                        }
+                    }
+                }
+            }
+
+            return Ext.emptyFn; // avoid special cases, just return a nop
+        },
+
+        getViewWidth: function(full) {
+            return full ? Ext.dom.Element.getDocumentWidth() : Ext.dom.Element.getViewportWidth();
+        },
+
+        getViewHeight: function(full) {
+            return full ? Ext.dom.Element.getDocumentHeight() : Ext.dom.Element.getViewportHeight();
+        },
+
+        getDocumentHeight: function() {
+            return Math.max(!isCSS1 ? doc.body.scrollHeight : doc.documentElement.scrollHeight, Ext.dom.Element.getViewportHeight());
+        },
+
+        getDocumentWidth: function() {
+            return Math.max(!isCSS1 ? doc.body.scrollWidth : doc.documentElement.scrollWidth, Ext.dom.Element.getViewportWidth());
+        },
+
+        getViewportHeight: function(){
+            return Ext.isIE ?
+                   (Ext.isStrict ? doc.documentElement.clientHeight : doc.body.clientHeight) :
+                   self.innerHeight;
+        },
+
+        getViewportWidth: function() {
+            return (!Ext.isStrict && !Ext.isOpera) ? doc.body.clientWidth :
+                   Ext.isIE ? doc.documentElement.clientWidth : self.innerWidth;
+        },
+
+        getY: function(el) {
+            return Ext.dom.Element.getXY(el)[1];
+        },
+
+        getX: function(el) {
+            return Ext.dom.Element.getXY(el)[0];
+        },
+
+        getXY: function(el) {
+            var bd = doc.body,
+                docEl = doc.documentElement,
+                leftBorder = 0,
+                topBorder = 0,
+                ret = [0,0],
+                round = Math.round,
+                box,
+                scroll;
+
+            el = Ext.getDom(el);
+
+            if(el != doc && el != bd){
+                // IE has the potential to throw when getBoundingClientRect called
+                // on element not attached to dom
+                if (Ext.isIE) {
+                    try {
+                        box = el.getBoundingClientRect();
+                        // In some versions of IE, the documentElement (HTML element) will have a 2px border that gets included, so subtract it off
+                        topBorder = docEl.clientTop || bd.clientTop;
+                        leftBorder = docEl.clientLeft || bd.clientLeft;
+                    } catch (ex) {
+                        box = { left: 0, top: 0 };
+                    }
+                } else {
+                    box = el.getBoundingClientRect();
+                }
+
+                scroll = fly(document).getScroll();
+                ret = [round(box.left + scroll.left - leftBorder), round(box.top + scroll.top - topBorder)];
+            }
+            return ret;
+        },
+
+        setXY: function(el, xy) {
+            (el = Ext.fly(el, '_setXY')).position();
+
+            var pts = el.translatePoints(xy),
+                style = el.dom.style,
+                pos;
+
+            for (pos in pts) {
+                if (!isNaN(pts[pos])) {
+                    style[pos] = pts[pos] + "px";
+                }
+            }
+        },
+
+        setX: function(el, x) {
+            Ext.dom.Element.setXY(el, [x, false]);
+        },
+
+        setY: function(el, y) {
+            Ext.dom.Element.setXY(el, [false, y]);
+        },
+
+        /**
+         * Serializes a DOM form into a url encoded string
+         * @param {Object} form The form
+         * @return {String} The url encoded form
+         */
+        serializeForm: function(form) {
+            var fElements = form.elements || (document.forms[form] || Ext.getDom(form)).elements,
+                hasSubmit = false,
+                encoder   = encodeURIComponent,
+                data      = '',
+                eLen      = fElements.length,
+                element, name, type, options, hasValue, e,
+                o, oLen, opt;
+
+            for (e = 0; e < eLen; e++) {
+                element = fElements[e];
+                name    = element.name;
+                type    = element.type;
+                options = element.options;
+
+                if (!element.disabled && name) {
+                    if (/select-(one|multiple)/i.test(type)) {
+                        oLen = options.length;
+                        for (o = 0; o < oLen; o++) {
+                            opt = options[o];
+                            if (opt.selected) {
+                                hasValue = opt.hasAttribute ? opt.hasAttribute('value') : opt.getAttributeNode('value').specified;
+                                data += Ext.String.format("{0}={1}&", encoder(name), encoder(hasValue ? opt.value : opt.text));
+                            }
+                        }
+                    } else if (!(/file|undefined|reset|button/i.test(type))) {
+                        if (!(/radio|checkbox/i.test(type) && !element.checked) && !(type == 'submit' && hasSubmit)) {
+                            data += encoder(name) + '=' + encoder(element.value) + '&';
+                            hasSubmit = /submit/i.test(type);
+                        }
+                    }
+                }
+            }
+            return data.substr(0, data.length - 1);
+        }
+    });
+}());