docs/source/Element-more.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-core-Element'>/**
  19 </span> * @class Ext.core.Element
  20  */
  21
  22 Ext.core.Element.addMethods({
  23
  24 <span id='Ext-core-Element-method-monitorMouseLeave'>    /**
  25 </span>     * Monitors this Element for the mouse leaving. Calls the function after the specified delay only if
  26      * the mouse was not moved back into the Element within the delay. If the mouse &lt;i&gt;was&lt;/i&gt; moved
  27      * back in, the function is not called.
  28      * @param {Number} delay The delay &lt;b&gt;in milliseconds&lt;/b&gt; to wait for possible mouse re-entry before calling the handler function.
  29      * @param {Function} handler The function to call if the mouse remains outside of this Element for the specified time.
  30      * @param {Object} scope The scope (&lt;code&gt;this&lt;/code&gt; reference) in which the handler function executes. Defaults to this Element.
  31      * @return {Object} The listeners object which was added to this element so that monitoring can be stopped. Example usage:&lt;/pre&gt;&lt;code&gt;
  32 // Hide the menu if the mouse moves out for 250ms or more
  33 this.mouseLeaveMonitor = this.menuEl.monitorMouseLeave(250, this.hideMenu, this);
  34
  35 ...
  36 // Remove mouseleave monitor on menu destroy
  37 this.menuEl.un(this.mouseLeaveMonitor);
  38 &lt;/code&gt;&lt;/pre&gt;
  39      */
  40     monitorMouseLeave: function(delay, handler, scope) {
  41         var me = this,
  42             timer,
  43             listeners = {
  44                 mouseleave: function(e) {
  45                     timer = setTimeout(Ext.Function.bind(handler, scope||me, [e]), delay);
  46                 },
  47                 mouseenter: function() {
  48                     clearTimeout(timer);
  49                 },
  50                 freezeEvent: true
  51             };
  52
  53         me.on(listeners);
  54         return listeners;
  55     },
  56
  57 <span id='Ext-core-Element-method-swallowEvent'>    /**
  58 </span>     * Stops the specified event(s) from bubbling and optionally prevents the default action
  59      * @param {String/Array} eventName an event / array of events to stop from bubbling
  60      * @param {Boolean} preventDefault (optional) true to prevent the default action too
  61      * @return {Ext.core.Element} this
  62      */
  63     swallowEvent : function(eventName, preventDefault) {
  64         var me = this;
  65         function fn(e) {
  66             e.stopPropagation();
  67             if (preventDefault) {
  68                 e.preventDefault();
  69             }
  70         }
  71
  72         if (Ext.isArray(eventName)) {
  73             Ext.each(eventName, function(e) {
  74                  me.on(e, fn);
  75             });
  76             return me;
  77         }
  78         me.on(eventName, fn);
  79         return me;
  80     },
  81
  82 <span id='Ext-core-Element-method-relayEvent'>    /**
  83 </span>     * Create an event handler on this element such that when the event fires and is handled by this element,
  84      * it will be relayed to another object (i.e., fired again as if it originated from that object instead).
  85      * @param {String} eventName The type of event to relay
  86      * @param {Object} object Any object that extends {@link Ext.util.Observable} that will provide the context
  87      * for firing the relayed event
  88      */
  89     relayEvent : function(eventName, observable) {
  90         this.on(eventName, function(e) {
  91             observable.fireEvent(eventName, e);
  92         });
  93     },
  94
  95 <span id='Ext-core-Element-method-clean'>    /**
  96 </span>     * Removes Empty, or whitespace filled text nodes. Combines adjacent text nodes.
  97      * @param {Boolean} forceReclean (optional) By default the element
  98      * keeps track if it has been cleaned already so
  99      * you can call this over and over. However, if you update the element and
 100      * need to force a reclean, you can pass true.
 101      */
 102     clean : function(forceReclean) {
 103         var me  = this,
 104             dom = me.dom,
 105             n   = dom.firstChild,
 106             nx,
 107             ni  = -1;
 108
 109         if (Ext.core.Element.data(dom, 'isCleaned') &amp;&amp; forceReclean !== true) {
 110             return me;
 111         }
 112
 113         while (n) {
 114             nx = n.nextSibling;
 115             if (n.nodeType == 3) {
 116                 // Remove empty/whitespace text nodes
 117                 if (!(/\S/.test(n.nodeValue))) {
 118                     dom.removeChild(n);
 119                 // Combine adjacent text nodes
 120                 } else if (nx &amp;&amp; nx.nodeType == 3) {
 121                     n.appendData(Ext.String.trim(nx.data));
 122                     dom.removeChild(nx);
 123                     nx = n.nextSibling;
 124                     n.nodeIndex = ++ni;
 125                 }
 126             } else {
 127                 // Recursively clean
 128                 Ext.fly(n).clean();
 129                 n.nodeIndex = ++ni;
 130             }
 131             n = nx;
 132         }
 133
 134         Ext.core.Element.data(dom, 'isCleaned', true);
 135         return me;
 136     },
 137
 138 <span id='Ext-core-Element-method-load'>    /**
 139 </span>     * Direct access to the Ext.ElementLoader {@link Ext.ElementLoader#load} method. The method takes the same object
 140      * parameter as {@link Ext.ElementLoader#load}
 141      * @return {Ext.core.Element} this
 142      */
 143     load : function(options) {
 144         this.getLoader().load(options);
 145         return this;
 146     },
 147
 148 <span id='Ext-core-Element-method-getLoader'>    /**
 149 </span>    * Gets this element's {@link Ext.ElementLoader ElementLoader}
 150     * @return {Ext.ElementLoader} The loader
 151     */
 152     getLoader : function() {
 153         var dom = this.dom,
 154             data = Ext.core.Element.data,
 155             loader = data(dom, 'loader');
 156
 157         if (!loader) {
 158             loader = Ext.create('Ext.ElementLoader', {
 159                 target: this
 160             });
 161             data(dom, 'loader', loader);
 162         }
 163         return loader;
 164     },
 165
 166 <span id='Ext-core-Element-method-update'>    /**
 167 </span>    * Update the innerHTML of this element, optionally searching for and processing scripts
 168     * @param {String} html The new HTML
 169     * @param {Boolean} loadScripts (optional) True to look for and process scripts (defaults to false)
 170     * @param {Function} callback (optional) For async script loading you can be notified when the update completes
 171     * @return {Ext.core.Element} this
 172      */
 173     update : function(html, loadScripts, callback) {
 174         var me = this,
 175             id,
 176             dom,
 177             interval;
 178
 179         if (!me.dom) {
 180             return me;
 181         }
 182         html = html || '';
 183         dom = me.dom;
 184
 185         if (loadScripts !== true) {
 186             dom.innerHTML = html;
 187             Ext.callback(callback, me);
 188             return me;
 189         }
 190
 191         id  = Ext.id();
 192         html += '&lt;span id=&quot;' + id + '&quot;&gt;&lt;/span&gt;';
 193
 194         interval = setInterval(function(){
 195             if (!document.getElementById(id)) {
 196                 return false;
 197             }
 198             clearInterval(interval);
 199             var DOC    = document,
 200                 hd     = DOC.getElementsByTagName(&quot;head&quot;)[0],
 201                 re     = /(?:&lt;script([^&gt;]*)?&gt;)((\n|\r|.)*?)(?:&lt;\/script&gt;)/ig,
 202                 srcRe  = /\ssrc=([\'\&quot;])(.*?)\1/i,
 203                 typeRe = /\stype=([\'\&quot;])(.*?)\1/i,
 204                 match,
 205                 attrs,
 206                 srcMatch,
 207                 typeMatch,
 208                 el,
 209                 s;
 210
 211             while ((match = re.exec(html))) {
 212                 attrs = match[1];
 213                 srcMatch = attrs ? attrs.match(srcRe) : false;
 214                 if (srcMatch &amp;&amp; srcMatch[2]) {
 215                    s = DOC.createElement(&quot;script&quot;);
 216                    s.src = srcMatch[2];
 217                    typeMatch = attrs.match(typeRe);
 218                    if (typeMatch &amp;&amp; typeMatch[2]) {
 219                        s.type = typeMatch[2];
 220                    }
 221                    hd.appendChild(s);
 222                 } else if (match[2] &amp;&amp; match[2].length &gt; 0) {
 223                     if (window.execScript) {
 224                        window.execScript(match[2]);
 225                     } else {
 226                        window.eval(match[2]);
 227                     }
 228                 }
 229             }
 230
 231             el = DOC.getElementById(id);
 232             if (el) {
 233                 Ext.removeNode(el);
 234             }
 235             Ext.callback(callback, me);
 236         }, 20);
 237         dom.innerHTML = html.replace(/(?:&lt;script.*?&gt;)((\n|\r|.)*?)(?:&lt;\/script&gt;)/ig, '');
 238         return me;
 239     },
 240
 241     // inherit docs, overridden so we can add removeAnchor
 242     removeAllListeners : function() {
 243         this.removeAnchor();
 244         Ext.EventManager.removeAll(this.dom);
 245         return this;
 246     },
 247
 248 <span id='Ext-core-Element-method-createProxy'>    /**
 249 </span>     * Creates a proxy element of this element
 250      * @param {String/Object} config The class name of the proxy element or a DomHelper config object
 251      * @param {String/HTMLElement} renderTo (optional) The element or element id to render the proxy to (defaults to document.body)
 252      * @param {Boolean} matchBox (optional) True to align and size the proxy to this element now (defaults to false)
 253      * @return {Ext.core.Element} The new proxy element
 254      */
 255     createProxy : function(config, renderTo, matchBox) {
 256         config = (typeof config == 'object') ? config : {tag : &quot;div&quot;, cls: config};
 257
 258         var me = this,
 259             proxy = renderTo ? Ext.core.DomHelper.append(renderTo, config, true) :
 260                                Ext.core.DomHelper.insertBefore(me.dom, config, true);
 261
 262         proxy.setVisibilityMode(Ext.core.Element.DISPLAY);
 263         proxy.hide();
 264         if (matchBox &amp;&amp; me.setBox &amp;&amp; me.getBox) { // check to make sure Element.position.js is loaded
 265            proxy.setBox(me.getBox());
 266         }
 267         return proxy;
 268     }
 269 });
 270 Ext.core.Element.prototype.clearListeners = Ext.core.Element.prototype.removeAllListeners;
 271 </pre>
 272 </body>
 273 </html>