\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
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
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
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
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: <element width>, height: <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
\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
git.ithinksw.org / extjs.git / blobdiff