git.ithinksw.org / extjs.git / blobdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | inline | side by side
Upgrade to ExtJS 3.1.1 - Released 02/08/2010
[extjs.git] / docs / source / Element.style-more.html
diff --git a/docs/source/Element.style-more.html b/docs/source/Element.style-more.html
index 0c57393..d4c30a6 100644 (file)
--- a/docs/source/Element.style-more.html
+++ b/docs/source/Element.style-more.html
@@ -1,17 +1,12 @@
-<html>
-<head>
-  <title>The source code</title>
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
-</head>
-<body  onload="prettyPrint();">
-    <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-/**\r
+<html>\r
+<head>\r
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
+  <title>The source code</title>\r
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body  onload="prettyPrint();">\r
+    <pre class="prettyprint lang-js">/**\r
  * @class Ext.Element\r
  */\r
 \r
  * @class Ext.Element\r
  */\r
 \r
@@ -19,103 +14,83 @@
 Ext.Element.boxMarkup = '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div><div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div><div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';\r
 \r
 Ext.Element.addMethods(function(){\r
 Ext.Element.boxMarkup = '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div><div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div><div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';\r
 \r
 Ext.Element.addMethods(function(){\r
-       var INTERNAL = "_internal";\r
-       return {\r
-           <div id="method-Ext.Element-applyStyles"></div>/**\r
-            * More flexible version of {@link #setStyle} for setting style properties.\r
-            * @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or\r
-            * a function which returns such a specification.\r
-            * @return {Ext.Element} this\r
-            */\r
-           applyStyles : function(style){\r
-               Ext.DomHelper.applyStyles(this.dom, style);\r
-               return this;\r
-           },\r
-\r
-               <div id="method-Ext.Element-getStyles"></div>/**\r
-            * Returns an object with properties matching the styles requested.\r
-            * For example, el.getStyles('color', 'font-size', 'width') might return\r
-            * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.\r
-            * @param {String} style1 A style name\r
-            * @param {String} style2 A style name\r
-            * @param {String} etc.\r
-            * @return {Object} The style object\r
-            */\r
-           getStyles : function(){\r
-                   var ret = {};\r
-                   Ext.each(arguments, function(v) {\r
-                          ret[v] = this.getStyle(v);\r
-                   },\r
-                   this);\r
-                   return ret;\r
-           },\r
+    var INTERNAL = "_internal",\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
+         * @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or\r
+         * a function which returns such a specification.\r
+         * @return {Ext.Element} this\r
+         */\r
+        applyStyles : function(style){\r
+            Ext.DomHelper.applyStyles(this.dom, style);\r
+            return this;\r
+        },\r
 \r
 \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
+        <div id="method-Ext.Element-getStyles"></div>/**\r
+         * Returns an object with properties matching the styles requested.\r
+         * For example, el.getStyles('color', 'font-size', 'width') might return\r
+         * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.\r
+         * @param {String} style1 A style name\r
+         * @param {String} style2 A style name\r
+         * @param {String} etc.\r
+         * @return {Object} The style object\r
+         */\r
+        getStyles : function(){\r
+            var ret = {};\r
+            Ext.each(arguments, function(v) {\r
+               ret[v] = this.getStyle(v);\r
+            },\r
+            this);\r
+            return ret;\r
+        },\r
 \r
 \r
-           // private  ==> used by ext full\r
-               setOverflow : function(v){\r
-                       var dom = this.dom;\r
-               if(v=='auto' && Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug\r
-                       dom.style.overflow = 'hidden';\r
-                       (function(){dom.style.overflow = 'auto';}).defer(1);\r
-               }else{\r
-                       dom.style.overflow = v;\r
-               }\r
-               },\r
+        // private  ==> used by ext full\r
+        setOverflow : function(v){\r
+            var dom = this.dom;\r
+            if(v=='auto' && Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug\r
+                dom.style.overflow = 'hidden';\r
+                (function(){dom.style.overflow = 'auto';}).defer(1);\r
+            }else{\r
+                dom.style.overflow = v;\r
+            }\r
+        },\r
 \r
 \r
-          <div id="method-Ext.Element-boxWrap"></div>/**\r
-               * <p>Wraps the specified element with a special 9 element markup/CSS block that renders by default as\r
-               * a gray container with a gradient background, rounded corners and a 4-way shadow.</p>\r
-               * <p>This special markup is used throughout Ext when box wrapping elements ({@link Ext.Button},\r
-               * {@link Ext.Panel} when <tt>{@link Ext.Panel#frame frame=true}</tt>, {@link Ext.Window}).  The markup\r
-               * is of this form:</p>\r
-               * <pre><code>\r
-Ext.Element.boxMarkup =\r
+       <div id="method-Ext.Element-boxWrap"></div>/**\r
+        * <p>Wraps the specified element with a special 9 element markup/CSS block that renders by default as\r
+        * a gray container with a gradient background, rounded corners and a 4-way shadow.</p>\r
+        * <p>This special markup is used throughout Ext when box wrapping elements ({@link Ext.Button},\r
+        * {@link Ext.Panel} when <tt>{@link Ext.Panel#frame frame=true}</tt>, {@link Ext.Window}).  The markup\r
+        * is of this form:</p>\r
+        * <pre><code>\r
+    Ext.Element.boxMarkup =\r
     &#39;&lt;div class="{0}-tl">&lt;div class="{0}-tr">&lt;div class="{0}-tc">&lt;/div>&lt;/div>&lt;/div>\r
      &lt;div class="{0}-ml">&lt;div class="{0}-mr">&lt;div class="{0}-mc">&lt;/div>&lt;/div>&lt;/div>\r
      &lt;div class="{0}-bl">&lt;div class="{0}-br">&lt;div class="{0}-bc">&lt;/div>&lt;/div>&lt;/div>&#39;;\r
     &#39;&lt;div class="{0}-tl">&lt;div class="{0}-tr">&lt;div class="{0}-tc">&lt;/div>&lt;/div>&lt;/div>\r
      &lt;div class="{0}-ml">&lt;div class="{0}-mr">&lt;div class="{0}-mc">&lt;/div>&lt;/div>&lt;/div>\r
      &lt;div class="{0}-bl">&lt;div class="{0}-br">&lt;div class="{0}-bc">&lt;/div>&lt;/div>&lt;/div>&#39;;\r
-               * </code></pre>\r
-               * <p>Example usage:</p>\r
-               * <pre><code>\r
-// Basic box wrap\r
-Ext.get("foo").boxWrap();\r
+        * </code></pre>\r
+        * <p>Example usage:</p>\r
+        * <pre><code>\r
+    // Basic box wrap\r
+    Ext.get("foo").boxWrap();\r
 \r
 \r
-// You can also add a custom class and use CSS inheritance rules to customize the box look.\r
-// 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example\r
-// for how to create a custom box wrap style.\r
-Ext.get("foo").boxWrap().addClass("x-box-blue");\r
-               * </code></pre>\r
-               * @param {String} class (optional) A base CSS class to apply to the containing wrapper element\r
-               * (defaults to <tt>'x-box'</tt>). Note that there are a number of CSS rules that are dependent on\r
-               * this name to make the overall effect work, so if you supply an alternate base class, make sure you\r
-               * also supply all of the necessary rules.\r
-               * @return {Ext.Element} this\r
-               */\r
-           boxWrap : function(cls){\r
-               cls = cls || 'x-box';\r
-               var el = Ext.get(this.insertHtml("beforeBegin", "<div class='" + cls + "'>" + String.format(Ext.Element.boxMarkup, cls) + "</div>"));        //String.format('<div class="{0}">'+Ext.Element.boxMarkup+'</div>', cls)));\r
-               Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);\r
-               return el;\r
-           },\r
+    // You can also add a custom class and use CSS inheritance rules to customize the box look.\r
+    // 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example\r
+    // for how to create a custom box wrap style.\r
+    Ext.get("foo").boxWrap().addClass("x-box-blue");\r
+        * </code></pre>\r
+        * @param {String} class (optional) A base CSS class to apply to the containing wrapper element\r
+        * (defaults to <tt>'x-box'</tt>). Note that there are a number of CSS rules that are dependent on\r
+        * this name to make the overall effect work, so if you supply an alternate base class, make sure you\r
+        * also supply all of the necessary rules.\r
+        * @return {Ext.Element} The outermost wrapping element of the created box structure.\r
+        */\r
+        boxWrap : function(cls){\r
+            cls = cls || 'x-box';\r
+            var el = Ext.get(this.insertHtml("beforeBegin", "<div class='" + cls + "'>" + String.format(Ext.Element.boxMarkup, cls) + "</div>"));        //String.format('<div class="{0}">'+Ext.Element.boxMarkup+'</div>', cls)));\r
+            Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);\r
+            return el;\r
+        },\r
 \r
         <div id="method-Ext.Element-setSize"></div>/**\r
          * Set the size of this Element. If animation is true, both width and height will be animated concurrently.\r
 \r
         <div id="method-Ext.Element-setSize"></div>/**\r
          * Set the size of this Element. If animation is true, both width and height will be animated concurrently.\r
@@ -131,122 +106,123 @@ Ext.get("foo").boxWrap().addClass("x-box-blue");
          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
          * @return {Ext.Element} this\r
          */\r
          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
          * @return {Ext.Element} this\r
          */\r
-           setSize : function(width, height, animate){\r
-                       var me = this;\r
-                       if(Ext.isObject(width)){ // in case of object from getSize()\r
-                           height = width.height;\r
-                           width = width.width;\r
-                       }\r
-                       width = me.adjustWidth(width);\r
-                       height = me.adjustHeight(height);\r
-                       if(!animate || !me.anim){\r
-                           me.dom.style.width = me.addUnits(width);\r
-                           me.dom.style.height = me.addUnits(height);\r
-                       }else{\r
-                           me.anim({width: {to: width}, height: {to: height}}, me.preanim(arguments, 2));\r
-                       }\r
-                       return me;\r
-           },\r
+        setSize : function(width, height, animate){\r
+            var me = this;\r
+            if(Ext.isObject(width)){ // in case of object from getSize()\r
+                height = width.height;\r
+                width = width.width;\r
+            }\r
+            width = me.adjustWidth(width);\r
+            height = me.adjustHeight(height);\r
+            if(!animate || !me.anim){\r
+                me.dom.style.width = me.addUnits(width);\r
+                me.dom.style.height = me.addUnits(height);\r
+            }else{\r
+                me.anim({width: {to: width}, height: {to: height}}, me.preanim(arguments, 2));\r
+            }\r
+            return me;\r
+        },\r
 \r
 \r
-           <div id="method-Ext.Element-getComputedHeight"></div>/**\r
-            * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders\r
-            * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements\r
-            * if a height has not been set using CSS.\r
-            * @return {Number}\r
-            */\r
-           getComputedHeight : function(){\r
-                   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
-                   if(!me.isBorderBox()){\r
-                       h += me.getFrameWidth('tb');\r
-                   }\r
-               }\r
-               return h;\r
-           },\r
+        <div id="method-Ext.Element-getComputedHeight"></div>/**\r
+         * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders\r
+         * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements\r
+         * if a height has not been set using CSS.\r
+         * @return {Number}\r
+         */\r
+        getComputedHeight : function(){\r
+            var me = this,\r
+                h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);\r
+            if(!h){\r
+                h = parseFloat(me.getStyle('height')) || 0;\r
+                if(!me.isBorderBox()){\r
+                    h += me.getFrameWidth('tb');\r
+                }\r
+            }\r
+            return h;\r
+        },\r
 \r
 \r
-           <div id="method-Ext.Element-getComputedWidth"></div>/**\r
-            * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders\r
-            * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements\r
-            * if a width has not been set using CSS.\r
-            * @return {Number}\r
-            */\r
-           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
-                   if(!this.isBorderBox()){\r
-                       w += this.getFrameWidth('lr');\r
-                   }\r
-               }\r
-               return w;\r
-           },\r
+        <div id="method-Ext.Element-getComputedWidth"></div>/**\r
+         * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders\r
+         * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements\r
+         * if a width has not been set using CSS.\r
+         * @return {Number}\r
+         */\r
+        getComputedWidth : function(){\r
+            var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);\r
+            if(!w){\r
+                w = parseFloat(this.getStyle('width')) || 0;\r
+                if(!this.isBorderBox()){\r
+                    w += this.getFrameWidth('lr');\r
+                }\r
+            }\r
+            return w;\r
+        },\r
 \r
 \r
-           <div id="method-Ext.Element-getFrameWidth"></div>/**\r
-            * Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()\r
-            for more information about the sides.\r
-            * @param {String} sides\r
-            * @return {Number}\r
-            */\r
-           getFrameWidth : function(sides, onlyContentBox){\r
-               return onlyContentBox && this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));\r
-           },\r
+        <div id="method-Ext.Element-getFrameWidth"></div>/**\r
+         * Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()\r
+         for more information about the sides.\r
+         * @param {String} sides\r
+         * @return {Number}\r
+         */\r
+        getFrameWidth : function(sides, onlyContentBox){\r
+            return onlyContentBox && this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));\r
+        },\r
 \r
 \r
-           <div id="method-Ext.Element-addClassOnOver"></div>/**\r
-            * Sets up event handlers to add and remove a css class when the mouse is over this element\r
-            * @param {String} className\r
-            * @return {Ext.Element} this\r
-            */\r
-           addClassOnOver : function(className){\r
-               this.hover(\r
-                   function(){\r
-                       Ext.fly(this, INTERNAL).addClass(className);\r
-                   },\r
-                   function(){\r
-                       Ext.fly(this, INTERNAL).removeClass(className);\r
-                   }\r
-               );\r
-               return this;\r
-           },\r
+        <div id="method-Ext.Element-addClassOnOver"></div>/**\r
+         * Sets up event handlers to add and remove a css class when the mouse is over this element\r
+         * @param {String} className\r
+         * @return {Ext.Element} this\r
+         */\r
+        addClassOnOver : function(className){\r
+            this.hover(\r
+                function(){\r
+                    Ext.fly(this, INTERNAL).addClass(className);\r
+                },\r
+                function(){\r
+                    Ext.fly(this, INTERNAL).removeClass(className);\r
+                }\r
+            );\r
+            return this;\r
+        },\r
 \r
 \r
-           <div id="method-Ext.Element-addClassOnFocus"></div>/**\r
-            * Sets up event handlers to add and remove a css class when this element has the focus\r
-            * @param {String} className\r
-            * @return {Ext.Element} this\r
-            */\r
-           addClassOnFocus : function(className){\r
-                   this.on("focus", function(){\r
-                       Ext.fly(this, INTERNAL).addClass(className);\r
-                   }, this.dom);\r
-                   this.on("blur", function(){\r
-                       Ext.fly(this, INTERNAL).removeClass(className);\r
-                   }, this.dom);\r
-                   return this;\r
-           },\r
+        <div id="method-Ext.Element-addClassOnFocus"></div>/**\r
+         * Sets up event handlers to add and remove a css class when this element has the focus\r
+         * @param {String} className\r
+         * @return {Ext.Element} this\r
+         */\r
+        addClassOnFocus : function(className){\r
+            this.on("focus", function(){\r
+                Ext.fly(this, INTERNAL).addClass(className);\r
+            }, this.dom);\r
+            this.on("blur", function(){\r
+                Ext.fly(this, INTERNAL).removeClass(className);\r
+            }, this.dom);\r
+            return this;\r
+        },\r
 \r
 \r
-           <div id="method-Ext.Element-addClassOnClick"></div>/**\r
-            * Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)\r
-            * @param {String} className\r
-            * @return {Ext.Element} this\r
-            */\r
-           addClassOnClick : function(className){\r
-               var dom = this.dom;\r
-               this.on("mousedown", function(){\r
-                   Ext.fly(dom, INTERNAL).addClass(className);\r
-                   var d = Ext.getDoc(),\r
-                       fn = function(){\r
-                               Ext.fly(dom, INTERNAL).removeClass(className);\r
-                               d.removeListener("mouseup", fn);\r
-                           };\r
-                   d.on("mouseup", fn);\r
-               });\r
-               return this;\r
-           },\r
+        <div id="method-Ext.Element-addClassOnClick"></div>/**\r
+         * Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)\r
+         * @param {String} className\r
+         * @return {Ext.Element} this\r
+         */\r
+        addClassOnClick : function(className){\r
+            var dom = this.dom;\r
+            this.on("mousedown", function(){\r
+                Ext.fly(dom, INTERNAL).addClass(className);\r
+                var d = Ext.getDoc(),\r
+                    fn = function(){\r
+                        Ext.fly(dom, INTERNAL).removeClass(className);\r
+                        d.removeListener("mouseup", fn);\r
+                    };\r
+                d.on("mouseup", fn);\r
+            });\r
+            return this;\r
+        },\r
 \r
 \r
-           <div id="method-Ext.Element-getViewSize"></div>/**\r
-            * Returns the width and height of the viewport.\r
-        * <pre><code>\r
+        <div id="method-Ext.Element-getViewSize"></div>/**\r
+         * <p>Returns the dimensions of the element available to lay content out in.<p>\r
+         * <p>If the element (or any ancestor element) has CSS style <code>display : none</code>, the dimensions will be zero.</p>\r
+         * example:<pre><code>\r
         var vpSize = Ext.getBody().getViewSize();\r
 \r
         // all Windows created afterwards will have a default value of 90% height and 95% width\r
         var vpSize = Ext.getBody().getViewSize();\r
 \r
         // all Windows created afterwards will have a default value of 90% height and 95% width\r
@@ -255,73 +231,135 @@ Ext.get("foo").boxWrap().addClass("x-box-blue");
             height: vpSize.height * 0.95\r
         });\r
         // To handle window resizing you would have to hook onto onWindowResize.\r
             height: vpSize.height * 0.95\r
         });\r
         // To handle window resizing you would have to hook onto onWindowResize.\r
-        </code></pre>\r
-            * @return {Object} An object containing the viewport's size {width: (viewport width), height: (viewport height)}\r
-            */\r
-           getViewSize : function(){\r
-               var doc = document,\r
-                       d = this.dom,\r
-                       extdom = Ext.lib.Dom,\r
-                       isDoc = (d == doc || d == doc.body);\r
-               return { width : (isDoc ? extdom.getViewWidth() : d.clientWidth),\r
-                                height : (isDoc ? extdom.getViewHeight() : d.clientHeight) };\r
-           },\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
+                d = this.dom,\r
+                isDoc = (d == doc || d == doc.body);\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
+\r
+            // Else use clientHeight/clientWidth\r
+            } else {\r
+                return {\r
+                    width : d.clientWidth,\r
+                    height : d.clientHeight\r
+                }\r
+            }\r
+        },\r
+\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
+            }\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
+            }\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
+            // Use getWidth/getHeight if style not set.\r
+            return {width: w || me.getWidth(true), height: h || me.getHeight(true)};\r
+        },\r
 \r
 \r
-           <div id="method-Ext.Element-getSize"></div>/**\r
-            * Returns the size of the element.\r
-            * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding\r
-            * @return {Object} An object containing the element's size {width: (element width), height: (element height)}\r
-            */\r
-           getSize : function(contentSize){\r
-               return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};\r
-           },\r
+        <div id="method-Ext.Element-getSize"></div>/**\r
+         * Returns the size of the element.\r
+         * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding\r
+         * @return {Object} An object containing the element's size {width: (element width), height: (element height)}\r
+         */\r
+        getSize : function(contentSize){\r
+            return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};\r
+        },\r
 \r
 \r
-           <div id="method-Ext.Element-repaint"></div>/**\r
-            * Forces the browser to repaint this element\r
-            * @return {Ext.Element} this\r
-            */\r
-           repaint : function(){\r
-               var dom = this.dom;\r
-               this.addClass("x-repaint");\r
-               setTimeout(function(){\r
-                   Ext.fly(dom).removeClass("x-repaint");\r
-               }, 1);\r
-               return this;\r
-           },\r
+        <div id="method-Ext.Element-repaint"></div>/**\r
+         * Forces the browser to repaint this element\r
+         * @return {Ext.Element} this\r
+         */\r
+        repaint : function(){\r
+            var dom = this.dom;\r
+            this.addClass("x-repaint");\r
+            setTimeout(function(){\r
+                Ext.fly(dom).removeClass("x-repaint");\r
+            }, 1);\r
+            return this;\r
+        },\r
 \r
 \r
-           <div id="method-Ext.Element-unselectable"></div>/**\r
-            * Disables text selection for this element (normalized across browsers)\r
-            * @return {Ext.Element} this\r
-            */\r
-           unselectable : function(){\r
-               this.dom.unselectable = "on";\r
-               return this.swallowEvent("selectstart", true).\r
-                                   applyStyles("-moz-user-select:none;-khtml-user-select:none;").\r
-                                   addClass("x-unselectable");\r
-           },\r
+        <div id="method-Ext.Element-unselectable"></div>/**\r
+         * Disables text selection for this element (normalized across browsers)\r
+         * @return {Ext.Element} this\r
+         */\r
+        unselectable : function(){\r
+            this.dom.unselectable = "on";\r
+            return this.swallowEvent("selectstart", true).\r
+                        applyStyles("-moz-user-select:none;-khtml-user-select:none;").\r
+                        addClass("x-unselectable");\r
+        },\r
 \r
 \r
-           <div id="method-Ext.Element-getMargins"></div>/**\r
-            * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,\r
-            * then it returns the calculated width of the sides (see getPadding)\r
-            * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides\r
-            * @return {Object/Number}\r
-            */\r
-           getMargins : function(side){\r
-                   var me = this,\r
-                       key,\r
-                       hash = {t:"top", l:"left", r:"right", b: "bottom"},\r
-                       o = {};\r
+        <div id="method-Ext.Element-getMargins"></div>/**\r
+         * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,\r
+         * then it returns the calculated width of the sides (see getPadding)\r
+         * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides\r
+         * @return {Object/Number}\r
+         */\r
+        getMargins : function(side){\r
+            var me = this,\r
+                key,\r
+                hash = {t:"top", l:"left", r:"right", b: "bottom"},\r
+                o = {};\r
 \r
 \r
-                   if (!side) {\r
-                       for (key in me.margins){\r
-                               o[hash[key]] = parseInt(me.getStyle(me.margins[key]), 10) || 0;\r
+            if (!side) {\r
+                for (key in me.margins){\r
+                    o[hash[key]] = parseFloat(me.getStyle(me.margins[key])) || 0;\r
                 }\r
                 }\r
-                       return o;\r
-               } else {\r
-                   return me.addStyles.call(me, side, me.margins);\r
-               }\r
-           }\r
+                return o;\r
+            } else {\r
+                return me.addStyles.call(me, side, me.margins);\r
+            }\r
+        }\r
     };\r
     };\r
-}());</pre>
-</body>
+}());\r
+</pre>    \r
+</body>\r
 </html>
\ No newline at end of file
 </html>
\ No newline at end of file
Mirror of ExtJS by Sencha Inc. <http://www.sencha.com/>.