src/core/Element-more.js

   1 /*!
   2  * Ext JS Library 3.3.0
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   8  * @class Ext.Element
   9  */
  10 Ext.Element.addMethods({
  11     /**
  12      * Stops the specified event(s) from bubbling and optionally prevents the default action
  13      * @param {String/Array} eventName an event / array of events to stop from bubbling
  14      * @param {Boolean} preventDefault (optional) true to prevent the default action too
  15      * @return {Ext.Element} this
  16      */
  17     swallowEvent : function(eventName, preventDefault) {
  18         var me = this;
  19         function fn(e) {
  20             e.stopPropagation();
  21             if (preventDefault) {
  22                 e.preventDefault();
  23             }
  24         }
  25
  26         if (Ext.isArray(eventName)) {
  27             Ext.each(eventName, function(e) {
  28                  me.on(e, fn);
  29             });
  30             return me;
  31         }
  32         me.on(eventName, fn);
  33         return me;
  34     },
  35
  36     /**
  37      * Create an event handler on this element such that when the event fires and is handled by this element,
  38      * it will be relayed to another object (i.e., fired again as if it originated from that object instead).
  39      * @param {String} eventName The type of event to relay
  40      * @param {Object} object Any object that extends {@link Ext.util.Observable} that will provide the context
  41      * for firing the relayed event
  42      */
  43     relayEvent : function(eventName, observable) {
  44         this.on(eventName, function(e) {
  45             observable.fireEvent(eventName, e);
  46         });
  47     },
  48
  49     /**
  50      * Removes worthless text nodes
  51      * @param {Boolean} forceReclean (optional) By default the element
  52      * keeps track if it has been cleaned already so
  53      * you can call this over and over. However, if you update the element and
  54      * need to force a reclean, you can pass true.
  55      */
  56     clean : function(forceReclean) {
  57         var me  = this,
  58             dom = me.dom,
  59             n   = dom.firstChild,
  60             ni  = -1;
  61
  62         if (Ext.Element.data(dom, 'isCleaned') && forceReclean !== true) {
  63             return me;
  64         }
  65
  66         while (n) {
  67             var nx = n.nextSibling;
  68             if (n.nodeType == 3 && !(/\S/.test(n.nodeValue))) {
  69                 dom.removeChild(n);
  70             } else {
  71                 n.nodeIndex = ++ni;
  72             }
  73             n = nx;
  74         }
  75
  76         Ext.Element.data(dom, 'isCleaned', true);
  77         return me;
  78     },
  79
  80     /**
  81      * Direct access to the Updater {@link Ext.Updater#update} method. The method takes the same object
  82      * parameter as {@link Ext.Updater#update}
  83      * @return {Ext.Element} this
  84      */
  85     load : function() {
  86         var updateManager = this.getUpdater();
  87         updateManager.update.apply(updateManager, arguments);
  88
  89         return this;
  90     },
  91
  92     /**
  93     * Gets this element's {@link Ext.Updater Updater}
  94     * @return {Ext.Updater} The Updater
  95     */
  96     getUpdater : function() {
  97         return this.updateManager || (this.updateManager = new Ext.Updater(this));
  98     },
  99
 100     /**
 101     * Update the innerHTML of this element, optionally searching for and processing scripts
 102     * @param {String} html The new HTML
 103     * @param {Boolean} loadScripts (optional) True to look for and process scripts (defaults to false)
 104     * @param {Function} callback (optional) For async script loading you can be notified when the update completes
 105     * @return {Ext.Element} this
 106      */
 107     update : function(html, loadScripts, callback) {
 108         if (!this.dom) {
 109             return this;
 110         }
 111         html = html || "";
 112
 113         if (loadScripts !== true) {
 114             this.dom.innerHTML = html;
 115             if (typeof callback == 'function') {
 116                 callback();
 117             }
 118             return this;
 119         }
 120
 121         var id  = Ext.id(),
 122             dom = this.dom;
 123
 124         html += '<span id="' + id + '"></span>';
 125
 126         Ext.lib.Event.onAvailable(id, function() {
 127             var DOC    = document,
 128                 hd     = DOC.getElementsByTagName("head")[0],
 129                 re     = /(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig,
 130                 srcRe  = /\ssrc=([\'\"])(.*?)\1/i,
 131                 typeRe = /\stype=([\'\"])(.*?)\1/i,
 132                 match,
 133                 attrs,
 134                 srcMatch,
 135                 typeMatch,
 136                 el,
 137                 s;
 138
 139             while ((match = re.exec(html))) {
 140                 attrs = match[1];
 141                 srcMatch = attrs ? attrs.match(srcRe) : false;
 142                 if (srcMatch && srcMatch[2]) {
 143                    s = DOC.createElement("script");
 144                    s.src = srcMatch[2];
 145                    typeMatch = attrs.match(typeRe);
 146                    if (typeMatch && typeMatch[2]) {
 147                        s.type = typeMatch[2];
 148                    }
 149                    hd.appendChild(s);
 150                 } else if (match[2] && match[2].length > 0) {
 151                     if (window.execScript) {
 152                        window.execScript(match[2]);
 153                     } else {
 154                        window.eval(match[2]);
 155                     }
 156                 }
 157             }
 158
 159             el = DOC.getElementById(id);
 160             if (el) {
 161                 Ext.removeNode(el);
 162             }
 163
 164             if (typeof callback == 'function') {
 165                 callback();
 166             }
 167         });
 168         dom.innerHTML = html.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig, "");
 169         return this;
 170     },
 171
 172     // inherit docs, overridden so we can add removeAnchor
 173     removeAllListeners : function() {
 174         this.removeAnchor();
 175         Ext.EventManager.removeAll(this.dom);
 176         return this;
 177     },
 178
 179     /**
 180      * Creates a proxy element of this element
 181      * @param {String/Object} config The class name of the proxy element or a DomHelper config object
 182      * @param {String/HTMLElement} renderTo (optional) The element or element id to render the proxy to (defaults to document.body)
 183      * @param {Boolean} matchBox (optional) True to align and size the proxy to this element now (defaults to false)
 184      * @return {Ext.Element} The new proxy element
 185      */
 186     createProxy : function(config, renderTo, matchBox) {
 187         config = (typeof config == 'object') ? config : {tag : "div", cls: config};
 188
 189         var me = this,
 190             proxy = renderTo ? Ext.DomHelper.append(renderTo, config, true) :
 191                                Ext.DomHelper.insertBefore(me.dom, config, true);
 192
 193         if (matchBox && me.setBox && me.getBox) { // check to make sure Element.position.js is loaded
 194            proxy.setBox(me.getBox());
 195         }
 196         return proxy;
 197     }
 198 });
 199
 200 Ext.Element.prototype.getUpdateManager = Ext.Element.prototype.getUpdater;