| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711 | <!DOCTYPE html><html><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>The source code</title>  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>  <style type="text/css">    .highlight { display: block; background-color: #ddd; }  </style>  <script type="text/javascript">    function highlight() {      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";    }  </script></head><body onload="prettyPrint(); highlight();">  <pre class="prettyprint lang-js"><span id='Ext-dom-AbstractElement'>/**</span> * @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: {<span id='Ext-dom-AbstractElement-static-method-get'>        /**</span>         * 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,                cacheItem,                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);                }                                cacheItem = 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 (cacheItem && cacheItem.skipGarbageCollection) {                    extEl = cacheItem.el;                    return extEl;                }                                if (!(dom = document.getElementById(el))) {                    return null;                }                if (cacheItem && cacheItem.el) {                    extEl = Ext.updateCacheEntry(cacheItem, dom).el;                } else {                    // Force new element if there's a cache but no el attached                    extEl = new El(dom, !!cacheItem);                }                return extEl;            } else if (el.tagName) { // dom element                if (!(id = el.id)) {                    id = Ext.id(el);                }                cacheItem = Ext.cache[id];                if (cacheItem && cacheItem.el) {                    extEl = Ext.updateCacheEntry(cacheItem, el).el;                } else {                    // Force new element if there's a cache but no el attached                    extEl = new El(el, !!cacheItem);                }                return extEl;            } else if (el instanceof me) {                if (el != me.docEl && el != me.winEl) {                    id = el.id;                    // refresh dom element in case no longer valid,                    // catch case where it hasn't been appended                    cacheItem = Ext.cache[id];                    if (cacheItem) {                        Ext.updateCacheEntry(cacheItem, document.getElementById(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);        },<span id='Ext-dom-AbstractElement-static-method-mergeClsList'>        /**</span>         * <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 duplicatemyElement.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;        },<span id='Ext-dom-AbstractElement-static-method-removeCls'>        /**</span>         * <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;        },<span id='Ext-dom-AbstractElement-static-property-VISIBILITY'>        /**</span>         * @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 Ext.dom.Element#isVisible 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,<span id='Ext-dom-AbstractElement-static-property-DISPLAY'>        /**</span>         * @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,<span id='Ext-dom-AbstractElement-static-property-OFFSETS'>        /**</span>         * @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,<span id='Ext-dom-AbstractElement-static-property-ASCLASS'>        /**</span>         * @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;        }<span id='Ext-dom-AbstractElement-property-dom'>        /**</span>         * @property {HTMLElement} dom         * The DOM element         */        me.dom = dom;<span id='Ext-dom-AbstractElement-property-id'>        /**</span>         * @property {String} id         * The DOM element ID         */        me.id = id || Ext.id(dom);        me.self.addToCache(me);    },<span id='Ext-dom-AbstractElement-method-set'>    /**</span>     * 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;     },<span id='Ext-dom-AbstractElement-property-defaultUnit'>    /**</span>     * @property {String} defaultUnit     * The default unit to append to CSS values where a unit isn't provided.     */    defaultUnit: "px",<span id='Ext-dom-AbstractElement-method-is'>    /**</span>     * 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);    },<span id='Ext-dom-AbstractElement-method-getValue'>    /**</span>     * 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;    },<span id='Ext-dom-AbstractElement-method-remove'>    /**</span>     * 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;        }    },<span id='Ext-dom-AbstractElement-method-contains'>    /**</span>     * 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);    },<span id='Ext-dom-AbstractElement-method-getAttribute'>    /**</span>     * 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];    },<span id='Ext-dom-AbstractElement-method-update'>    /**</span>     * 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;    },<span id='Ext-dom-AbstractElement-method-setHTML'>    /**</span>    * 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;    },<span id='Ext-dom-AbstractElement-method-getHTML'>    /**</span>     * 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 : '';    },<span id='Ext-dom-AbstractElement-method-hide'>    /**</span>     * 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;    },<span id='Ext-dom-AbstractElement-method-show'>    /**</span>     * 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;    },<span id='Ext-dom-AbstractElement-method-setVisible'>    /**</span>     * 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;    },<span id='Ext-dom-AbstractElement-method-setVisibilityMode'>    /**</span>     * 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;<span id='Ext-method-getDetachedBody'>    /**</span>     * @private     * @member Ext     */    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;    };<span id='Ext-method-getElementById'>    /**</span>     * @private     * @member Ext     */    Ext.getElementById = function (id) {        var el = document.getElementById(id),            detachedBodyEl;        if (!el && (detachedBodyEl = AbstractElement.detachedBodyEl)) {            el = detachedBodyEl.dom.querySelector('#' + Ext.escapeId(id));        }        return el;    };<span id='Ext-method-get'>    /**</span>     * @member Ext     * @method get     * @inheritdoc Ext.dom.Element#get     */    Ext.get = function(el) {        return Ext.dom.Element.get(el);    };    this.addStatics({<span id='Ext-dom-AbstractElement-Fly'>        /**</span>         * @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,<span id='Ext-dom-AbstractElement-Fly-property-isFly'>            /**</span>             * @property {Boolean} isFly             * This is `true` to identify Element flyweights             */            isFly: true,            constructor: function(dom) {                this.dom = dom;            },<span id='Ext-dom-AbstractElement-Fly-method-attach'>            /**</span>             * @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: {},<span id='Ext-dom-AbstractElement-static-method-fly'>        /**</span>         * 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;        }    });<span id='Ext-method-fly'>    /**</span>     * @member Ext     * @method fly     * @inheritdoc Ext.dom.AbstractElement#fly     */    Ext.fly = function() {        return AbstractElement.fly.apply(AbstractElement, arguments);    };    (function (proto) {<span id='Ext-dom-AbstractElement-method-destroy'>        /**</span>         * @method destroy         * @member Ext.dom.AbstractElement         * @inheritdoc Ext.dom.AbstractElement#remove         * Alias to {@link #remove}.         */        proto.destroy = proto.remove;<span id='Ext-dom-AbstractElement-method-getById'>        /**</span>         * 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));});}());</pre></body></html>
 |