Upgrade to ExtJS 3.1.1 - Released 02/08/2010
[extjs.git] / docs / source / Element.style-more.html
index 180f2e0..d4c30a6 100644 (file)
@@ -15,7 +15,7 @@ Ext.Element.boxMarkup = '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}
 \r
 Ext.Element.addMethods(function(){\r
     var INTERNAL = "_internal",\r
-        pxMatch = /(\d+)px/;\r
+        pxMatch = /(\d+\.?\d+)px/;\r
     return {\r
         <div id="method-Ext.Element-applyStyles"></div>/**\r
          * More flexible version of {@link #setStyle} for setting style properties.\r
@@ -46,28 +46,6 @@ Ext.Element.addMethods(function(){
             return ret;\r
         },\r
 \r
-        // deprecated\r
-        getStyleSize : function(){\r
-            var me = this,\r
-                w,\r
-                h,\r
-                d = this.dom,\r
-                s = d.style;\r
-            if(s.width && s.width != 'auto'){\r
-                w = parseInt(s.width, 10);\r
-                if(me.isBorderBox()){\r
-                   w -= me.getFrameWidth('lr');\r
-                }\r
-            }\r
-            if(s.height && s.height != 'auto'){\r
-                h = parseInt(s.height, 10);\r
-                if(me.isBorderBox()){\r
-                   h -= me.getFrameWidth('tb');\r
-                }\r
-            }\r
-            return {width: w || me.getWidth(true), height: h || me.getHeight(true)};\r
-        },\r
-\r
         // private  ==> used by ext full\r
         setOverflow : function(v){\r
             var dom = this.dom;\r
@@ -155,7 +133,7 @@ Ext.Element.addMethods(function(){
             var me = this,\r
                 h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);\r
             if(!h){\r
-                h = parseInt(me.getStyle('height'), 10) || 0;\r
+                h = parseFloat(me.getStyle('height')) || 0;\r
                 if(!me.isBorderBox()){\r
                     h += me.getFrameWidth('tb');\r
                 }\r
@@ -172,7 +150,7 @@ Ext.Element.addMethods(function(){
         getComputedWidth : function(){\r
             var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);\r
             if(!w){\r
-                w = parseInt(this.getStyle('width'), 10) || 0;\r
+                w = parseFloat(this.getStyle('width')) || 0;\r
                 if(!this.isBorderBox()){\r
                     w += this.getFrameWidth('lr');\r
                 }\r
@@ -253,70 +231,77 @@ Ext.Element.addMethods(function(){
             height: vpSize.height * 0.95\r
         });\r
         // To handle window resizing you would have to hook onto onWindowResize.\r
-        </code></pre>\r
-         * @param {Boolean} contentBox True to return the W3 content box <i>within</i> the padding area of the element. False\r
-         * or omitted to return the full area of the element within the border. See <a href="http://www.w3.org/TR/CSS2/box.html">http://www.w3.org/TR/CSS2/box.html</a>\r
-         * @return {Object} An object containing the elements's area: <code>{width: &lt;element width>, height: &lt;element height>}</code>\r
-         */\r
-        getViewSize : function(contentBox){\r
+        * </code></pre>\r
+        *\r
+        * getViewSize utilizes clientHeight/clientWidth which excludes sizing of scrollbars.\r
+        * To obtain the size including scrollbars, use getStyleSize\r
+        *\r
+        * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.\r
+        */\r
+\r
+        getViewSize : function(){\r
             var doc = document,\r
-                me = this,\r
-                d = me.dom,\r
-                extdom = Ext.lib.Dom,\r
-                isDoc = (d == doc || d == doc.body),\r
-                isBB, w, h, tbBorder = 0, lrBorder = 0,\r
-                tbPadding = 0, lrPadding = 0;\r
-            if (isDoc) {\r
-                return { width: extdom.getViewWidth(), height: extdom.getViewHeight() };\r
-            }\r
-            isBB = me.isBorderBox();\r
-            tbBorder = me.getBorderWidth('tb');\r
-            lrBorder = me.getBorderWidth('lr');\r
-            tbPadding = me.getPadding('tb');\r
-            lrPadding = me.getPadding('lr');\r
+                d = this.dom,\r
+                isDoc = (d == doc || d == doc.body);\r
 \r
-            // Width calcs\r
-            // Try the style first, then clientWidth, then offsetWidth\r
-            if (w = me.getStyle('width').match(pxMatch)){\r
-                if ((w = parseInt(w[1], 10)) && isBB){\r
-                    // Style includes the padding and border if isBB\r
-                    w -= (lrBorder + lrPadding);\r
-                }\r
-                if (!contentBox){\r
-                    w += lrPadding;\r
+            // If the body, use Ext.lib.Dom\r
+            if (isDoc) {\r
+                var extdom = Ext.lib.Dom;\r
+                return {\r
+                    width : extdom.getViewWidth(),\r
+                    height : extdom.getViewHeight()\r
                 }\r
+\r
+            // Else use clientHeight/clientWidth\r
             } else {\r
-                if (!(w = d.clientWidth) && (w = d.offsetWidth)){\r
-                    w -= lrBorder;\r
-                }\r
-                if (w && contentBox){\r
-                    w -= lrPadding;\r
+                return {\r
+                    width : d.clientWidth,\r
+                    height : d.clientHeight\r
                 }\r
             }\r
+        },\r
 \r
-            // Height calcs\r
-            // Try the style first, then clientHeight, then offsetHeight\r
-            if (h = me.getStyle('height').match(pxMatch)){\r
-                if ((h = parseInt(h[1], 10)) && isBB){\r
-                    // Style includes the padding and border if isBB\r
-                    h -= (tbBorder + tbPadding);\r
-                }\r
-                if (!contentBox){\r
-                    h += tbPadding;\r
+        <div id="method-Ext.Element-getStyleSize"></div>/**\r
+        * <p>Returns the dimensions of the element available to lay content out in.<p>\r
+        *\r
+        * getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and offsetWidth/clientWidth.\r
+        * To obtain the size excluding scrollbars, use getViewSize\r
+        *\r
+        * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.\r
+        */\r
+\r
+        getStyleSize : function(){\r
+            var me = this,\r
+                w, h,\r
+                doc = document,\r
+                d = this.dom,\r
+                isDoc = (d == doc || d == doc.body),\r
+                s = d.style;\r
+\r
+            // If the body, use Ext.lib.Dom\r
+            if (isDoc) {\r
+                var extdom = Ext.lib.Dom;\r
+                return {\r
+                    width : extdom.getViewWidth(),\r
+                    height : extdom.getViewHeight()\r
                 }\r
-            } else {\r
-                if (!(h = d.clientHeight) && (h = d.offsetHeight)){\r
-                    h -= tbBorder;\r
+            }\r
+            // Use Styles if they are set\r
+            if(s.width && s.width != 'auto'){\r
+                w = parseFloat(s.width);\r
+                if(me.isBorderBox()){\r
+                   w -= me.getFrameWidth('lr');\r
                 }\r
-                if (h && contentBox){\r
-                    h -= tbPadding;\r
+            }\r
+            // Use Styles if they are set\r
+            if(s.height && s.height != 'auto'){\r
+                h = parseFloat(s.height);\r
+                if(me.isBorderBox()){\r
+                   h -= me.getFrameWidth('tb');\r
                 }\r
             }\r
-\r
-            return {\r
-                width : w,\r
-                height : h\r
-            };\r
+            // Use getWidth/getHeight if style not set.\r
+            return {width: w || me.getWidth(true), height: h || me.getHeight(true)};\r
         },\r
 \r
         <div id="method-Ext.Element-getSize"></div>/**\r
@@ -366,7 +351,7 @@ Ext.Element.addMethods(function(){
 \r
             if (!side) {\r
                 for (key in me.margins){\r
-                    o[hash[key]] = parseInt(me.getStyle(me.margins[key]), 10) || 0;\r
+                    o[hash[key]] = parseFloat(me.getStyle(me.margins[key])) || 0;\r
                 }\r
                 return o;\r
             } else {\r