/** * @class Ext.Element *Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.
*All instances of this class inherit the methods of {@link Ext.Fx} making visual effects easily available to all DOM elements.
*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.
* Usage:
* Animations// by id var el = Ext.get("my-div"); // by DOM element reference var el = Ext.get(myDivElement);
* Many of the functions for manipulating an element have an optional "animate" parameter. The animate parameter * should either be a boolean (true) or an object literal with animation options. Note that the supported Element animation * options are a subset of the {@link Ext.Fx} animation options specific to Fx effects. The Element animation options are:Option Default Description --------- -------- --------------------------------------------- duration .35 The duration of the animation in seconds easing easeOut The easing method callback none A function to execute when the anim completes scope this The scope (this) of the callback function* Also, the Anim object being used for the animation will be set on your options object as "anim", which allows you to stop or * manipulate the animation. Here's an example:* Composite (Collections of) Elementsvar el = Ext.get("my-div"); // no animation el.setWidth(100); // default animation el.setWidth(100, true); // animation with some options set el.setWidth(100, { duration: 1, callback: this.foo, scope: this }); // using the "anim" property to get the Anim object var opt = { duration: 1, callback: this.foo, scope: this }; el.setWidth(100, opt); ... if(opt.anim.isAnimated()){ opt.anim.stop(); }
* For working with collections of Elements, see {@link Ext.CompositeElement} * @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 DOC = document; Ext.Element = function(element, forceNew){ var dom = typeof element == "string" ? DOC.getElementById(element) : element, id; if(!dom) return null; id = dom.id; if(!forceNew && id && Ext.Element.cache[id]){ // element object already exists return Ext.Element.cache[id]; } /** * The DOM element * @type HTMLElement */ this.dom = dom; /** * The DOM element ID * @type String */ this.id = id || Ext.id(dom); }; var D = Ext.lib.Dom, DH = Ext.DomHelper, E = Ext.lib.Event, A = Ext.lib.Anim, El = Ext.Element; El.prototype = { /** * 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, val; for(attr in o){ val = o[attr]; if (attr != "style" && !Ext.isFunction(val)) { if (attr == "cls" ) { el.className = val; } else if (o.hasOwnProperty(attr)) { if (useSet || !!el.setAttribute) el.setAttribute(attr, val); else el[attr] = val; } } } if(o.style){ Ext.DomHelper.applyStyles(el, o.style); } return this; }, // Mouse events /** * @event click * Fires when a mouse click is detected with the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event dblclick * Fires when a mouse double click is detected with the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event mousedown * Fires when a mousedown is detected with the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event mouseup * Fires when a mouseup is detected with the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event mouseover * Fires when a mouseover is detected with the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event mousemove * Fires when a mousemove is detected with the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event mouseout * Fires when a mouseout is detected with the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event mouseenter * Fires when a mouseenter is detected with the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event mouseleave * Fires when a mouseleave is detected with the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ // Keyboard events /** * @event keypress * Fires when a keypress is detected with the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event keydown * Fires when a keydown is detected with the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event keyup * Fires when a keyup is detected with the element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ // HTML frame/object events /** * @event load * Fires when the user agent finishes loading all content within the element. Only supported by window, frames, objects and images. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event unload * Fires when the user agent removes all content from a window or frame. For elements, it fires when the target element or any of its content has been removed. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event abort * Fires when an object/image is stopped from loading before completely loaded. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event error * Fires when an object/image/frame cannot be loaded properly. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event resize * Fires when a document view is resized. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event scroll * Fires when a document view is scrolled. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ // Form events /** * @event select * Fires when a user selects some text in a text field, including input and textarea. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event change * Fires when a control loses the input focus and its value has been modified since gaining focus. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event submit * Fires when a form is submitted. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event reset * Fires when a form is reset. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event focus * Fires when an element receives focus either via the pointing device or by tab navigation. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event blur * Fires when an element loses focus either via the pointing device or by tabbing navigation. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ // User Interface events /** * @event DOMFocusIn * Where supported. Similar to HTML focus event, but can be applied to any focusable element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event. */ /** * @event DOMFocusOut * Where supported. Similar to HTML blur event, but can be applied to any focusable element. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event DOMActivate * Where supported. Fires when an element is activated, for instance, through a mouse click or a keypress. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ // DOM Mutation events /** * @event DOMSubtreeModified * Where supported. Fires when the subtree is modified. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event DOMNodeInserted * Where supported. Fires when a node has been added as a child of another node. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event DOMNodeRemoved * Where supported. Fires when a descendant node of the element is removed. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event DOMNodeRemovedFromDocument * Where supported. Fires when a node is being removed from a document. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event DOMNodeInsertedIntoDocument * Where supported. Fires when a node is being inserted into a document. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event DOMAttrModified * Where supported. Fires when an attribute has been modified. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * @event DOMCharacterDataModified * Where supported. Fires when the character data has been modified. * @param {Ext.EventObject} e The {@link Ext.EventObject} encapsulating the DOM event */ /** * The default unit to append to CSS values where a unit isn't provided (defaults to px). * @type String */ 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); }, /** * Tries to focus the element. Any exceptions are caught and ignored. * @param {Number} defer (optional) Milliseconds to defer the focus * @return {Ext.Element} this */ focus : function(defer) { var me = this; try{ if(!isNaN(defer)){ me.focus.defer(defer, me); }else{ me.dom.focus(); } }catch(e){} return me; }, /** * Tries to blur the element. Any exceptions are caught and ignored. * @return {Ext.Element} this */ blur : function() { try{ this.dom.blur(); }catch(e){} return this; }, /** * 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 type of event to handle * @param {Function} fn The handler function the event invokes. This function is passed * the following parameters:
* Combining Options
* 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:
*
* A normalized, 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.
el.on('click', this.onClick, this, {
single: true,
delay: 100,
stopEvent : true,
forumId: 4
});
*
* Attaching multiple handlers in 1 call
* The method also allows for a single argument to be passed which is a config object containing properties
* which specify multiple handlers.
* Code:
el.on({
'click' : {
fn: this.onClick,
scope: this,
delay: 100
},
'mouseover' : {
fn: this.onMouseOver,
scope: this
},
'mouseout' : {
fn: this.onMouseOut,
scope: this
}
});
*
* Or a shorthand syntax:
* Code:
el.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
scope: this
});
* @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. Example:
*
el.removeListener('click', this.handlerFn);
// or
el.un('click', this.handlerFn);
* @param {String} eventName the type of event to remove
* @param {Function} fn the method the event invokes
* @param {Object} scope (optional) The scope (The this reference) of the handler function. Defaults
* to this Element.
* @return {Ext.Element} this
*/
removeListener : function(eventName, fn, scope){
Ext.EventManager.removeListener(this.dom, eventName, fn, scope || this);
return this;
},
/**
* Removes all previous added listeners from this element
* @return {Ext.Element} this
*/
removeAllListeners : function(){
Ext.EventManager.removeAll(this.dom);
return this;
},
/**
* @private Test if size has a unit, otherwise appends the default
*/
addUnits : function(size){
if(size === "" || size == "auto" || size === undefined){
size = size || '';
} else if(!isNaN(size) || !unitPattern.test(size)){
size = size + (this.defaultUnit || 'px');
}
return size;
},
/**
* Updates the innerHTML of this Element * from a specified URL. Note that this is subject to the Same Origin Policy
*Updating innerHTML of an element will not execute embedded <script> elements. This is a browser restriction.
* @param {Mixed} options. Either a sring containing the URL from which to load the HTML, or an {@link Ext.Ajax#request} options object specifying * exactly how to request the HTML. * @return {Ext.Element} this */ load : function(url, params, cb){ Ext.Ajax.request(Ext.apply({ params: params, url: url.url || url, callback: cb, el: this, indicatorText: url.indicatorText || '' }, Ext.isObject(url) ? url : {})); return this; }, /** * Tests various css rules/browsers to determine if this element uses a border box * @return {Boolean} */ isBorderBox : function(){ return noBoxAdjust[(this.dom.tagName || "").toLowerCase()] || Ext.isBorderBox; }, /** * Removes this element from the DOM and deletes it from the cache */ remove : function(){ Ext.removeNode(this.dom); delete El.cache[this.dom.id]; }, /** * Sets up event handlers to call the passed functions when the mouse is moved into and out of the Element. * @param {Function} overFn The function to call when the mouse enters the Element. * @param {Function} outFn The function to call when the mouse leaves the Element. * @param {Object} scope (optional) The scope (this reference) in which the functions are executed. Defaults to the Element's DOM element. * @param {Object} options (optional) Options for the listener. See {@link Ext.util.Observable#addListener the options parameter}. * @return {Ext.Element} this */ hover : function(overFn, outFn, scope, options){ var me = this; me.on('mouseenter', overFn, scope || me.dom, options); me.on('mouseleave', outFn, scope || me.dom, options); return me; }, /** * 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 : Ext.lib.Dom.isAncestor(this.dom, el.dom ? el.dom : el); }, /** * Returns the value of a namespaced attribute from the element's underlying DOM node. * @param {String} namespace The namespace in which to look for the attribute * @param {String} name The attribute name * @return {String} The attribute value */ getAttributeNS : Ext.isIE ? function(ns, name){ var d = this.dom, type = typeof d[ns + ":" + name]; if(!Ext.isEmpty(type) && type != 'unknown'){ return d[ns + ":" + name]; } return d[name]; } : function(ns, name){ var d = this.dom; return d.getAttributeNS(ns, name) || d.getAttribute(ns + ":" + name) || d.getAttribute(name) || d[name]; }, update : function(html) { this.dom.innerHTML = html; } }; var ep = El.prototype; El.addMethods = function(o){ Ext.apply(ep, o); }; /** * Appends an event handler (shorthand for {@link #addListener}). * @param {String} eventName The type of event to handle * @param {Function} fn The handler function the event invokes * @param {Object} scope (optional) The scope (this element) of the handler function * @param {Object} options (optional) An object containing standard {@link #addListener} options * @member Ext.Element * @method on */ ep.on = ep.addListener; /** * Removes an event handler from this element (shorthand for {@link #removeListener}). * @param {String} eventName the type of event to remove * @param {Function} fn the method the event invokes * @return {Ext.Element} this * @member Ext.Element * @method un */ ep.un = ep.removeListener; /** * true to automatically adjust width and height settings for box-model issues (default to true) */ ep.autoBoxAdjust = true; // private var unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i, docEl; /** * @private */ El.cache = {}; /** * Retrieves Ext.Element objects. *This method does not retrieve {@link Ext.Component Component}s. This method * retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by * its ID, use {@link Ext.ComponentMgr#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 {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 ex, elm, id; if(!el){ return null; } if (typeof el == "string") { // element id if (!(elm = DOC.getElementById(el))) { return null; } if (ex = El.cache[el]) { ex.dom = elm; } else { ex = El.cache[el] = new El(elm); } return ex; } else if (el.tagName) { // dom element if(!(id = el.id)){ id = Ext.id(el); } if(ex = El.cache[id]){ ex.dom = el; }else{ ex = El.cache[id] = new El(el); } return ex; } else if (el instanceof El) { if(el != docEl){ el.dom = DOC.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid, // catch case where it hasn't been appended El.cache[el.id] = el; // in case it was created directly with Element(), let's cache it } return el; } else if(el.isComposite) { return el; } else if(Ext.isArray(el)) { return El.select(el); } else if(el == DOC) { // create a bogus element object representing the document object if(!docEl){ var f = function(){}; f.prototype = El.prototype; docEl = new f(); docEl.dom = DOC; } return docEl; } return null; }; // private // Garbage collection - uncache elements/purge listeners on orphaned elements // so we don't hold a reference and cause the browser to retain them function garbageCollect(){ if(!Ext.enableGarbageCollector){ clearInterval(El.collectorThread); } else { var eid, el, d; for(eid in El.cache){ el = El.cache[eid]; d = el.dom; // ------------------------------------------------------- // Determining what is garbage: // ------------------------------------------------------- // !d // dom node is null, definitely garbage // ------------------------------------------------------- // !d.parentNode // no parentNode == direct orphan, definitely garbage // ------------------------------------------------------- // !d.offsetParent && !document.getElementById(eid) // display none elements have no offsetParent so we will // also try to look it up by it's id. However, check // offsetParent first so we don't do unneeded lookups. // This enables collection of elements that are not orphans // directly, but somewhere up the line they have an orphan // parent. // ------------------------------------------------------- if(!d || !d.parentNode || (!d.offsetParent && !DOC.getElementById(eid))){ delete El.cache[eid]; if(d && Ext.enableListenerCollection){ Ext.EventManager.removeAll(d); } } } } } El.collectorThreadId = setInterval(garbageCollect, 30000); var flyFn = function(){}; flyFn.prototype = El.prototype; // dom is optional El.Flyweight = function(dom){ this.dom = dom; }; El.Flyweight.prototype = new flyFn(); El.Flyweight.prototype.isFlyweight = true; El._flyweights = {}; /** *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}
*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.
* @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'; if (el = Ext.getDom(el)) { (El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el; ret = El._flyweights[named]; } return ret; }; /** * Retrieves Ext.Element objects. *This method does not retrieve {@link Ext.Component Component}s. This method * retrieves Ext.Element objects which encapsulate DOM elements. To retrieve a Component by * its ID, use {@link Ext.ComponentMgr#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.
* 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; /** *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}
*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.
* @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; // speedy lookup for elements never to box adjust var noBoxAdjust = Ext.isStrict ? { select:1 } : { input:1, select:1, textarea:1 }; if(Ext.isIE || Ext.isGecko){ noBoxAdjust['button'] = 1; } Ext.EventManager.on(window, 'unload', function(){ delete El.cache; delete El._flyweights; }); })();