X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6e39d509471fe9b4e2660e0d1631b350d0c66f40..3789b528d8dd8aad4558e38e22d775bcab1cbd36:/docs/source/Element-more.html diff --git a/docs/source/Element-more.html b/docs/source/Element-more.html index ee057194..38ea7bba 100644 --- a/docs/source/Element-more.html +++ b/docs/source/Element-more.html @@ -1,30 +1,75 @@ - -
- -/** - * @class Ext.Element + + + + +The source code + + + + + + +/** + * @class Ext.core.Element */ -Ext.Element.addMethods({ - /** - * Stops the specified event(s) from bubbling and optionally prevents the default action + +Ext.core.Element.addMethods({ + + /** + * Monitors this Element for the mouse leaving. Calls the function after the specified delay only if + * the mouse was not moved back into the Element within the delay. If the mouse <i>was</i> moved + * back in, the function is not called. + * @param {Number} delay The delay <b>in milliseconds</b> to wait for possible mouse re-entry before calling the handler function. + * @param {Function} handler The function to call if the mouse remains outside of this Element for the specified time. + * @param {Object} scope The scope (<code>this</code> reference) in which the handler function executes. Defaults to this Element. + * @return {Object} The listeners object which was added to this element so that monitoring can be stopped. Example usage:</pre><code> +// Hide the menu if the mouse moves out for 250ms or more +this.mouseLeaveMonitor = this.menuEl.monitorMouseLeave(250, this.hideMenu, this); + +... +// Remove mouseleave monitor on menu destroy +this.menuEl.un(this.mouseLeaveMonitor); +</code></pre> + */ + monitorMouseLeave: function(delay, handler, scope) { + var me = this, + timer, + listeners = { + mouseleave: function(e) { + timer = setTimeout(Ext.Function.bind(handler, scope||me, [e]), delay); + }, + mouseenter: function() { + clearTimeout(timer); + }, + freezeEvent: true + }; + + me.on(listeners); + return listeners; + }, + + /** + * Stops the specified event(s) from bubbling and optionally prevents the default action * @param {String/Array} eventName an event / array of events to stop from bubbling * @param {Boolean} preventDefault (optional) true to prevent the default action too - * @return {Ext.Element} this + * @return {Ext.core.Element} this */ - swallowEvent : function(eventName, preventDefault){ + swallowEvent : function(eventName, preventDefault) { var me = this; - function fn(e){ + function fn(e) { e.stopPropagation(); - if(preventDefault){ + if (preventDefault) { e.preventDefault(); } } - if(Ext.isArray(eventName)){ + + if (Ext.isArray(eventName)) { Ext.each(eventName, function(e) { me.on(e, fn); }); @@ -34,100 +79,128 @@ Ext.Element.addMethods({ return me; }, - /** - * Create an event handler on this element such that when the event fires and is handled by this element, + /** + * Create an event handler on this element such that when the event fires and is handled by this element, * it will be relayed to another object (i.e., fired again as if it originated from that object instead). * @param {String} eventName The type of event to relay * @param {Object} object Any object that extends {@link Ext.util.Observable} that will provide the context * for firing the relayed event */ - relayEvent : function(eventName, observable){ - this.on(eventName, function(e){ + relayEvent : function(eventName, observable) { + this.on(eventName, function(e) { observable.fireEvent(eventName, e); }); }, - /** - * Removes worthless text nodes + /** + * Removes Empty, or whitespace filled text nodes. Combines adjacent text nodes. * @param {Boolean} forceReclean (optional) By default the element * keeps track if it has been cleaned already so * you can call this over and over. However, if you update the element and * need to force a reclean, you can pass true. */ - clean : function(forceReclean){ - var me = this, + clean : function(forceReclean) { + var me = this, dom = me.dom, - n = dom.firstChild, - ni = -1; + n = dom.firstChild, + nx, + ni = -1; - if(Ext.Element.data(dom, 'isCleaned') && forceReclean !== true){ + if (Ext.core.Element.data(dom, 'isCleaned') && forceReclean !== true) { return me; } - while(n){ - var nx = n.nextSibling; - if(n.nodeType == 3 && !/\S/.test(n.nodeValue)){ - dom.removeChild(n); - }else{ + while (n) { + nx = n.nextSibling; + if (n.nodeType == 3) { + // Remove empty/whitespace text nodes + if (!(/\S/.test(n.nodeValue))) { + dom.removeChild(n); + // Combine adjacent text nodes + } else if (nx && nx.nodeType == 3) { + n.appendData(Ext.String.trim(nx.data)); + dom.removeChild(nx); + nx = n.nextSibling; + n.nodeIndex = ++ni; + } + } else { + // Recursively clean + Ext.fly(n).clean(); n.nodeIndex = ++ni; } n = nx; } - Ext.Element.data(dom, 'isCleaned', true); + + Ext.core.Element.data(dom, 'isCleaned', true); return me; }, - /** - * Direct access to the Updater {@link Ext.Updater#update} method. The method takes the same object - * parameter as {@link Ext.Updater#update} - * @return {Ext.Element} this + /** + * Direct access to the Ext.ElementLoader {@link Ext.ElementLoader#load} method. The method takes the same object + * parameter as {@link Ext.ElementLoader#load} + * @return {Ext.core.Element} this */ - load : function(){ - var um = this.getUpdater(); - um.update.apply(um, arguments); + load : function(options) { + this.getLoader().load(options); return this; }, - /** - * Gets this element's {@link Ext.Updater Updater} - * @return {Ext.Updater} The Updater + /** + * Gets this element's {@link Ext.ElementLoader ElementLoader} + * @return {Ext.ElementLoader} The loader */ - getUpdater : function(){ - return this.updateManager || (this.updateManager = new Ext.Updater(this)); + getLoader : function() { + var dom = this.dom, + data = Ext.core.Element.data, + loader = data(dom, 'loader'); + + if (!loader) { + loader = Ext.create('Ext.ElementLoader', { + target: this + }); + data(dom, 'loader', loader); + } + return loader; }, - /** - * Update the innerHTML of this element, optionally searching for and processing scripts + /** + * Update the innerHTML of this element, optionally searching for and processing scripts * @param {String} html The new HTML * @param {Boolean} loadScripts (optional) True to look for and process scripts (defaults to false) * @param {Function} callback (optional) For async script loading you can be notified when the update completes - * @return {Ext.Element} this + * @return {Ext.core.Element} this */ - update : function(html, loadScripts, callback){ - if (!this.dom) { - return this; + update : function(html, loadScripts, callback) { + var me = this, + id, + dom, + interval; + + if (!me.dom) { + return me; } - html = html || ""; + html = html || ''; + dom = me.dom; - if(loadScripts !== true){ - this.dom.innerHTML = html; - if(Ext.isFunction(callback)){ - callback(); - } - return this; + if (loadScripts !== true) { + dom.innerHTML = html; + Ext.callback(callback, me); + return me; } - var id = Ext.id(), - dom = this.dom; + id = Ext.id(); + html += '<span id="' + id + '"></span>'; - html += ''; - - Ext.lib.Event.onAvailable(id, function(){ - var DOC = document, - hd = DOC.getElementsByTagName("head")[0], - re = /(?: