Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Element.static.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 Ext.applyIf(Ext.Element, {
22     unitRe: /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i,
23     camelRe: /(-[a-z])/gi,
24     opacityRe: /alpha\(opacity=(.*)\)/i,
25     cssRe: /([a-z0-9-]+)\s*:\s*([^;\s]+(?:\s*[^;\s]+)*);?/gi,
26     propertyCache: {},
27     defaultUnit : &quot;px&quot;,
28     borders: {l: 'border-left-width', r: 'border-right-width', t: 'border-top-width', b: 'border-bottom-width'},
29     paddings: {l: 'padding-left', r: 'padding-right', t: 'padding-top', b: 'padding-bottom'},
30     margins: {l: 'margin-left', r: 'margin-right', t: 'margin-top', b: 'margin-bottom'},
31
32     // Reference the prototype's version of the method. Signatures are identical.
33     addUnits : Ext.Element.prototype.addUnits,
34
35 <span id='Ext-Element-static-method-parseBox'>    /**
36 </span>     * Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
37      * (e.g. 10, &quot;10&quot;, &quot;10 10&quot;, &quot;10 10 10&quot; and &quot;10 10 10 10&quot; are all valid options and would return the same result)
38      * @static
39      * @param {Number/String} box The encoded margins
40      * @return {Object} An object with margin sizes for top, right, bottom and left
41      */
42     parseBox : function(box) {
43         if (Ext.isObject(box)) {
44             return {
45                 top: box.top || 0,
46                 right: box.right || 0,
47                 bottom: box.bottom || 0,
48                 left: box.left || 0
49             };
50         } else {
51             if (typeof box != 'string') {
52                 box = box.toString();
53             }
54             var parts  = box.split(' '),
55                 ln = parts.length;
56     
57             if (ln == 1) {
58                 parts[1] = parts[2] = parts[3] = parts[0];
59             }
60             else if (ln == 2) {
61                 parts[2] = parts[0];
62                 parts[3] = parts[1];
63             }
64             else if (ln == 3) {
65                 parts[3] = parts[1];
66             }
67     
68             return {
69                 top   :parseFloat(parts[0]) || 0,
70                 right :parseFloat(parts[1]) || 0,
71                 bottom:parseFloat(parts[2]) || 0,
72                 left  :parseFloat(parts[3]) || 0
73             };
74         }
75         
76     },
77     
78 <span id='Ext-Element-static-method-unitizeBox'>    /**
79 </span>     * Parses a number or string representing margin sizes into an object. Supports CSS-style margin declarations
80      * (e.g. 10, &quot;10&quot;, &quot;10 10&quot;, &quot;10 10 10&quot; and &quot;10 10 10 10&quot; are all valid options and would return the same result)
81      * @static
82      * @param {Number/String} box The encoded margins
83      * @param {String} units The type of units to add
84      * @return {String} An string with unitized (px if units is not specified) metrics for top, right, bottom and left
85      */
86     unitizeBox : function(box, units) {
87         var A = this.addUnits,
88             B = this.parseBox(box);
89             
90         return A(B.top, units) + ' ' +
91                A(B.right, units) + ' ' +
92                A(B.bottom, units) + ' ' +
93                A(B.left, units);
94         
95     },
96
97     // private
98     camelReplaceFn : function(m, a) {
99         return a.charAt(1).toUpperCase();
100     },
101
102 <span id='Ext-Element-static-method-normalize'>    /**
103 </span>     * Normalizes CSS property keys from dash delimited to camel case JavaScript Syntax.
104      * For example:
105      * &lt;ul&gt;
106      *  &lt;li&gt;border-width -&gt; borderWidth&lt;/li&gt;
107      *  &lt;li&gt;padding-top -&gt; paddingTop&lt;/li&gt;
108      * &lt;/ul&gt;
109      * @static
110      * @param {String} prop The property to normalize
111      * @return {String} The normalized string
112      */
113     normalize : function(prop) {
114         if (prop == 'float') {
115             prop = Ext.supports.Float ? 'cssFloat' : 'styleFloat';
116         }
117         return this.propertyCache[prop] || (this.propertyCache[prop] = prop.replace(this.camelRe, this.camelReplaceFn));
118     },
119
120 <span id='Ext-Element-static-method-getDocumentHeight'>    /**
121 </span>     * Retrieves the document height
122      * @static
123      * @return {Number} documentHeight
124      */
125     getDocumentHeight: function() {
126         return Math.max(!Ext.isStrict ? document.body.scrollHeight : document.documentElement.scrollHeight, this.getViewportHeight());
127     },
128
129 <span id='Ext-Element-static-method-getDocumentWidth'>    /**
130 </span>     * Retrieves the document width
131      * @static
132      * @return {Number} documentWidth
133      */
134     getDocumentWidth: function() {
135         return Math.max(!Ext.isStrict ? document.body.scrollWidth : document.documentElement.scrollWidth, this.getViewportWidth());
136     },
137
138 <span id='Ext-Element-static-method-getViewportHeight'>    /**
139 </span>     * Retrieves the viewport height of the window.
140      * @static
141      * @return {Number} viewportHeight
142      */
143     getViewportHeight: function(){
144         return window.innerHeight;
145     },
146
147 <span id='Ext-Element-static-method-getViewportWidth'>    /**
148 </span>     * Retrieves the viewport width of the window.
149      * @static
150      * @return {Number} viewportWidth
151      */
152     getViewportWidth : function() {
153         return window.innerWidth;
154     },
155
156 <span id='Ext-Element-static-method-getViewSize'>    /**
157 </span>     * Retrieves the viewport size of the window.
158      * @static
159      * @return {Object} object containing width and height properties
160      */
161     getViewSize : function() {
162         return {
163             width: window.innerWidth,
164             height: window.innerHeight
165         };
166     },
167
168 <span id='Ext-Element-static-method-getOrientation'>    /**
169 </span>     * Retrieves the current orientation of the window. This is calculated by
170      * determing if the height is greater than the width.
171      * @static
172      * @return {String} Orientation of window: 'portrait' or 'landscape'
173      */
174     getOrientation : function() {
175         if (Ext.supports.OrientationChange) {
176             return (window.orientation == 0) ? 'portrait' : 'landscape';
177         }
178         
179         return (window.innerHeight &gt; window.innerWidth) ? 'portrait' : 'landscape';
180     },
181
182 <span id='Ext-Element-static-method-fromPoint'>    /** 
183 </span>     * Returns the top Element that is located at the passed coordinates
184      * @static
185      * @param {Number} x The x coordinate
186      * @param {Number} y The y coordinate
187      * @return {String} The found Element
188      */
189     fromPoint: function(x, y) {
190         return Ext.get(document.elementFromPoint(x, y));
191     },
192     
193 <span id='Ext-Element-static-method-parseStyles'>    /**
194 </span>     * Converts a CSS string into an object with a property for each style.
195      * &lt;p&gt;
196      * The sample code below would return an object with 2 properties, one
197      * for background-color and one for color.&lt;/p&gt;
198      * &lt;pre&gt;&lt;code&gt;
199 var css = 'background-color: red;color: blue; ';
200 console.log(Ext.Element.parseStyles(css));
201      * &lt;/code&gt;&lt;/pre&gt;
202      * @static
203      * @param {String} styles A CSS string
204      * @return {Object} styles
205      */
206     parseStyles: function(styles){
207         var out = {},
208             cssRe = this.cssRe,
209             matches;
210             
211         if (styles) {
212             // Since we're using the g flag on the regex, we need to set the lastIndex.
213             // This automatically happens on some implementations, but not others, see:
214             // http://stackoverflow.com/questions/2645273/javascript-regular-expression-literal-persists-between-function-calls
215             // http://blog.stevenlevithan.com/archives/fixing-javascript-regexp
216             cssRe.lastIndex = 0;
217             while ((matches = cssRe.exec(styles))) {
218                 out[matches[1]] = matches[2];
219             }
220         }
221         return out;
222     }
223 });
224 </pre>
225 </body>
226 </html>