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