Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Element.static-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="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
7   <script type="text/javascript" src="../resources/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-Element'>/**
19 </span> * @class Ext.Element
20  */
21 (function(){
22     var doc = document,
23         activeElement = null,
24         isCSS1 = doc.compatMode == &quot;CSS1Compat&quot;,
25         ELEMENT = Ext.Element,
26         fly = function(el){
27             if (!_fly) {
28                 _fly = new Ext.Element.Flyweight();
29             }
30             _fly.dom = el;
31             return _fly;
32         }, _fly;
33
34     // If the browser does not support document.activeElement we need some assistance.
35     // This covers old Safari 3.2 (4.0 added activeElement along with just about all
36     // other browsers). We need this support to handle issues with old Safari.
37     if (!('activeElement' in doc) &amp;&amp; doc.addEventListener) {
38         doc.addEventListener('focus',
39             function (ev) {
40                 if (ev &amp;&amp; ev.target) {
41                     activeElement = (ev.target == doc) ? null : ev.target;
42                 }
43             }, true);
44     }
45
46     /*
47      * Helper function to create the function that will restore the selection.
48      */
49     function makeSelectionRestoreFn (activeEl, start, end) {
50         return function () {
51             activeEl.selectionStart = start;
52             activeEl.selectionEnd = end;
53         };
54     }
55
56     Ext.apply(ELEMENT, {
57         isAncestor : function(p, c) {
58             var ret = false;
59
60             p = Ext.getDom(p);
61             c = Ext.getDom(c);
62             if (p &amp;&amp; c) {
63                 if (p.contains) {
64                     return p.contains(c);
65                 } else if (p.compareDocumentPosition) {
66                     return !!(p.compareDocumentPosition(c) &amp; 16);
67                 } else {
68                     while ((c = c.parentNode)) {
69                         ret = c == p || ret;
70                     }
71                 }
72             }
73             return ret;
74         },
75
76 <span id='Ext-Element-method-getActiveElement'>        /**
77 </span>         * Returns the active element in the DOM. If the browser supports activeElement
78          * on the document, this is returned. If not, the focus is tracked and the active
79          * element is maintained internally.
80          * @return {HTMLElement} The active (focused) element in the document.
81          */
82         getActiveElement: function () {
83             return doc.activeElement || activeElement;
84         },
85
86 <span id='Ext-Element-method-getRightMarginFixCleaner'>        /**
87 </span>         * Creates a function to call to clean up problems with the work-around for the
88          * WebKit RightMargin bug. The work-around is to add &quot;display: 'inline-block'&quot; to
89          * the element before calling getComputedStyle and then to restore its original
90          * display value. The problem with this is that it corrupts the selection of an
91          * INPUT or TEXTAREA element (as in the &quot;I-beam&quot; goes away but ths focus remains).
92          * To cleanup after this, we need to capture the selection of any such element and
93          * then restore it after we have restored the display style.
94          *
95          * @param target {Element} The top-most element being adjusted.
96          * @private
97          */
98         getRightMarginFixCleaner: function (target) {
99             var supports = Ext.supports,
100                 hasInputBug = supports.DisplayChangeInputSelectionBug,
101                 hasTextAreaBug = supports.DisplayChangeTextAreaSelectionBug;
102
103             if (hasInputBug || hasTextAreaBug) {
104                 var activeEl = doc.activeElement || activeElement, // save a call
105                     tag = activeEl &amp;&amp; activeEl.tagName,
106                     start,
107                     end;
108
109                 if ((hasTextAreaBug &amp;&amp; tag == 'TEXTAREA') ||
110                     (hasInputBug &amp;&amp; tag == 'INPUT' &amp;&amp; activeEl.type == 'text')) {
111                     if (ELEMENT.isAncestor(target, activeEl)) {
112                         start = activeEl.selectionStart;
113                         end = activeEl.selectionEnd;
114
115                         if (Ext.isNumber(start) &amp;&amp; Ext.isNumber(end)) { // to be safe...
116                             // We don't create the raw closure here inline because that
117                             // will be costly even if we don't want to return it (nested
118                             // function decls and exprs are often instantiated on entry
119                             // regardless of whether execution ever reaches them):
120                             return makeSelectionRestoreFn(activeEl, start, end);
121                         }
122                     }
123                 }
124             }
125
126             return Ext.emptyFn; // avoid special cases, just return a nop
127         },
128
129         getViewWidth : function(full) {
130             return full ? ELEMENT.getDocumentWidth() : ELEMENT.getViewportWidth();
131         },
132
133         getViewHeight : function(full) {
134             return full ? ELEMENT.getDocumentHeight() : ELEMENT.getViewportHeight();
135         },
136
137         getDocumentHeight: function() {
138             return Math.max(!isCSS1 ? doc.body.scrollHeight : doc.documentElement.scrollHeight, ELEMENT.getViewportHeight());
139         },
140
141         getDocumentWidth: function() {
142             return Math.max(!isCSS1 ? doc.body.scrollWidth : doc.documentElement.scrollWidth, ELEMENT.getViewportWidth());
143         },
144
145         getViewportHeight: function(){
146             return Ext.isIE ?
147                    (Ext.isStrict ? doc.documentElement.clientHeight : doc.body.clientHeight) :
148                    self.innerHeight;
149         },
150
151         getViewportWidth : function() {
152             return (!Ext.isStrict &amp;&amp; !Ext.isOpera) ? doc.body.clientWidth :
153                    Ext.isIE ? doc.documentElement.clientWidth : self.innerWidth;
154         },
155
156         getY : function(el) {
157             return ELEMENT.getXY(el)[1];
158         },
159
160         getX : function(el) {
161             return ELEMENT.getXY(el)[0];
162         },
163
164         getOffsetParent: function (el) {
165             el = Ext.getDom(el);
166             try {
167                 // accessing offsetParent can throw &quot;Unspecified Error&quot; in IE6-8 (not 9)
168                 return el.offsetParent;
169             } catch (e) {
170                 var body = document.body; // safe bet, unless...
171                 return (el == body) ? null : body;
172             }
173         },
174
175         getXY : function(el) {
176             var p,
177                 pe,
178                 b,
179                 bt,
180                 bl,
181                 dbd,
182                 x = 0,
183                 y = 0,
184                 scroll,
185                 hasAbsolute,
186                 bd = (doc.body || doc.documentElement),
187                 ret;
188
189             el = Ext.getDom(el);
190
191             if(el != bd){
192                 hasAbsolute = fly(el).isStyle(&quot;position&quot;, &quot;absolute&quot;);
193
194                 if (el.getBoundingClientRect) {
195                     try {
196                         b = el.getBoundingClientRect();
197                         scroll = fly(document).getScroll();
198                         ret = [ Math.round(b.left + scroll.left), Math.round(b.top + scroll.top) ];
199                     } catch (e) {
200                         // IE6-8 can also throw from getBoundingClientRect...
201                     }
202                 }
203
204                 if (!ret) {
205                     for (p = el; p; p = ELEMENT.getOffsetParent(p)) {
206                         pe = fly(p);
207                         x += p.offsetLeft;
208                         y += p.offsetTop;
209
210                         hasAbsolute = hasAbsolute || pe.isStyle(&quot;position&quot;, &quot;absolute&quot;);
211
212                         if (Ext.isGecko) {
213                             y += bt = parseInt(pe.getStyle(&quot;borderTopWidth&quot;), 10) || 0;
214                             x += bl = parseInt(pe.getStyle(&quot;borderLeftWidth&quot;), 10) || 0;
215
216                             if (p != el &amp;&amp; !pe.isStyle('overflow','visible')) {
217                                 x += bl;
218                                 y += bt;
219                             }
220                         }
221                     }
222
223                     if (Ext.isSafari &amp;&amp; hasAbsolute) {
224                         x -= bd.offsetLeft;
225                         y -= bd.offsetTop;
226                     }
227
228                     if (Ext.isGecko &amp;&amp; !hasAbsolute) {
229                         dbd = fly(bd);
230                         x += parseInt(dbd.getStyle(&quot;borderLeftWidth&quot;), 10) || 0;
231                         y += parseInt(dbd.getStyle(&quot;borderTopWidth&quot;), 10) || 0;
232                     }
233
234                     p = el.parentNode;
235                     while (p &amp;&amp; p != bd) {
236                         if (!Ext.isOpera || (p.tagName != 'TR' &amp;&amp; !fly(p).isStyle(&quot;display&quot;, &quot;inline&quot;))) {
237                             x -= p.scrollLeft;
238                             y -= p.scrollTop;
239                         }
240                         p = p.parentNode;
241                     }
242                     ret = [x,y];
243                 }
244             }
245             return ret || [0,0];
246         },
247
248         setXY : function(el, xy) {
249             (el = Ext.fly(el, '_setXY')).position();
250
251             var pts = el.translatePoints(xy),
252                 style = el.dom.style,
253                 pos;
254
255             for (pos in pts) {
256                 if (!isNaN(pts[pos])) {
257                     style[pos] = pts[pos] + &quot;px&quot;;
258                 }
259             }
260         },
261
262         setX : function(el, x) {
263             ELEMENT.setXY(el, [x, false]);
264         },
265
266         setY : function(el, y) {
267             ELEMENT.setXY(el, [false, y]);
268         },
269
270 <span id='Ext-Element-method-serializeForm'>        /**
271 </span>         * Serializes a DOM form into a url encoded string
272          * @param {Object} form The form
273          * @return {String} The url encoded form
274          */
275         serializeForm: function(form) {
276             var fElements = form.elements || (document.forms[form] || Ext.getDom(form)).elements,
277                 hasSubmit = false,
278                 encoder = encodeURIComponent,
279                 name,
280                 data = '',
281                 type,
282                 hasValue;
283
284             Ext.each(fElements, function(element){
285                 name = element.name;
286                 type = element.type;
287
288                 if (!element.disabled &amp;&amp; name) {
289                     if (/select-(one|multiple)/i.test(type)) {
290                         Ext.each(element.options, function(opt){
291                             if (opt.selected) {
292                                 hasValue = opt.hasAttribute ? opt.hasAttribute('value') : opt.getAttributeNode('value').specified;
293                                 data += Ext.String.format(&quot;{0}={1}&amp;&quot;, encoder(name), encoder(hasValue ? opt.value : opt.text));
294                             }
295                         });
296                     } else if (!(/file|undefined|reset|button/i.test(type))) {
297                         if (!(/radio|checkbox/i.test(type) &amp;&amp; !element.checked) &amp;&amp; !(type == 'submit' &amp;&amp; hasSubmit)) {
298                             data += encoder(name) + '=' + encoder(element.value) + '&amp;';
299                             hasSubmit = /submit/i.test(type);
300                         }
301                     }
302                 }
303             });
304             return data.substr(0, data.length - 1);
305         }
306     });
307 })();
308 </pre>
309 </body>
310 </html>