/** * @class Ext.Element * <p>Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.</p> * <p>All instances of this class inherit the methods of {@link Ext.Fx} making visual effects easily available to all DOM elements.</p> * <p>Note that the events documented in this class are not Ext events, they encapsulate browser events. To * access the underlying browser event, see {@link Ext.EventObject#browserEvent}. Some older * browsers may not support the full range of events. Which events are supported is beyond the control of ExtJs.</p> * Usage:<br> <pre><code> // by id var el = Ext.get("my-div"); // by DOM element reference var el = Ext.get(myDivElement); </code></pre> * <b>Animations</b><br /> * <p>When an element is manipulated, by default there is no animation.</p> * <pre><code> var el = Ext.get("my-div"); // no animation el.setWidth(100); * </code></pre> * <p>Many of the functions for manipulating an element have an optional "animate" parameter. This * parameter can be specified as boolean (<tt>true</tt>) for default animation effects.</p> * <pre><code> // default animation el.setWidth(100, true); * </code></pre> * * <p>To configure the effects, an object literal with animation options to use as the Element animation * configuration object can also be specified. Note that the supported Element animation configuration * options are a subset of the {@link Ext.Fx} animation options specific to Fx effects. The supported * Element animation configuration options are:</p> <pre> Option Default Description --------- -------- --------------------------------------------- {@link Ext.Fx#duration duration} .35 The duration of the animation in seconds {@link Ext.Fx#easing easing} easeOut The easing method {@link Ext.Fx#callback callback} none A function to execute when the anim completes {@link Ext.Fx#scope scope} this The scope (this) of the callback function </pre> * * <pre><code> // Element animation options object var opt = { {@link Ext.Fx#duration duration}: 1, {@link Ext.Fx#easing easing}: 'elasticIn', {@link Ext.Fx#callback callback}: this.foo, {@link Ext.Fx#scope scope}: this }; // animation with some options set el.setWidth(100, opt); * </code></pre> * <p>The Element animation object being used for the animation will be set on the options * object as "anim", which allows you to stop or manipulate the animation. Here is an example:</p> * <pre><code> // using the "anim" property to get the Anim object if(opt.anim.isAnimated()){ opt.anim.stop(); } * </code></pre> * <p>Also see the <tt>{@link #animate}</tt> method for another animation technique.</p> * <p><b> Composite (Collections of) Elements</b></p> * <p>For working with collections of Elements, see {@link Ext.CompositeElement}</p> * @constructor Create a new Element directly. * @param {String/HTMLElement} element * @param {Boolean} forceNew (optional) By default the constructor checks to see if there is already an instance of this element in the cache and if there is it returns the same instance. This will skip that check (useful for extending this class). */ (function() { var El = Ext.Element = Ext.extend(Object, { /** * The default unit to append to CSS values where a unit isn't provided (defaults to px). * @type String */ defaultUnit : "px", constructor : function(element, forceNew) { var dom = typeof element == 'string' ? document.getElementById(element) : element, id; if (!dom) { return null; } id = dom.id; if (!forceNew && id && Ext.cache[id]) { return Ext.cache[id].el; } /** * The DOM element * @type HTMLElement */ this.dom = dom; /** * The DOM element ID * @type String */ this.id = id || Ext.id(dom); return this; }, /** * 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 (optional) false to override the default setAttribute to use expandos. * @return {Ext.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) { el.setAttribute(attr, value); } else { el[attr] = value; } } } return this; }, /** * 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; }, /** * Appends an event handler to this element. The shorthand version {@link #on} is equivalent. * @param {String} eventName The name of event to handle. * @param {Function} fn The handler function the event invokes. This function is passed * the following parameters:<ul> * <li><b>evt</b> : EventObject<div class="sub-desc">The {@link Ext.EventObject EventObject} describing the event.</div></li> * <li><b>el</b> : HtmlElement<div class="sub-desc">The DOM element which was the target of the event. * Note that this may be filtered by using the <tt>delegate</tt> option.</div></li> * <li><b>o</b> : Object<div class="sub-desc">The options object from the addListener call.</div></li> * </ul> * @param {Object} scope (optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed. * <b>If omitted, defaults to this Element.</b>. * @param {Object} options (optional) An object containing handler configuration properties. * This may contain any of the following properties:<ul> * <li><b>scope</b> Object : <div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed. * <b>If omitted, defaults to this Element.</b></div></li> * <li><b>delegate</b> String: <div class="sub-desc">A simple selector to filter the target or look for a descendant of the target. See below for additional details.</div></li> * <li><b>stopEvent</b> Boolean: <div class="sub-desc">True to stop the event. That is stop propagation, and prevent the default action.</div></li> * <li><b>preventDefault</b> Boolean: <div class="sub-desc">True to prevent the default action</div></li> * <li><b>stopPropagation</b> Boolean: <div class="sub-desc">True to prevent event propagation</div></li> * <li><b>normalized</b> Boolean: <div class="sub-desc">False to pass a browser event to the handler function instead of an Ext.EventObject</div></li> * <li><b>target</b> Ext.Element: <div class="sub-desc">Only call the handler if the event was fired on the target Element, <i>not</i> if the event was bubbled up from a child node.</div></li> * <li><b>delay</b> Number: <div class="sub-desc">The number of milliseconds to delay the invocation of the handler after the event fires.</div></li> * <li><b>single</b> Boolean: <div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li> * <li><b>buffer</b> Number: <div class="sub-desc">Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed * by the specified number of milliseconds. If the event fires again within that time, the original * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li> * </ul><br> * <p> * <b>Combining Options</b><br> * In the following examples, the shorthand form {@link #on} is used rather than the more verbose * addListener. The two are equivalent. Using the options argument, it is possible to combine different * types of listeners:<br> * <br> * A delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the * options object. The options object is available as the third parameter in the handler function.<div style="margin: 5px 20px 20px;"> * Code:<pre><code> el.on('tap', this.onTap, this, { single: true, delay: 100, stopEvent : true });</code></pre></p> * <p> * <b>Attaching multiple handlers in 1 call</b><br> * The method also allows for a single argument to be passed which is a config object containing properties * which specify multiple handlers.</p> * <p> * Code:<pre><code> el.on({ 'tap' : { fn: this.onTap, scope: this }, 'doubletap' : { fn: this.onDoubleTap, scope: this }, 'swipe' : { fn: this.onSwipe, scope: this } });</code></pre> * <p> * Or a shorthand syntax:<br> * Code:<pre><code></p> el.on({ 'tap' : this.onTap, 'doubletap' : this.onDoubleTap, 'swipe' : this.onSwipe, scope: this }); * </code></pre></p> * <p><b>delegate</b></p> * <p>This is a configuration option that you can pass along when registering a handler for * an event to assist with event delegation. Event delegation is a technique that is used to * reduce memory consumption and prevent exposure to memory-leaks. By registering an event * for a container element as opposed to each element within a container. By setting this * configuration option to a simple selector, the target element will be filtered to look for * a descendant of the target. * For example:<pre><code> // using this markup: <div id='elId'> <p id='p1'>paragraph one</p> <p id='p2' class='clickable'>paragraph two</p> <p id='p3'>paragraph three</p> </div> // utilize event delegation to registering just one handler on the container element: el = Ext.get('elId'); el.on( 'tap', function(e,t) { // handle click console.info(t.id); // 'p2' }, this, { // filter the target element to be a descendant with the class 'tappable' delegate: '.tappable' } ); * </code></pre></p> * @return {Ext.Element} this */ addListener : function(eventName, fn, scope, options){ Ext.EventManager.on(this.dom, eventName, fn, scope || this, options); return this; }, /** * Removes an event handler from this element. The shorthand version {@link #un} is equivalent. * <b>Note</b>: if a <i>scope</i> was explicitly specified when {@link #addListener adding} the * listener, the same scope must be specified here. * Example: * <pre><code> el.removeListener('tap', this.handlerFn); // or el.un('tap', this.handlerFn); </code></pre> * @param {String} eventName The name of the event from which to remove the handler. * @param {Function} fn The handler function to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b> * @param {Object} scope If a scope (<b><code>this</code></b> reference) was specified when the listener was added, * then this must refer to the same object. * @return {Ext.Element} this */ removeListener : function(eventName, fn, scope) { Ext.EventManager.un(this.dom, eventName, fn, scope); return this; }, /** * Removes all previous added listeners from this element * @return {Ext.Element} this */ removeAllListeners : function(){ Ext.EventManager.removeAll(this.dom); return this; }, /** * Recursively removes all previous added listeners from this element and its children * @return {Ext.Element} this */ purgeAllListeners : function() { Ext.EventManager.purgeElement(this, true); return this; }, /** * <p>Removes this element's dom reference. Note that event and cache removal is handled at {@link Ext#removeNode}</p> */ remove : function() { var me = this, dom = me.dom; if (dom) { delete me.dom; Ext.removeNode(dom); } }, isAncestor : function(c) { var p = this.dom; c = Ext.getDom(c); if (p && c) { return p.contains(c); } return false; }, /** * Determines if this element is a descendent of the passed in Element. * @param {Mixed} element An Ext.Element, HTMLElement or string linking to an id of an Element. * @returns {Boolean} */ isDescendent : function(p) { return Ext.fly(p, '_internal').isAncestor(this); }, /** * 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) { return !el ? false : this.isAncestor(el); }, /** * Returns the value of an attribute from the element's underlying DOM node. * @param {String} name The attribute name * @param {String} namespace (optional) The namespace in which to look for the attribute * @return {String} The attribute value */ getAttribute : function(name, ns) { var d = this.dom; return d.getAttributeNS(ns, name) || d.getAttribute(ns + ":" + name) || d.getAttribute(name) || d[name]; }, /** * 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, dom = me.dom, mode = this.getVisibilityMode(); switch (mode) { case El.VISIBILITY: this.removeCls(['x-hidden-display', 'x-hidden-offsets']); this[visible ? 'removeCls' : 'addCls']('x-hidden-visibility'); break; case El.DISPLAY: this.removeCls(['x-hidden-visibility', 'x-hidden-offsets']); this[visible ? 'removeCls' : 'addCls']('x-hidden-display'); break; case El.OFFSETS: this.removeCls(['x-hidden-visibility', 'x-hidden-display']); this[visible ? 'removeCls' : 'addCls']('x-hidden-offsets'); break; } return me; }, getVisibilityMode: function() { var dom = this.dom, mode = El.data(dom, 'visibilityMode'); if (mode === undefined) { El.data(dom, 'visibilityMode', mode = El.DISPLAY); } return mode; }, setVisibilityMode : function(mode) { El.data(this.dom, 'visibilityMode', mode); return this; } }); var Elp = El.prototype; /** * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element * @static * @type Number */ El.VISIBILITY = 1; /** * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element * @static * @type Number */ El.DISPLAY = 2; /** * Visibility mode constant for use with {@link #setVisibilityMode}. Use offsets to hide element * @static * @type Number */ El.OFFSETS = 3; El.addMethods = function(o){ Ext.apply(Elp, o); }; Elp.on = Elp.addListener; Elp.un = Elp.removeListener; // Alias for people used to Ext JS and Ext Core Elp.update = Elp.setHTML; /** * Retrieves Ext.Element objects. * <p><b>This method does not retrieve {@link Ext.Component Component}s.</b> This method * retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by * its ID, use {@link Ext.ComponentMgr#get}.</p> * <p>Uses simple caching to consistently return the same object. Automatically fixes if an * object was recreated with the same id via AJAX or DOM.</p> * @param {Mixed} el The id of the node, a DOM Node or an existing Element. * @return {Element} The Element object (or null if no matching element was found) * @static * @member Ext.Element * @method get */ El.get = function(el){ var extEl, dom, id; if(!el){ return null; } if (typeof el == "string") { // element id if (!(dom = document.getElementById(el))) { return null; } if (Ext.cache[el] && Ext.cache[el].el) { extEl = Ext.cache[el].el; extEl.dom = dom; } else { extEl = El.addToCache(new El(dom)); } return extEl; } else if (el.tagName) { // dom element if(!(id = el.id)){ id = Ext.id(el); } if (Ext.cache[id] && Ext.cache[id].el) { extEl = Ext.cache[id].el; extEl.dom = el; } else { extEl = El.addToCache(new El(el)); } return extEl; } else if (el instanceof El) { if(el != El.docEl){ // 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 El.select(el); } else if(el == document) { // create a bogus element object representing the document object if(!El.docEl){ var F = function(){}; F.prototype = Elp; El.docEl = new F(); El.docEl.dom = document; El.docEl.id = Ext.id(document); } return El.docEl; } return null; }; // private El.addToCache = function(el, id){ id = id || el.id; Ext.cache[id] = { el: el, data: {}, events: {} }; return el; }; // private method for getting and setting element data El.data = function(el, key, value) { el = El.get(el); if (!el) { return null; } var c = Ext.cache[el.id].data; if (arguments.length == 2) { return c[key]; } else { return (c[key] = value); } }; // private // Garbage collection - uncache elements/purge listeners on orphaned elements // so we don't hold a reference and cause the browser to retain them El.garbageCollect = function() { if (!Ext.enableGarbageCollector) { clearInterval(El.collectorThreadId); } else { var id, dom, EC = Ext.cache; for (id in EC) { if (!EC.hasOwnProperty(id)) { continue; } if(EC[id].skipGarbageCollection){ continue; } dom = EC[id].el.dom; if(!dom || !dom.parentNode || (!dom.offsetParent && !document.getElementById(id))){ if(Ext.enableListenerCollection){ Ext.EventManager.removeAll(dom); } delete EC[id]; } } } }; //El.collectorThreadId = setInterval(El.garbageCollect, 20000); // dom is optional El.Flyweight = function(dom) { this.dom = dom; }; var F = function(){}; F.prototype = Elp; El.Flyweight.prototype = new F; El.Flyweight.prototype.isFlyweight = true; El._flyweights = {}; /** * <p>Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element - * the dom node can be overwritten by other code. Shorthand of {@link Ext.Element#fly}</p> * <p>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} * will be more appropriate to take advantage of the caching provided by the Ext.Element class.</p> * @param {String/HTMLElement} el The dom node or id * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts * (e.g. internally Ext uses "_global") * @return {Element} The shared Element object (or null if no matching element was found) * @member Ext.Element * @method fly */ El.fly = function(el, named) { var ret = null; named = named || '_global'; el = Ext.getDom(el); if (el) { (El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el; ret = El._flyweights[named]; } return ret; }; /** * Retrieves Ext.Element objects. * <p><b>This method does not retrieve {@link Ext.Component Component}s.</b> This method * retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by * its ID, use {@link Ext.ComponentMgr#get}.</p> * <p>Uses simple caching to consistently return the same object. Automatically fixes if an * object was recreated with the same id via AJAX or DOM.</p> * Shorthand of {@link Ext.Element#get} * @param {Mixed} el The id of the node, a DOM Node or an existing Element. * @return {Element} The Element object (or null if no matching element was found) * @member Ext * @method get */ Ext.get = El.get; /** * <p>Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element - * the dom node can be overwritten by other code. Shorthand of {@link Ext.Element#fly}</p> * <p>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} * will be more appropriate to take advantage of the caching provided by the Ext.Element class.</p> * @param {String/HTMLElement} el The dom node or id * @param {String} named (optional) Allows for creation of named reusable flyweights to prevent conflicts * (e.g. internally Ext uses "_global") * @return {Element} The shared Element object (or null if no matching element was found) * @member Ext * @method fly */ Ext.fly = El.fly; /*Ext.EventManager.on(window, 'unload', function(){ delete Ext.cache; delete El._flyweights; });*/ })();