extjs-rails 4.1.0.alpha5 → 4.1.0.alpha6

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

@@ -1,214 +0,0 @@
-/**
- * @class Ext.dom.Element
- */
-Ext.dom.Element.override({
-    /**
-     * Returns true if this element is scrollable.
-     * @return {Boolean}
-     */
-    isScrollable: function() {
-        var dom = this.dom;
-        return dom.scrollHeight > dom.clientHeight || dom.scrollWidth > dom.clientWidth;
-    },
-
-    /**
-     * Returns the current scroll position of the element.
-     * @return {Object} An object containing the scroll position in the format
-     * `{left: (scrollLeft), top: (scrollTop)}`
-     */
-    getScroll: function() {
-        var d = this.dom,
-            doc = document,
-            body = doc.body,
-            docElement = doc.documentElement,
-            l,
-            t,
-            ret;
-
-        if (d == doc || d == body) {
-            if (Ext.isIE && Ext.isStrict) {
-                l = docElement.scrollLeft;
-                t = docElement.scrollTop;
-            } else {
-                l = window.pageXOffset;
-                t = window.pageYOffset;
-            }
-            ret = {
-                left: l || (body ? body.scrollLeft : 0),
-                top : t || (body ? body.scrollTop : 0)
-            };
-        } else {
-            ret = {
-                left: d.scrollLeft,
-                top : d.scrollTop
-            };
-        }
-
-        return ret;
-    },
-
-    /**
-     * Scrolls this element by the passed delta values, optionally animating.
-     * 
-     * All of the following are equivalent:
-     *
-     *      el.scrollBy(10, 10, true);
-     *      el.scrollBy([10, 10], true);
-     *      el.scrollBy({ x: 10, y: 10 }, true);
-     * 
-     * @param {Number/Number[]/Object} deltaX Either the x delta, an Array specifying x and y deltas or
-     * an object with "x" and "y" properties.
-     * @param {Number/Boolean/Object} deltaY Either the y delta, or an animate flag or config object.
-     * @param {Boolean/Object} animate Animate flag/config object if the delta values were passed separately.
-     * @return {Ext.Element} this
-     */
-    scrollBy: function(deltaX, deltaY, animate) {
-        var me = this,
-            dom = me.dom;
-
-        // Extract args if deltas were passed as an Array.
-        if (deltaX.length) {
-            animate = deltaY;
-            deltaY = deltaX[1];
-            deltaX = deltaX[0];
-        } else if (typeof deltaX != 'number') { // or an object
-            animate = deltaY;
-            deltaY = deltaX.y;
-            deltaX = deltaX.x;
-        }
-
-        if (deltaX) {
-            me.scrollTo('left', Math.max(Math.min(dom.scrollLeft + deltaX, dom.scrollWidth - dom.clientWidth), 0), animate);
-        }
-        if (deltaY) {
-            me.scrollTo('top', Math.max(Math.min(dom.scrollTop + deltaY, dom.scrollHeight - dom.clientHeight), 0), animate);
-        }
-
-        return me;
-    },
-
-    /**
-     * Scrolls this element the specified scroll point. It does NOT do bounds checking so
-     * if you scroll to a weird value it will try to do it. For auto bounds checking, use #scroll.
-     * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
-     * @param {Number} value The new scroll value
-     * @param {Boolean/Object} [animate] true for the default animation or a standard Element
-     * animation config object
-     * @return {Ext.Element} this
-     */
-    scrollTo: function(side, value, animate) {
-        //check if we're scrolling top or left
-        var top = /top/i.test(side),
-            me = this,
-            dom = me.dom,
-            obj = {},
-            prop;
-
-        if (!animate || !me.anim) {
-            // just setting the value, so grab the direction
-            prop = 'scroll' + (top ? 'Top' : 'Left');
-            dom[prop] = value;
-        }
-        else {
-            if (!Ext.isObject(animate)) {
-                animate = {};
-            }
-            obj['scroll' + (top ? 'Top' : 'Left')] = value;
-            me.animate(Ext.applyIf({
-                to: obj
-            }, animate));
-        }
-        return me;
-    },
-
-    /**
-     * Scrolls this element into view within the passed container.
-     * @param {String/HTMLElement/Ext.Element} [container=document.body] The container element
-     * to scroll.  Should be a string (id), dom node, or Ext.Element.
-     * @param {Boolean} [hscroll=true] False to disable horizontal scroll.
-     * @return {Ext.dom.Element} this
-     */
-    scrollIntoView: function(container, hscroll) {
-        container = Ext.getDom(container) || Ext.getBody().dom;
-        var el = this.dom,
-            offsets = this.getOffsetsTo(container),
-        // el's box
-            left = offsets[0] + container.scrollLeft,
-            top = offsets[1] + container.scrollTop,
-            bottom = top + el.offsetHeight,
-            right = left + el.offsetWidth,
-        // ct's box
-            ctClientHeight = container.clientHeight,
-            ctScrollTop = parseInt(container.scrollTop, 10),
-            ctScrollLeft = parseInt(container.scrollLeft, 10),
-            ctBottom = ctScrollTop + ctClientHeight,
-            ctRight = ctScrollLeft + container.clientWidth;
-
-        if (el.offsetHeight > ctClientHeight || top < ctScrollTop) {
-            container.scrollTop = top;
-        } else if (bottom > ctBottom) {
-            container.scrollTop = bottom - ctClientHeight;
-        }
-        // corrects IE, other browsers will ignore
-        container.scrollTop = container.scrollTop;
-
-        if (hscroll !== false) {
-            if (el.offsetWidth > container.clientWidth || left < ctScrollLeft) {
-                container.scrollLeft = left;
-            }
-            else if (right > ctRight) {
-                container.scrollLeft = right - container.clientWidth;
-            }
-            container.scrollLeft = container.scrollLeft;
-        }
-        return this;
-    },
-
-    // @private
-    scrollChildIntoView: function(child, hscroll) {
-        Ext.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);
-    },
-
-    /**
-     * Scrolls this element the specified direction. Does bounds checking to make sure the scroll is
-     * within this element's scrollable range.
-     * @param {String} direction Possible values are:
-     *
-     * - `"l"` (or `"left"`)
-     * - `"r"` (or `"right"`)
-     * - `"t"` (or `"top"`, or `"up"`)
-     * - `"b"` (or `"bottom"`, or `"down"`)
-     *
-     * @param {Number} distance How far to scroll the element in pixels
-     * @param {Boolean/Object} [animate] true for the default animation or a standard Element
-     * animation config object
-     * @return {Boolean} Returns true if a scroll was triggered or false if the element
-     * was scrolled as far as it could go.
-     */
-    scroll: function(direction, distance, animate) {
-        if (!this.isScrollable()) {
-            return false;
-        }
-        var el = this.dom,
-            l = el.scrollLeft, t = el.scrollTop,
-            w = el.scrollWidth, h = el.scrollHeight,
-            cw = el.clientWidth, ch = el.clientHeight,
-            scrolled = false, v,
-            hash = {
-                l: Math.min(l + distance, w - cw),
-                r: v = Math.max(l - distance, 0),
-                t: Math.max(t - distance, 0),
-                b: Math.min(t + distance, h - ch)
-            };
-
-        hash.d = hash.b;
-        hash.u = hash.t;
-
-        direction = direction.substr(0, 1);
-        if ((v = hash[direction]) > -1) {
-            scrolled = true;
-            this.scrollTo(direction == 'l' || direction == 'r' ? 'left' : 'top', v, this.anim(animate));
-        }
-        return scrolled;
-    }
-});

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

@@ -1,792 +0,0 @@
-/**
- * @class Ext.dom.Element
- */
-(function() {
-
-var Element = Ext.dom.Element,
-    view = document.defaultView,
-    adjustDirect2DTableRe = /table-row|table-.*-group/,
-    INTERNAL = '_internal',
-    HIDDEN = 'hidden',
-    HEIGHT = 'height',
-    WIDTH = 'width',
-    ISCLIPPED = 'isClipped',
-    OVERFLOW = 'overflow',
-    OVERFLOWX = 'overflow-x',
-    OVERFLOWY = 'overflow-y',
-    ORIGINALCLIP = 'originalClip',
-    DOCORBODYRE = /#document|body/i,
-    // This reduces the lookup of 'me.styleHooks' by one hop in the prototype chain. It is
-    // the same object.
-    styleHooks,
-    edges, k, edge, borderWidth;
-
-if (!view || !view.getComputedStyle) {
-    Element.prototype.getStyle = function (property, inline) {
-        var me = this,
-            dom = me.dom,
-            multiple = typeof property != 'string',
-            hooks = me.styleHooks,
-            prop = property,
-            props = prop,
-            len = 1,
-            isInline = inline,
-            camel, domStyle, values, hook, out, style, i;
-
-        if (multiple) {
-            values = {};
-            prop = props[0];
-            i = 0;
-            if (!(len = props.length)) {
-                return values;
-            }
-        }
-
-        if (!dom || dom.documentElement) {
-            return values || '';
-        }
-
-        domStyle = dom.style;
-
-        if (inline) {
-            style = domStyle;
-        } else {
-            style = dom.currentStyle;
-
-            // fallback to inline style if rendering context not available
-            if (!style) {
-                isInline = true;
-                style = domStyle;
-            }
-        }
-
-        do {
-            hook = hooks[prop];
-
-            if (!hook) {
-                hooks[prop] = hook = { name: Element.normalize(prop) };
-            }
-
-            if (hook.get) {
-                out = hook.get(dom, me, isInline, style);
-            } else {
-                camel = hook.name;
-
-                // In some cases, IE6 will throw Invalid Argument exceptions for properties
-                // like fontSize (/examples/tabs/tabs.html in 4.0 used to exhibit this but
-                // no longer does due to font style changes). There is a real cost to a try
-                // block, so we avoid it where possible...
-                if (hook.canThrow) {
-                    try {
-                        out = style[camel];
-                    } catch (e) {
-                        out = '';
-                    }
-                } else {
-                    // EXTJSIV-5657 - In IE9 quirks mode there is a chance that VML root element 
-                    // has neither `currentStyle` nor `style`. Return '' this case.
-                    out = style ? style[camel] : '';
-                }
-            }
-
-            if (!multiple) {
-                return out;
-            }
-
-            values[prop] = out;
-            prop = props[++i];
-        } while (i < len);
-
-        return values;
-    };
-}
-
-Element.override({
-    getHeight: function(contentHeight, preciseHeight) {
-        var me = this,
-            dom = me.dom,
-            hidden = me.isStyle('display', 'none'),
-            height,
-            floating;
-
-        if (hidden) {
-            return 0;
-        }
-
-        height = Math.max(dom.offsetHeight, dom.clientHeight) || 0;
-
-        // IE9 Direct2D dimension rounding bug
-        if (Ext.supports.Direct2DBug) {
-            floating = me.adjustDirect2DDimension(HEIGHT);
-            if (preciseHeight) {
-                height += floating;
-            }
-            else if (floating > 0 && floating < 0.5) {
-                height++;
-            }
-        }
-
-        if (contentHeight) {
-            height -= me.getBorderWidth("tb") + me.getPadding("tb");
-        }
-
-        return (height < 0) ? 0 : height;
-    },
-
-    getWidth: function(contentWidth, preciseWidth) {
-        var me = this,
-            dom = me.dom,
-            hidden = me.isStyle('display', 'none'),
-            rect, width, floating;
-
-        if (hidden) {
-            return 0;
-        }
-
-        // Gecko will in some cases report an offsetWidth that is actually less than the width of the
-        // text contents, because it measures fonts with sub-pixel precision but rounds the calculated
-        // value down. Using getBoundingClientRect instead of offsetWidth allows us to get the precise
-        // subpixel measurements so we can force them to always be rounded up. See
-        // https://bugzilla.mozilla.org/show_bug.cgi?id=458617
-        // Rounding up ensures that the width includes the full width of the text contents.
-        if (Ext.supports.BoundingClientRect) {
-            rect = dom.getBoundingClientRect();
-            width = rect.right - rect.left;
-            width = preciseWidth ? width : Math.ceil(width);
-        } else {
-            width = dom.offsetWidth;
-        }
-
-        width = Math.max(width, dom.clientWidth) || 0;
-
-        // IE9 Direct2D dimension rounding bug
-        if (Ext.supports.Direct2DBug) {
-            // get the fractional portion of the sub-pixel precision width of the element's text contents
-            floating = me.adjustDirect2DDimension(WIDTH);
-            if (preciseWidth) {
-                width += floating;
-            }
-            // IE9 also measures fonts with sub-pixel precision, but unlike Gecko, instead of rounding the offsetWidth down,
-            // it rounds to the nearest integer. This means that in order to ensure that the width includes the full
-            // width of the text contents we need to increment the width by 1 only if the fractional portion is less than 0.5
-            else if (floating > 0 && floating < 0.5) {
-                width++;
-            }
-        }
-
-        if (contentWidth) {
-            width -= me.getBorderWidth("lr") + me.getPadding("lr");
-        }
-
-        return (width < 0) ? 0 : width;
-    },
-
-    setWidth: function(width, animate) {
-        var me = this;
-        width = me.adjustWidth(width);
-        if (!animate || !me.anim) {
-            me.dom.style.width = me.addUnits(width);
-        }
-        else {
-            if (!Ext.isObject(animate)) {
-                animate = {};
-            }
-            me.animate(Ext.applyIf({
-                to: {
-                    width: width
-                }
-            }, animate));
-        }
-        return me;
-    },
-
-    setHeight : function(height, animate) {
-        var me = this;
-
-        height = me.adjustHeight(height);
-        if (!animate || !me.anim) {
-            me.dom.style.height = me.addUnits(height);
-        }
-        else {
-            if (!Ext.isObject(animate)) {
-                animate = {};
-            }
-            me.animate(Ext.applyIf({
-                to: {
-                    height: height
-                }
-            }, animate));
-        }
-
-        return me;
-    },
-
-    applyStyles: function(style) {
-        Ext.DomHelper.applyStyles(this.dom, style);
-        return this;
-    },
-
-    setSize: function(width, height, animate) {
-        var me = this;
-
-        if (Ext.isObject(width)) { // in case of object from getSize()
-            animate = height;
-            height = width.height;
-            width = width.width;
-        }
-
-        width = me.adjustWidth(width);
-        height = me.adjustHeight(height);
-
-        if (!animate || !me.anim) {
-            me.dom.style.width = me.addUnits(width);
-            me.dom.style.height = me.addUnits(height);
-        }
-        else {
-            if (animate === true) {
-                animate = {};
-            }
-            me.animate(Ext.applyIf({
-                to: {
-                    width: width,
-                    height: height
-                }
-            }, animate));
-        }
-
-        return me;
-    },
-
-    getViewSize : function() {
-        var me = this,
-            dom = me.dom,
-            isDoc = DOCORBODYRE.test(dom.nodeName),
-            ret;
-
-        // If the body, use static methods
-        if (isDoc) {
-            ret = {
-                width : Element.getViewWidth(),
-                height : Element.getViewHeight()
-            };
-        } else {
-            ret = {
-                width : dom.clientWidth,
-                height : dom.clientHeight
-            };
-        }
-
-        return ret;
-    },
-
-    getSize: function(contentSize) {
-        return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
-    },
-
-    // TODO: Look at this
-
-    // private  ==> used by Fx
-    adjustWidth : function(width) {
-        var me = this,
-            isNum = (typeof width == 'number');
-
-        if (isNum && me.autoBoxAdjust && !me.isBorderBox()) {
-            width -= (me.getBorderWidth("lr") + me.getPadding("lr"));
-        }
-        return (isNum && width < 0) ? 0 : width;
-    },
-
-    // private   ==> used by Fx
-    adjustHeight : function(height) {
-        var me = this,
-            isNum = (typeof height == "number");
-
-        if (isNum && me.autoBoxAdjust && !me.isBorderBox()) {
-            height -= (me.getBorderWidth("tb") + me.getPadding("tb"));
-        }
-        return (isNum && height < 0) ? 0 : height;
-    },
-
-    /**
-     * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like `#fff`) and valid values
-     * are convert to standard 6 digit hex color.
-     * @param {String} attr The css attribute
-     * @param {String} defaultValue The default value to use when a valid color isn't found
-     * @param {String} [prefix] defaults to #. Use an empty string when working with
-     * color anims.
-     */
-    getColor : function(attr, defaultValue, prefix) {
-        var v = this.getStyle(attr),
-            color = prefix || prefix === '' ? prefix : '#',
-            h, len, i=0;
-
-        if (!v || (/transparent|inherit/.test(v))) {
-            return defaultValue;
-        }
-        if (/^r/.test(v)) {
-             v = v.slice(4, v.length - 1).split(',');
-             len = v.length;
-             for (; i<len; i++) {
-                h = parseInt(v[i], 10);
-                color += (h < 16 ? '0' : '') + h.toString(16);
-            }
-        } else {
-            v = v.replace('#', '');
-            color += v.length == 3 ? v.replace(/^(\w)(\w)(\w)$/, '$1$1$2$2$3$3') : v;
-        }
-        return(color.length > 5 ? color.toLowerCase() : defaultValue);
-    },
-
-    /**
-     * Set the opacity of the element
-     * @param {Number} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
-     * @param {Boolean/Object} [animate] a standard Element animation config object or `true` for
-     * the default animation (`{duration: .35, easing: 'easeIn'}`)
-     * @return {Ext.dom.Element} this
-     */
-    setOpacity: function(opacity, animate) {
-        var me = this;
-
-        if (!me.dom) {
-            return me;
-        }
-
-        if (!animate || !me.anim) {
-            me.setStyle('opacity', opacity);
-        }
-        else {
-            if (typeof animate != 'object') {
-                animate = {
-                    duration: 350,
-                    easing: 'ease-in'
-                };
-            }
-
-            me.animate(Ext.applyIf({
-                to: {
-                    opacity: opacity
-                }
-            }, animate));
-        }
-        return me;
-    },
-
-    /**
-     * Clears any opacity settings from this element. Required in some cases for IE.
-     * @return {Ext.dom.Element} this
-     */
-    clearOpacity : function() {
-        return this.setOpacity('');
-    },
-
-    /**
-     * @private
-     * Returns 1 if the browser returns the subpixel dimension rounded to the lowest pixel.
-     * @return {Number} 0 or 1
-     */
-    adjustDirect2DDimension: function(dimension) {
-        var me = this,
-            dom = me.dom,
-            display = me.getStyle('display'),
-            inlineDisplay = dom.style.display,
-            inlinePosition = dom.style.position,
-            originIndex = dimension === WIDTH ? 0 : 1,
-            currentStyle = dom.currentStyle,
-            floating;
-
-        if (display === 'inline') {
-            dom.style.display = 'inline-block';
-        }
-
-        dom.style.position = display.match(adjustDirect2DTableRe) ? 'absolute' : 'static';
-
-        // floating will contain digits that appears after the decimal point
-        // if height or width are set to auto we fallback to msTransformOrigin calculation
-        
-        // Use currentStyle here instead of getStyle. In some difficult to reproduce 
-        // instances it resets the scrollWidth of the element
-        floating = (parseFloat(currentStyle[dimension]) || parseFloat(currentStyle.msTransformOrigin.split(' ')[originIndex]) * 2) % 1;
-
-        dom.style.position = inlinePosition;
-
-        if (display === 'inline') {
-            dom.style.display = inlineDisplay;
-        }
-
-        return floating;
-    },
-
-    /**
-     * Store the current overflow setting and clip overflow on the element - use {@link #unclip} to remove
-     * @return {Ext.dom.Element} this
-     */
-    clip : function() {
-        var me = this,
-            data = (me.$cache || me.getCache()).data,
-            style;
-
-        if (!data[ISCLIPPED]) {
-            data[ISCLIPPED] = true;
-            style = me.getStyle([OVERFLOW, OVERFLOWX, OVERFLOWY]);
-            data[ORIGINALCLIP] = {
-                o: style[OVERFLOW],
-                x: style[OVERFLOWX],
-                y: style[OVERFLOWY]
-            };
-            me.setStyle(OVERFLOW, HIDDEN);
-            me.setStyle(OVERFLOWX, HIDDEN);
-            me.setStyle(OVERFLOWY, HIDDEN);
-        }
-        return me;
-    },
-
-    /**
-     * Return clipping (overflow) to original clipping before {@link #clip} was called
-     * @return {Ext.dom.Element} this
-     */
-    unclip : function() {
-        var me = this,
-            data = (me.$cache || me.getCache()).data,
-            clip;
-
-        if (data[ISCLIPPED]) {
-            data[ISCLIPPED] = false;
-            clip = data[ORIGINALCLIP];
-            if (clip.o) {
-                me.setStyle(OVERFLOW, clip.o);
-            }
-            if (clip.x) {
-                me.setStyle(OVERFLOWX, clip.x);
-            }
-            if (clip.y) {
-                me.setStyle(OVERFLOWY, clip.y);
-            }
-        }
-        return me;
-    },
-
-    /**
-     * Wraps the specified element with a special 9 element markup/CSS block that renders by default as
-     * a gray container with a gradient background, rounded corners and a 4-way shadow.
-     *
-     * This special markup is used throughout Ext when box wrapping elements ({@link Ext.button.Button},
-     * {@link Ext.panel.Panel} when {@link Ext.panel.Panel#frame frame=true}, {@link Ext.window.Window}).
-     * The markup is of this form:
-     *
-     *     Ext.dom.Element.boxMarkup =
-     *     '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>
-     *     <div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>
-     *     <div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
-     *
-     * Example usage:
-     *
-     *     // Basic box wrap
-     *     Ext.get("foo").boxWrap();
-     *
-     *     // You can also add a custom class and use CSS inheritance rules to customize the box look.
-     *     // 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
-     *     // for how to create a custom box wrap style.
-     *     Ext.get("foo").boxWrap().addCls("x-box-blue");
-     *
-     * @param {String} [class='x-box'] A base CSS class to apply to the containing wrapper element.
-     * Note that there are a number of CSS rules that are dependent on this name to make the overall effect work,
-     * so if you supply an alternate base class, make sure you also supply all of the necessary rules.
-     * @return {Ext.dom.Element} The outermost wrapping element of the created box structure.
-     */
-    boxWrap : function(cls) {
-        cls = cls || Ext.baseCSSPrefix + 'box';
-        var el = Ext.get(this.insertHtml("beforeBegin", "<div class='" + cls + "'>" + Ext.String.format(Element.boxMarkup, cls) + "</div>"));
-        Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);
-        return el;
-    },
-
-    /**
-     * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
-     * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
-     * if a height has not been set using CSS.
-     * @return {Number}
-     */
-    getComputedHeight : function() {
-        var me = this,
-            h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);
-        if (!h) {
-            h = parseFloat(me.getStyle(HEIGHT)) || 0;
-            if (!me.isBorderBox()) {
-                h += me.getFrameWidth('tb');
-            }
-        }
-        return h;
-    },
-
-    /**
-     * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
-     * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
-     * if a width has not been set using CSS.
-     * @return {Number}
-     */
-    getComputedWidth : function() {
-        var me = this,
-            w = Math.max(me.dom.offsetWidth, me.dom.clientWidth);
-
-        if (!w) {
-            w = parseFloat(me.getStyle(WIDTH)) || 0;
-            if (!me.isBorderBox()) {
-                w += me.getFrameWidth('lr');
-            }
-        }
-        return w;
-    },
-
-    /**
-     * Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
-     * for more information about the sides.
-     * @param {String} sides
-     * @return {Number}
-     */
-    getFrameWidth : function(sides, onlyContentBox) {
-        return (onlyContentBox && this.isBorderBox()) ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
-    },
-
-    /**
-     * Sets up event handlers to add and remove a css class when the mouse is over this element
-     * @param {String} className The class to add
-     * @param {Function} [testFn] A test function to execute before adding the class. The passed parameter
-     * will be the Element instance. If this functions returns false, the class will not be added.
-     * @param {Object} [scope] The scope to execute the testFn in.
-     * @return {Ext.dom.Element} this
-     */
-    addClsOnOver : function(className, testFn, scope) {
-        var me = this,
-            dom = me.dom,
-            hasTest = Ext.isFunction(testFn);
-            
-        me.hover(
-            function() {
-                if (hasTest && testFn.call(scope || me, me) === false) {
-                    return;
-                }
-                Ext.fly(dom, INTERNAL).addCls(className);
-            },
-            function() {
-                Ext.fly(dom, INTERNAL).removeCls(className);
-            }
-        );
-        return me;
-    },
-
-    /**
-     * Sets up event handlers to add and remove a css class when this element has the focus
-     * @param {String} className The class to add
-     * @param {Function} [testFn] A test function to execute before adding the class. The passed parameter
-     * will be the Element instance. If this functions returns false, the class will not be added.
-     * @param {Object} [scope] The scope to execute the testFn in.
-     * @return {Ext.dom.Element} this
-     */
-    addClsOnFocus : function(className, testFn, scope) {
-        var me = this,
-            dom = me.dom,
-            hasTest = Ext.isFunction(testFn);
-            
-        me.on("focus", function() {
-            if (hasTest && testFn.call(scope || me, me) === false) {
-                return false;
-            }
-            Ext.fly(dom, INTERNAL).addCls(className);
-        });
-        me.on("blur", function() {
-            Ext.fly(dom, INTERNAL).removeCls(className);
-        });
-        return me;
-    },
-
-    /**
-     * Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)
-     * @param {String} className The class to add
-     * @param {Function} [testFn] A test function to execute before adding the class. The passed parameter
-     * will be the Element instance. If this functions returns false, the class will not be added.
-     * @param {Object} [scope] The scope to execute the testFn in.
-     * @return {Ext.dom.Element} this
-     */
-    addClsOnClick : function(className, testFn, scope) {
-        var me = this,
-            dom = me.dom,
-            hasTest = Ext.isFunction(testFn);
-            
-        me.on("mousedown", function() {
-            if (hasTest && testFn.call(scope || me, me) === false) {
-                return false;
-            }
-            Ext.fly(dom, INTERNAL).addCls(className);
-            var d = Ext.getDoc(),
-                fn = function() {
-                    Ext.fly(dom, INTERNAL).removeCls(className);
-                    d.removeListener("mouseup", fn);
-                };
-            d.on("mouseup", fn);
-        });
-        return me;
-    },
-
-    /**
-     * Returns the dimensions of the element available to lay content out in.
-     *
-     * getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and
-     * offsetWidth/clientWidth. To obtain the size excluding scrollbars, use getViewSize.
-     *
-     * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
-     *
-     * @return {Object} Object describing width and height.
-     * @return {Number} return.width
-     * @return {Number} return.height
-     */
-    getStyleSize : function() {
-        var me = this,
-            d = this.dom,
-            isDoc = DOCORBODYRE.test(d.nodeName),
-            s ,
-            w, h;
-
-        // If the body, use static methods
-        if (isDoc) {
-            return {
-                width : Element.getViewWidth(),
-                height : Element.getViewHeight()
-            };
-        }
-
-        s = me.getStyle([HEIGHT, WIDTH], true);  //seek inline
-        // Use Styles if they are set
-        if (s.width && s.width != 'auto') {
-            w = parseFloat(s.width);
-            if (me.isBorderBox()) {
-                w -= me.getFrameWidth('lr');
-            }
-        }
-        // Use Styles if they are set
-        if (s.height && s.height != 'auto') {
-            h = parseFloat(s.height);
-            if (me.isBorderBox()) {
-                h -= me.getFrameWidth('tb');
-            }
-        }
-        // Use getWidth/getHeight if style not set.
-        return {width: w || me.getWidth(true), height: h || me.getHeight(true)};
-    },
-
-    /**
-     * Enable text selection for this element (normalized across browsers)
-     * @return {Ext.Element} this
-     */
-    selectable : function() {
-        var me = this;
-        me.dom.unselectable = "off";
-        // Prevent it from bubles up and enables it to be selectable
-        me.on('selectstart', function (e) {
-            e.stopPropagation();
-            return true;
-        });
-        me.applyStyles("-moz-user-select: text; -khtml-user-select: text;");
-        me.removeCls(Ext.baseCSSPrefix + 'unselectable');
-        return me;
-    },
-
-    /**
-     * Disables text selection for this element (normalized across browsers)
-     * @return {Ext.dom.Element} this
-     */
-    unselectable : function() {
-        var me = this;
-        me.dom.unselectable = "on";
-
-        me.swallowEvent("selectstart", true);
-        me.applyStyles("-moz-user-select:-moz-none;-khtml-user-select:none;");
-        me.addCls(Ext.baseCSSPrefix + 'unselectable');
-
-        return me;
-    }
-});
-
-Element.prototype.styleHooks = styleHooks = Ext.dom.AbstractElement.prototype.styleHooks;
-
-if (Ext.isIE6) {
-    styleHooks.fontSize = styleHooks['font-size'] = {
-        name: 'fontSize',
-        canThrow: true
-    };
-}
-
-// override getStyle for border-*-width
-if (Ext.isIEQuirks || Ext.isIE && Ext.ieVersion <= 8) {
-    function getBorderWidth (dom, el, inline, style) {
-        if (style[this.styleName] == 'none') {
-            return '0px';
-        }
-        return style[this.name];
-    }
-
-    edges = ['Top','Right','Bottom','Left'];
-    k = edges.length;
-
-    while (k--) {
-        edge = edges[k];
-        borderWidth = 'border' + edge + 'Width';
-
-        styleHooks['border-'+edge.toLowerCase()+'-width'] = styleHooks[borderWidth] = {
-            name: borderWidth,
-            styleName: 'border' + edge + 'Style',
-            get: getBorderWidth
-        };
-    }
-}
-
-}());
-
-Ext.onReady(function () {
-    var opacityRe = /alpha\(opacity=(.*)\)/i,
-        trimRe = /^\s+|\s+$/g,
-        hooks = Ext.dom.Element.prototype.styleHooks;
-
-    // Ext.supports flags are not populated until onReady...
-    hooks.opacity = {
-        name: 'opacity',
-        afterSet: function(dom, value, el) {
-            if (el.isLayer) {
-                el.onOpacitySet(value);
-            }
-        }
-    };
-    if (!Ext.supports.Opacity && Ext.isIE) {
-        Ext.apply(hooks.opacity, {
-            get: function (dom) {
-                var filter = dom.style.filter,
-                    match, opacity;
-                if (filter.match) {
-                    match = filter.match(opacityRe);
-                    if (match) {
-                        opacity = parseFloat(match[1]);
-                        if (!isNaN(opacity)) {
-                            return opacity ? opacity / 100 : 0;
-                        }
-                    }
-                }
-                return 1;
-            },
-            set: function (dom, value) {
-                var style = dom.style,
-                    val = style.filter.replace(opacityRe, '').replace(trimRe, '');
-
-                style.zoom = 1; // ensure dom.hasLayout
-
-                // value can be a number or '' or null... so treat falsey as no opacity
-                if (typeof(value) == 'number' && value >= 0 && value < 1) {
-                    value *= 100;
-                    style.filter = val + (val.length ? ' ' : '') + 'alpha(opacity='+value+')';
-                } else {
-                    style.filter = val;
-                }
-            }  
-        });
-    }
-    // else there is no work around for the lack of opacity support. Should not be a
-    // problem given that this has been supported for a long time now...
-});