extjs-rails 4.1.0.alpha1

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

@@ -0,0 +1,173 @@
+/**
+ * @class Ext.dom.AbstractElement
+ */
+Ext.dom.AbstractElement.override({
+
+    /**
+     * Gets the x,y coordinates specified by the anchor position on the element.
+     * @param {String} [anchor] The specified anchor position (defaults to "c").  See {@link Ext.dom.Element#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 {Array} [x, y] An array containing the element's x and y coordinates
+     */
+    getAnchorXY: function(anchor, local, size) {
+        //Passing a different size is useful for pre-calculating anchors,
+        //especially for anchored animations that change the el size.
+        anchor = (anchor || "tl").toLowerCase();
+        size = size || {};
+
+        var me = this,
+            vp = me.dom == document.body || me.dom == document,
+            width = size.width || vp ? window.innerWidth: me.getWidth(),
+            height = size.height || vp ? window.innerHeight: me.getHeight(),
+            xy,
+            rnd = Math.round,
+            myXY = me.getXY(),
+            extraX = vp ? 0: !local ? myXY[0] : 0,
+            extraY = vp ? 0: !local ? myXY[1] : 0,
+            hash = {
+                c: [rnd(width * 0.5), rnd(height * 0.5)],
+                t: [rnd(width * 0.5), 0],
+                l: [0, rnd(height * 0.5)],
+                r: [width, rnd(height * 0.5)],
+                b: [rnd(width * 0.5), height],
+                tl: [0, 0],
+                bl: [0, height],
+                br: [width, height],
+                tr: [width, 0]
+            };
+
+        xy = hash[anchor];
+        return [xy[0] + extraX, xy[1] + extraY];
+    },
+
+    alignToRe: /^([a-z]+)-([a-z]+)(\?)?$/,
+
+    /**
+     * Gets the x,y coordinates to align this element with another element. See {@link Ext.dom.Element#alignTo} for more info on the
+     * supported position values.
+     * @param {Ext.Element/HTMLElement/String} element The element to align to.
+     * @param {String} [position="tl-bl?"] The position to align to.
+     * @param {Array} [offsets=[0,0]] Offset the positioning by [x, y]
+     * @return {Array} [x, y]
+     */
+    getAlignToXY: function(el, position, offsets, local) {
+        local = !!local;
+        el = Ext.get(el);
+
+        //<debug>
+        if (!el || !el.dom) {
+            throw new Error("Element.alignToXY with an element that doesn't exist");
+        }
+        //</debug>
+        offsets = offsets || [0, 0];
+
+        if (!position || position == '?') {
+            position = 'tl-bl?';
+        }
+        else if (! (/-/).test(position) && position !== "") {
+            position = 'tl-' + position;
+        }
+        position = position.toLowerCase();
+
+        var me = this,
+            matches = position.match(this.alignToRe),
+            dw = window.innerWidth,
+            dh = window.innerHeight,
+            p1 = "",
+            p2 = "",
+            a1,
+            a2,
+            x,
+            y,
+            swapX,
+            swapY,
+            p1x,
+            p1y,
+            p2x,
+            p2y,
+            width,
+            height,
+            region,
+            constrain;
+
+        if (!matches) {
+            throw "Element.alignTo with an invalid alignment " + position;
+        }
+
+        p1 = matches[1];
+        p2 = matches[2];
+        constrain = !!matches[3];
+
+        //Subtract the aligned el's internal xy from the target's offset xy
+        //plus custom offset to get the aligned el's new offset xy
+        a1 = me.getAnchorXY(p1, true);
+        a2 = el.getAnchorXY(p2, local);
+
+        x = a2[0] - a1[0] + offsets[0];
+        y = a2[1] - a1[1] + offsets[1];
+
+        if (constrain) {
+            width = me.getWidth();
+            height = me.getHeight();
+
+            region = el.getPageBox();
+
+            //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 = p1.charAt(0);
+            p1x = p1.charAt(p1.length - 1);
+            p2y = p2.charAt(0);
+            p2x = p2.charAt(p2.length - 1);
+
+            swapY = ((p1y == "t" && p2y == "b") || (p1y == "b" && p2y == "t"));
+            swapX = ((p1x == "r" && p2x == "l") || (p1x == "l" && p2x == "r"));
+
+            if (x + width > dw) {
+                x = swapX ? region.left - width: dw - width;
+            }
+            if (x < 0) {
+                x = swapX ? region.right: 0;
+            }
+            if (y + height > dh) {
+                y = swapY ? region.top - height: dh - height;
+            }
+            if (y < 0) {
+                y = swapY ? region.bottom: 0;
+            }
+        }
+
+        return [x, y];
+    },
+
+    // private
+    getAnchor: function(){
+        var data = (this.$cache || this.getCache()).data,
+            anchor;
+            
+        if (!this.dom) {
+            return;
+        }
+        anchor = data._anchor;
+
+        if(!anchor){
+            anchor = data._anchor = {};
+        }
+        return anchor;
+    },
+
+    // private ==>  used outside of core
+    adjustForConstraints: function(xy, parent) {
+        var vector = this.getConstrainVector(parent, xy);
+        if (vector) {
+            xy[0] += vector[0];
+            xy[1] += vector[1];
+        }
+        return xy;
+    }
+
+});

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

@@ -0,0 +1,193 @@
+/**
+ * @class Ext.dom.AbstractElement
+ */
+Ext.dom.AbstractElement.addMethods({
+    /**
+     * Appends the passed element(s) to this element
+     * @param {String/HTMLElement/Ext.dom.AbstractElement} el
+     * The id of the node, a DOM Node or an existing Element.
+     * @return {Ext.dom.AbstractElement} This element
+     */
+    appendChild: function(el) {
+        return Ext.get(el).appendTo(this);
+    },
+
+    /**
+     * Appends this element to the passed element
+     * @param {String/HTMLElement/Ext.dom.AbstractElement} el The new parent element.
+     * The id of the node, a DOM Node or an existing Element.
+     * @return {Ext.dom.AbstractElement} This element
+     */
+    appendTo: function(el) {
+        Ext.getDom(el).appendChild(this.dom);
+        return this;
+    },
+
+    /**
+     * Inserts this element before the passed element in the DOM
+     * @param {String/HTMLElement/Ext.dom.AbstractElement} el The element before which this element will be inserted.
+     * The id of the node, a DOM Node or an existing Element.
+     * @return {Ext.dom.AbstractElement} This element
+     */
+    insertBefore: function(el) {
+        el = Ext.getDom(el);
+        el.parentNode.insertBefore(this.dom, el);
+        return this;
+    },
+
+    /**
+     * Inserts this element after the passed element in the DOM
+     * @param {String/HTMLElement/Ext.dom.AbstractElement} el The element to insert after.
+     * The id of the node, a DOM Node or an existing Element.
+     * @return {Ext.dom.AbstractElement} This element
+     */
+    insertAfter: function(el) {
+        el = Ext.getDom(el);
+        el.parentNode.insertBefore(this.dom, el.nextSibling);
+        return this;
+    },
+
+    /**
+     * Inserts (or creates) an element (or DomHelper config) as the first child of this element
+     * @param {String/HTMLElement/Ext.dom.AbstractElement/Object} el The id or element to insert or a DomHelper config
+     * to create and insert
+     * @return {Ext.dom.AbstractElement} The new child
+     */
+    insertFirst: function(el, returnDom) {
+        el = el || {};
+        if (el.nodeType || el.dom || typeof el == 'string') { // element
+            el = Ext.getDom(el);
+            this.dom.insertBefore(el, this.dom.firstChild);
+            return !returnDom ? Ext.get(el) : el;
+        }
+        else { // dh config
+            return this.createChild(el, this.dom.firstChild, returnDom);
+        }
+    },
+
+    /**
+     * Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element
+     * @param {String/HTMLElement/Ext.dom.AbstractElement/Object/Array} el The id, element to insert or a DomHelper config
+     * to create and insert *or* an array of any of those.
+     * @param {String} [where='before'] 'before' or 'after'
+     * @param {Boolean} [returnDom=false] True to return the .;ll;l,raw DOM element instead of Ext.dom.AbstractElement
+     * @return {Ext.dom.AbstractElement} The inserted Element. If an array is passed, the last inserted element is returned.
+     */
+    insertSibling: function(el, where, returnDom){
+        var me      = this,
+            isAfter = (where || 'before').toLowerCase() == 'after',
+            rt, insertEl, eLen, e;
+
+        if (Ext.isArray(el)) {
+            insertEl = me;
+            eLen = el.length;
+            
+            for (e = 0; e < eLen; e++) {
+                rt = Ext.fly(insertEl, '_internal').insertSibling(el[e], where, returnDom);
+
+                if (isAfter) {
+                    insertEl = rt;
+                }
+            }
+
+            return rt;
+        }
+
+        el = el || {};
+
+        if(el.nodeType || el.dom){
+            rt = me.dom.parentNode.insertBefore(Ext.getDom(el), isAfter ? me.dom.nextSibling : me.dom);
+            if (!returnDom) {
+                rt = Ext.get(rt);
+            }
+        }else{
+            if (isAfter && !me.dom.nextSibling) {
+                rt = Ext.core.DomHelper.append(me.dom.parentNode, el, !returnDom);
+            } else {
+                rt = Ext.core.DomHelper[isAfter ? 'insertAfter' : 'insertBefore'](me.dom, el, !returnDom);
+            }
+        }
+        return rt;
+    },
+
+    /**
+     * Replaces the passed element with this element
+     * @param {String/HTMLElement/Ext.dom.AbstractElement} el The element to replace.
+     * The id of the node, a DOM Node or an existing Element.
+     * @return {Ext.dom.AbstractElement} This element
+     */
+    replace: function(el) {
+        el = Ext.get(el);
+        this.insertBefore(el);
+        el.remove();
+        return this;
+    },
+
+    /**
+     * Replaces this element with the passed element
+     * @param {String/HTMLElement/Ext.dom.AbstractElement/Object} el The new element (id of the node, a DOM Node
+     * or an existing Element) or a DomHelper config of an element to create
+     * @return {Ext.dom.AbstractElement} This element
+     */
+    replaceWith: function(el){
+        var me = this;
+
+        if(el.nodeType || el.dom || typeof el == 'string'){
+            el = Ext.get(el);
+            me.dom.parentNode.insertBefore(el, me.dom);
+        }else{
+            el = Ext.core.DomHelper.insertBefore(me.dom, el);
+        }
+
+        delete Ext.cache[me.id];
+        Ext.removeNode(me.dom);
+        me.id = Ext.id(me.dom = el);
+        Ext.dom.AbstractElement.addToCache(me.isFlyweight ? new Ext.dom.AbstractElement(me.dom) : me);
+        return me;
+    },
+
+    /**
+     * Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.
+     * @param {Object} config DomHelper element config object.  If no tag is specified (e.g., {tag:'input'}) then a div will be
+     * automatically generated with the specified attributes.
+     * @param {HTMLElement} [insertBefore] a child element of this element
+     * @param {Boolean} [returnDom=false] true to return the dom node instead of creating an Element
+     * @return {Ext.dom.AbstractElement} The new child element
+     */
+    createChild: function(config, insertBefore, returnDom) {
+        config = config || {tag:'div'};
+        if (insertBefore) {
+            return Ext.core.DomHelper.insertBefore(insertBefore, config, returnDom !== true);
+        }
+        else {
+            return Ext.core.DomHelper[!this.dom.firstChild ? 'insertFirst' : 'append'](this.dom, config,  returnDom !== true);
+        }
+    },
+
+    /**
+     * Creates and wraps this element with another element
+     * @param {Object} [config] DomHelper element config object for the wrapper element or null for an empty div
+     * @param {Boolean} [returnDom=false] True to return the raw DOM element instead of Ext.dom.AbstractElement
+     * @return {HTMLElement/Ext.dom.AbstractElement} The newly created wrapper element
+     */
+    wrap: function(config, returnDom) {
+        var newEl = Ext.core.DomHelper.insertBefore(this.dom, config || {tag: "div"}, !returnDom),
+            d = newEl.dom || newEl;
+
+        d.appendChild(this.dom);
+        return newEl;
+    },
+
+    /**
+     * Inserts an html fragment into this element
+     * @param {String} where Where to insert the html in relation to this element - beforeBegin, afterBegin, beforeEnd, afterEnd.
+     * See {@link Ext.dom.Helper#insertHtml} for details.
+     * @param {String} html The HTML fragment
+     * @param {Boolean} [returnEl=false] True to return an Ext.dom.AbstractElement
+     * @return {HTMLElement/Ext.dom.AbstractElement} The inserted node (or nearest related if more than 1 inserted)
+     */
+    insertHtml: function(where, html, returnEl) {
+        var el = Ext.core.DomHelper.insertHtml(where, this.dom, html);
+        return returnEl ? Ext.get(el) : el;
+    }
+});

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

@@ -0,0 +1,681 @@
+/**
+ * @class Ext.dom.AbstractElement
+ * @extend Ext.Base
+ * @private
+ */
+(function() {
+
+var document = window.document,
+    trimRe = /^\s+|\s+$/g,
+    whitespaceRe = /\s/;
+
+if (!Ext.cache){
+    Ext.cache = {};
+}
+
+Ext.define('Ext.dom.AbstractElement', {
+
+    inheritableStatics: {
+
+        /**
+         * Retrieves Ext.dom.Element objects. {@link Ext#get} is alias for {@link Ext.dom.Element#get}.
+         *
+         * **This method does not retrieve {@link Ext.Component Component}s.** This method retrieves Ext.dom.Element
+         * objects which encapsulate DOM elements. To retrieve a Component by its ID, use {@link Ext.ComponentManager#get}.
+         *
+         * Uses simple caching to consistently return the same object. Automatically fixes if an object was recreated with
+         * the same id via AJAX or DOM.
+         *
+         * @param {String/HTMLElement/Ext.Element} el The id of the node, a DOM Node or an existing Element.
+         * @return {Ext.dom.Element} The Element object (or null if no matching element was found)
+         * @static
+         * @inheritable
+         */
+        get: function(el) {
+            var me = this,
+                El = Ext.dom.Element,
+                cache,
+                extEl,
+                dom,
+                id;
+
+            if (!el) {
+                return null;
+            }
+
+            if (typeof el == "string") { // element id
+                if (el == Ext.windowId) {
+                    return El.get(window);
+                } else if (el == Ext.documentId) {
+                    return El.get(document);
+                }
+                
+                cache = Ext.cache[el];
+                // This code is here to catch the case where we've got a reference to a document of an iframe
+                // It getElementById will fail because it's not part of the document, so if we're skipping
+                // GC it means it's a window/document object that isn't the default window/document, which we have
+                // already handled above
+                if (cache && cache.skipGarbageCollection) {
+                    extEl = cache.el;
+                    return extEl;
+                }
+                
+                if (!(dom = document.getElementById(el))) {
+                    return null;
+                }
+
+                if (cache && cache.el) {
+                    extEl = cache.el;
+                    extEl.dom = dom;
+                } else {
+                    // Force new element if there's a cache but no el attached
+                    extEl = new El(dom, !!cache);
+                }
+                return extEl;
+            } else if (el.tagName) { // dom element
+                if (!(id = el.id)) {
+                    id = Ext.id(el);
+                }
+                cache = Ext.cache[id];
+                if (cache && cache.el) {
+                    extEl = Ext.cache[id].el;
+                    extEl.dom = el;
+                } else {
+                    // Force new element if there's a cache but no el attached
+                    extEl = new El(el, !!cache);
+                }
+                return extEl;
+            } else if (el instanceof me) {
+                if (el != me.docEl && el != me.winEl) {
+                    // refresh dom element in case no longer valid,
+                    // catch case where it hasn't been appended
+                    el.dom = document.getElementById(el.id) || el.dom;
+                }
+                return el;
+            } else if (el.isComposite) {
+                return el;
+            } else if (Ext.isArray(el)) {
+                return me.select(el);
+            } else if (el === document) {
+                // create a bogus element object representing the document object
+                if (!me.docEl) {
+                    me.docEl = Ext.Object.chain(El.prototype);
+                    me.docEl.dom = document;
+                    me.docEl.id = Ext.id(document);
+                    me.addToCache(me.docEl);
+                }
+                return me.docEl;
+            } else if (el === window) {
+                if (!me.winEl) {
+                    me.winEl = Ext.Object.chain(El.prototype);
+                    me.winEl.dom = window;
+                    me.winEl.id = Ext.id(window);
+                    me.addToCache(me.winEl);
+                }
+                return me.winEl;
+            }
+            return null;
+        },
+
+        addToCache: function(el, id) {
+            if (el) {
+                Ext.addCacheEntry(id, el);
+            }
+            return el;
+        },
+
+        addMethods: function() {
+            this.override.apply(this, arguments);
+        },
+
+        /**
+         * <p>Returns an array of unique class names based upon the input strings, or string arrays.</p>
+         * <p>The number of parameters is unlimited.</p>
+         * <p>Example</p><code><pre>
+// Add x-invalid and x-mandatory classes, do not duplicate
+myElement.dom.className = Ext.core.Element.mergeClsList(this.initialClasses, 'x-invalid x-mandatory');
+</pre></code>
+         * @param {Mixed} clsList1 A string of class names, or an array of class names.
+         * @param {Mixed} clsList2 A string of class names, or an array of class names.
+         * @return {Array} An array of strings representing remaining unique, merged class names. If class names were added to the first list, the <code>changed</code> property will be <code>true</code>.
+         * @static
+         * @inheritable
+         */
+        mergeClsList: function() {
+            var clsList, clsHash = {},
+                i, length, j, listLength, clsName, result = [],
+                changed = false;
+
+            for (i = 0, length = arguments.length; i < length; i++) {
+                clsList = arguments[i];
+                if (Ext.isString(clsList)) {
+                    clsList = clsList.replace(trimRe, '').split(whitespaceRe);
+                }
+                if (clsList) {
+                    for (j = 0, listLength = clsList.length; j < listLength; j++) {
+                        clsName = clsList[j];
+                        if (!clsHash[clsName]) {
+                            if (i) {
+                                changed = true;
+                            }
+                            clsHash[clsName] = true;
+                        }
+                    }
+                }
+            }
+
+            for (clsName in clsHash) {
+                result.push(clsName);
+            }
+            result.changed = changed;
+            return result;
+        },
+
+        /**
+         * <p>Returns an array of unique class names deom the first parameter with all class names
+         * from the second parameter removed.</p>
+         * <p>Example</p><code><pre>
+// Remove x-invalid and x-mandatory classes if present.
+myElement.dom.className = Ext.core.Element.removeCls(this.initialClasses, 'x-invalid x-mandatory');
+</pre></code>
+         * @param {Mixed} existingClsList A string of class names, or an array of class names.
+         * @param {Mixed} removeClsList A string of class names, or an array of class names to remove from <code>existingClsList</code>.
+         * @return {Array} An array of strings representing remaining class names. If class names were removed, the <code>changed</code> property will be <code>true</code>.
+         * @static
+         * @inheritable
+         */
+        removeCls: function(existingClsList, removeClsList) {
+            var clsHash = {},
+                i, length, clsName, result = [],
+                changed = false;
+
+            if (existingClsList) {
+                if (Ext.isString(existingClsList)) {
+                    existingClsList = existingClsList.replace(trimRe, '').split(whitespaceRe);
+                }
+                for (i = 0, length = existingClsList.length; i < length; i++) {
+                    clsHash[existingClsList[i]] = true;
+                }
+            }
+            if (removeClsList) {
+                if (Ext.isString(removeClsList)) {
+                    removeClsList = removeClsList.split(whitespaceRe);
+                }
+                for (i = 0, length = removeClsList.length; i < length; i++) {
+                    clsName = removeClsList[i];
+                    if (clsHash[clsName]) {
+                        changed = true;
+                        delete clsHash[clsName];
+                    }
+                }
+            }
+            for (clsName in clsHash) {
+                result.push(clsName);
+            }
+            result.changed = changed;
+            return result;
+        },
+
+        /**
+         * @property
+         * Visibility mode constant for use with {@link Ext.dom.Element#setVisibilityMode}. 
+         * Use the CSS 'visibility' property to hide the element.
+         *
+         * Note that in this mode, {@link #isVisible} may return true for an element even though 
+         * it actually has a parent element that is hidden. For this reason, and in most cases,
+         * using the {@link #OFFSETS} mode is a better choice.
+         * @static
+         * @inheritable
+         */
+        VISIBILITY: 1,
+
+        /**
+         * @property
+         * Visibility mode constant for use with {@link Ext.dom.Element#setVisibilityMode}. 
+         * Use the CSS 'display' property to hide the element.
+         * @static
+         * @inheritable
+         */
+        DISPLAY: 2,
+
+        /**
+         * @property
+         * Visibility mode constant for use with {@link Ext.dom.Element#setVisibilityMode}. 
+         * Use CSS absolute positioning and top/left offsets to hide the element.
+         * @static
+         * @inheritable
+         */
+        OFFSETS: 3,
+
+        /**
+         * @property
+         * Visibility mode constant for use with {@link Ext.dom.Element#setVisibilityMode}. 
+         * Add or remove the {@link Ext.Layer#visibilityCls} class to hide the element.
+         * @static
+         * @inheritable
+         */
+        ASCLASS: 4
+    },
+
+    constructor: function(element, forceNew) {
+        var me = this,
+            dom = typeof element == 'string'
+                ? document.getElementById(element)
+                : element,
+            id;
+
+        if (!dom) {
+            return null;
+        }
+
+        id = dom.id;
+        if (!forceNew && id && Ext.cache[id]) {
+            // element object already exists
+            return Ext.cache[id].el;
+        }
+
+        /**
+         * @property {HTMLElement} dom
+         * The DOM element
+         */
+        me.dom = dom;
+
+        /**
+         * @property {String} id
+         * The DOM element ID
+         */
+        me.id = id || Ext.id(dom);
+
+        me.self.addToCache(me);
+    },
+
+    /**
+     * Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)
+     * @param {Object} o The object with the attributes
+     * @param {Boolean} [useSet=true] false to override the default setAttribute to use expandos.
+     * @return {Ext.dom.Element} this
+     */
+    set: function(o, useSet) {
+         var el = this.dom,
+             attr,
+             value;
+
+         for (attr in o) {
+             if (o.hasOwnProperty(attr)) {
+                 value = o[attr];
+                 if (attr == 'style') {
+                     this.applyStyles(value);
+                 }
+                 else if (attr == 'cls') {
+                     el.className = value;
+                 }
+                 else if (useSet !== false) {
+                     if (value === undefined) {
+                         el.removeAttribute(attr);
+                     } else {
+                        el.setAttribute(attr, value);
+                     }
+                 }
+                 else {
+                     el[attr] = value;
+                 }
+             }
+         }
+         return this;
+     },
+
+    /**
+     * @property {String} defaultUnit
+     * The default unit to append to CSS values where a unit isn't provided.
+     */
+    defaultUnit: "px",
+
+    /**
+     * Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)
+     * @param {String} selector The simple selector to test
+     * @return {Boolean} True if this element matches the selector, else false
+     */
+    is: function(simpleSelector) {
+        return Ext.DomQuery.is(this.dom, simpleSelector);
+    },
+
+    /**
+     * Returns the value of the "value" attribute
+     * @param {Boolean} asNumber true to parse the value as a number
+     * @return {String/Number}
+     */
+    getValue: function(asNumber) {
+        var val = this.dom.value;
+        return asNumber ? parseInt(val, 10) : val;
+    },
+
+    /**
+     * Removes this element's dom reference. Note that event and cache removal is handled at {@link Ext#removeNode
+     * Ext.removeNode}
+     */
+    remove: function() {
+        var me = this,
+        dom = me.dom;
+
+        if (dom) {
+            Ext.removeNode(dom);
+            delete me.dom;
+        }
+    },
+
+    /**
+     * Returns true if this element is an ancestor of the passed element
+     * @param {HTMLElement/String} el The element to check
+     * @return {Boolean} True if this element is an ancestor of el, else false
+     */
+    contains: function(el) {
+        if (!el) {
+            return false;
+        }
+
+        var me = this,
+            dom = el.dom || el;
+
+        // we need el-contains-itself logic here because isAncestor does not do that:
+        return (dom === me.dom) || Ext.dom.AbstractElement.isAncestor(me.dom, dom);
+    },
+
+    /**
+     * Returns the value of an attribute from the element's underlying DOM node.
+     * @param {String} name The attribute name
+     * @param {String} [namespace] The namespace in which to look for the attribute
+     * @return {String} The attribute value
+     */
+    getAttribute: function(name, ns) {
+        var dom = this.dom;
+        return dom.getAttributeNS(ns, name) || dom.getAttribute(ns + ":" + name) || dom.getAttribute(name) || dom[name];
+    },
+
+    /**
+     * Update the innerHTML of this element
+     * @param {String} html The new HTML
+     * @return {Ext.dom.Element} this
+     */
+    update: function(html) {
+        if (this.dom) {
+            this.dom.innerHTML = html;
+        }
+        return this;
+    },
+
+
+    /**
+    * Set the innerHTML of this element
+    * @param {String} html The new HTML
+    * @return {Ext.Element} this
+     */
+    setHTML: function(html) {
+        if(this.dom) {
+            this.dom.innerHTML = html;
+        }
+        return this;
+    },
+
+    /**
+     * Returns the innerHTML of an Element or an empty string if the element's
+     * dom no longer exists.
+     */
+    getHTML: function() {
+        return this.dom ? this.dom.innerHTML : '';
+    },
+
+    /**
+     * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
+     * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+     * @return {Ext.Element} this
+     */
+    hide: function() {
+        this.setVisible(false);
+        return this;
+    },
+
+    /**
+     * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
+     * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+     * @return {Ext.Element} this
+     */
+    show: function() {
+        this.setVisible(true);
+        return this;
+    },
+
+    /**
+     * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
+     * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
+     * @param {Boolean} visible Whether the element is visible
+     * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
+     * @return {Ext.Element} this
+     */
+    setVisible: function(visible, animate) {
+        var me = this,
+            statics = me.self,
+            mode = me.getVisibilityMode(),
+            prefix = Ext.baseCSSPrefix;
+
+        switch (mode) {
+            case statics.VISIBILITY:
+                me.removeCls([prefix + 'hidden-display', prefix + 'hidden-offsets']);
+                me[visible ? 'removeCls' : 'addCls'](prefix + 'hidden-visibility');
+            break;
+
+            case statics.DISPLAY:
+                me.removeCls([prefix + 'hidden-visibility', prefix + 'hidden-offsets']);
+                me[visible ? 'removeCls' : 'addCls'](prefix + 'hidden-display');
+            break;
+
+            case statics.OFFSETS:
+                me.removeCls([prefix + 'hidden-visibility', prefix + 'hidden-display']);
+                me[visible ? 'removeCls' : 'addCls'](prefix + 'hidden-offsets');
+            break;
+        }
+
+        return me;
+    },
+
+    getVisibilityMode: function() {
+        // Only flyweights won't have a $cache object, by calling getCache the cache
+        // will be created for future accesses. As such, we're eliminating the method
+        // call since it's mostly redundant
+        var data = (this.$cache || this.getCache()).data,
+            visMode = data.visibilityMode;
+
+        if (visMode === undefined) {
+            data.visibilityMode = visMode = this.self.DISPLAY;
+        }
+        
+        return visMode;
+    },
+
+    /**
+     * Use this to change the visibility mode between {@link #VISIBILITY}, {@link #DISPLAY}, {@link #OFFSETS} or {@link #ASCLASS}.
+     */
+    setVisibilityMode: function(mode) {
+        (this.$cache || this.getCache()).data.visibilityMode = mode;
+        return this;
+    },
+    
+    getCache: function() {
+        var me = this,
+            id = me.dom.id || Ext.id(me.dom);
+
+        // Note that we do not assign an ID to the calling object here.
+        // An Ext.dom.Element will have one assigned at construction, and an Ext.dom.AbstractElement.Fly must not have one.
+        // We assign an ID to the DOM element if it does not have one.
+        me.$cache = Ext.cache[id] || Ext.addCacheEntry(id, null, me.dom);
+            
+        return me.$cache;
+    }
+    
+}, function() {
+    var AbstractElement = this;
+
+    Ext.getDetachedBody = function () {
+        var detachedEl = AbstractElement.detachedBodyEl;
+
+        if (!detachedEl) {
+            detachedEl = document.createElement('div');
+            AbstractElement.detachedBodyEl = detachedEl = new AbstractElement.Fly(detachedEl);
+            detachedEl.isDetachedBody = true;
+        }
+
+        return detachedEl;
+    };
+
+    Ext.getElementById = function (id) {
+        var el = document.getElementById(id),
+            detachedBodyEl;
+
+        if (!el && (detachedBodyEl = AbstractElement.detachedBodyEl)) {
+            el = detachedBodyEl.dom.querySelector('#' + Ext.escapeId(id));
+        }
+
+        return el;
+    };
+
+    /**
+     * @member Ext
+     * @method get
+     * @inheritdoc Ext.dom.Element#get
+     */
+    Ext.get = function(el) {
+        return Ext.dom.Element.get(el);
+    };
+
+    this.addStatics({
+        /**
+         * @class Ext.dom.AbstractElement.Fly
+         * @extends Ext.dom.AbstractElement
+         *
+         * A non-persistent wrapper for a DOM element which may be used to execute methods of {@link Ext.dom.Element}
+         * upon a DOM element without creating an instance of {@link Ext.dom.Element}.
+         *
+         * A **singleton** instance of this class is returned when you use {@link Ext#fly}
+         *
+         * Because it is a singleton, this Flyweight does not have an ID, and must be used and discarded in a single line.
+         * You should not keep and use the reference to this singleton over multiple lines because methods that you call
+         * may themselves make use of {@link Ext#fly} and may change the DOM element to which the instance refers.
+         */
+        Fly: new Ext.Class({
+            extend: AbstractElement,
+
+            /**
+             * @property {Boolean} isFly
+             * This is `true` to identify Element flyweights
+             */
+            isFly: true,
+
+            constructor: function(dom) {
+                this.dom = dom;
+            },
+
+            /**
+             * @private
+             * Attach this fliyweight instance to the passed DOM element.
+             *
+             * Note that a flightweight does **not** have an ID, and does not acquire the ID of the DOM element.
+             */
+            attach: function (dom) {
+
+                // Attach to the passed DOM element. The same code as in Ext.Fly
+                this.dom = dom;
+                // Use cached data if there is existing cached data for the referenced DOM element,
+                // otherwise it will be created when needed by getCache.
+                this.$cache = dom.id ? Ext.cache[dom.id] : null;
+                return this;
+            }
+        }),
+
+        _flyweights: {},
+
+        /**
+         * Gets the singleton {@link Ext.dom.AbstractElement.Fly flyweight} element, with the passed node as the active element.
+         * 
+         * Because it is a singleton, this Flyweight does not have an ID, and must be used and discarded in a single line.
+         * You may not keep and use the reference to this singleton over multiple lines because methods that you call
+         * may themselves make use of {@link Ext#fly} and may change the DOM element to which the instance refers.
+         *  
+         * {@link Ext#fly} is alias for {@link Ext.dom.AbstractElement#fly}.
+         *
+         * Use this to make one-time references to DOM elements which are not going to be accessed again either by
+         * application code, or by Ext's classes. If accessing an element which will be processed regularly, then {@link
+         * Ext#get Ext.get} will be more appropriate to take advantage of the caching provided by the Ext.dom.Element
+         * class.
+         *
+         * @param {String/HTMLElement} dom The dom node or id
+         * @param {String} [named] Allows for creation of named reusable flyweights to prevent conflicts (e.g.
+         * internally Ext uses "_global")
+         * @return {Ext.dom.AbstractElement.Fly} The singleton flyweight object (or null if no matching element was found)
+         * @static
+         * @member Ext.dom.AbstractElement
+         */
+        fly: function(dom, named) {
+            var fly = null,
+                _flyweights = AbstractElement._flyweights;
+
+            named = named || '_global';
+
+            dom = Ext.getDom(dom);
+
+            if (dom) {
+                fly = _flyweights[named] || (_flyweights[named] = new AbstractElement.Fly());
+
+                // Attach to the passed DOM element.
+                // This code performs the same function as Fly.attach, but inline it for efficiency
+                fly.dom = dom;
+                // Use cached data if there is existing cached data for the referenced DOM element,
+                // otherwise it will be created when needed by getCache.
+                fly.$cache = dom.id ? Ext.cache[dom.id] : null;
+            }
+            return fly;
+        }
+    });
+
+    /**
+     * @member Ext
+     * @method fly
+     * @inheritdoc Ext.dom.AbstractElement#fly
+     */
+    Ext.fly = function() {
+        return AbstractElement.fly.apply(AbstractElement, arguments);
+    };
+
+    (function (proto) {
+        /**
+         * @method destroy
+         * @member Ext.dom.AbstractElement
+         * @inheritdoc Ext.dom.AbstractElement#remove
+         * Alias to {@link #remove}.
+         */
+        proto.destroy = proto.remove;
+
+        /**
+         * Returns a child element of this element given its `id`.
+         * @method getById
+         * @member Ext.dom.AbstractElement
+         * @param {String} id The id of the desired child element.
+         * @param {Boolean} [asDom=false] True to return the DOM element, false to return a
+         * wrapped Element object.
+         */
+        if (document.querySelector) {
+            proto.getById = function (id, asDom) {
+                // for normal elements getElementById is the best solution, but if the el is
+                // not part of the document.body, we have to resort to querySelector
+                var dom = document.getElementById(id) ||
+                    this.dom.querySelector('#'+Ext.escapeId(id));
+                return asDom ? dom : (dom ? Ext.get(dom) : null);
+            };
+        } else {
+            proto.getById = function (id, asDom) {
+                var dom = document.getElementById(id);
+                return asDom ? dom : (dom ? Ext.get(dom) : null);
+            };
+        }
+    }(this.prototype));
+});
+
+}());