Wraps the specified element with a special 9 element markup/CSS block that renders by default as - * a gray container with a gradient background, rounded corners and a 4-way shadow.
- *This special markup is used throughout Ext when box wrapping elements ({@link Ext.Button}, - * {@link Ext.Panel} when {@link Ext.Panel#frame frame=true}, {@link Ext.Window}). The markup - * is of this form:
- *
-Ext.Element.boxMarkup =
+ /**
+ * Wraps the specified element with a special 9 element markup/CSS block that renders by default as
+ * a gray container with a gradient background, rounded corners and a 4-way shadow.
+ * This special markup is used throughout Ext when box wrapping elements ({@link Ext.Button},
+ * {@link Ext.Panel} when {@link Ext.Panel#frame frame=true}, {@link Ext.Window}). The markup
+ * is of this form:
+ *
+ 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>';
- *
- * Example usage:
- *
-// Basic box wrap
-Ext.get("foo").boxWrap();
+ *
+ * Example usage:
+ *
+ // Basic box wrap
+ Ext.get("foo").boxWrap();
-// You can also add a custom class and use CSS inheritance rules to customize the box look.
-// 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
-// for how to create a custom box wrap style.
-Ext.get("foo").boxWrap().addClass("x-box-blue");
- *
- * @param {String} class (optional) A base CSS class to apply to the containing wrapper element
- * (defaults to 'x-box'). Note that there are a number of CSS rules that are dependent on
- * this name to make the overall effect work, so if you supply an alternate base class, make sure you
- * also supply all of the necessary rules.
- * @return {Ext.Element} this
- */
- boxWrap : function(cls){
- cls = cls || 'x-box';
- var el = Ext.get(this.insertHtml("beforeBegin", "" + String.format(Ext.Element.boxMarkup, cls) + "")); //String.format(''+Ext.Element.boxMarkup+'', cls)));
- Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);
- return el;
- },
+ // You can also add a custom class and use CSS inheritance rules to customize the box look.
+ // 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
+ // for how to create a custom box wrap style.
+ Ext.get("foo").boxWrap().addClass("x-box-blue");
+ *
+ /**
+ * Returns the dimensions of the element available to lay content out in.
+ *
If the element (or any ancestor element) has CSS style display : none, the dimensions will be zero.
+ * example:
var vpSize = Ext.getBody().getViewSize();
// all Windows created afterwards will have a default value of 90% height and 95% width
@@ -249,73 +231,135 @@ Ext.get("foo").boxWrap().addClass("x-box-blue");
height: vpSize.height * 0.95
});
// To handle window resizing you would have to hook onto onWindowResize.
-
- * @return {Object} An object containing the viewport's size {width: (viewport width), height: (viewport height)}
- */
- getViewSize : function(){
- var doc = document,
- d = this.dom,
- extdom = Ext.lib.Dom,
- isDoc = (d == doc || d == doc.body);
- return { width : (isDoc ? extdom.getViewWidth() : d.clientWidth),
- height : (isDoc ? extdom.getViewHeight() : d.clientHeight) };
- },
+ * Returns the dimensions of the element available to lay content out in.
+ * + * getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and offsetWidth/clientWidth. + * To obtain the size excluding scrollbars, use getViewSize + * + * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc. + */ + + getStyleSize : function(){ + var me = this, + w, h, + doc = document, + d = this.dom, + isDoc = (d == doc || d == doc.body), + s = d.style; + + // If the body, use Ext.lib.Dom + if (isDoc) { + var extdom = Ext.lib.Dom; + return { + width : extdom.getViewWidth(), + height : extdom.getViewHeight() + } + } + // Use Styles if they are set + if(s.width && s.width != 'auto'){ + w = parseFloat(s.width); + if(me.isBorderBox()){ + w -= me.getFrameWidth('lr'); + } + } + // Use Styles if they are set + if(s.height && s.height != 'auto'){ + h = parseFloat(s.height); + if(me.isBorderBox()){ + h -= me.getFrameWidth('tb'); + } + } + // Use getWidth/getHeight if style not set. + return {width: w || me.getWidth(true), height: h || me.getHeight(true)}; + }, -
/** - * Returns the size of the element. - * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding - * @return {Object} An object containing the element's size {width: (element width), height: (element height)} - */ - getSize : function(contentSize){ - return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)}; - }, + /** + * Returns the size of the element. + * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding + * @return {Object} An object containing the element's size {width: (element width), height: (element height)} + */ + getSize : function(contentSize){ + return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)}; + }, - /** - * Forces the browser to repaint this element - * @return {Ext.Element} this - */ - repaint : function(){ - var dom = this.dom; - this.addClass("x-repaint"); - setTimeout(function(){ - Ext.fly(dom).removeClass("x-repaint"); - }, 1); - return this; - }, + /** + * Forces the browser to repaint this element + * @return {Ext.Element} this + */ + repaint : function(){ + var dom = this.dom; + this.addClass("x-repaint"); + setTimeout(function(){ + Ext.fly(dom).removeClass("x-repaint"); + }, 1); + return this; + }, - /** - * Disables text selection for this element (normalized across browsers) - * @return {Ext.Element} this - */ - unselectable : function(){ - this.dom.unselectable = "on"; - return this.swallowEvent("selectstart", true). - applyStyles("-moz-user-select:none;-khtml-user-select:none;"). - addClass("x-unselectable"); - }, + /** + * Disables text selection for this element (normalized across browsers) + * @return {Ext.Element} this + */ + unselectable : function(){ + this.dom.unselectable = "on"; + return this.swallowEvent("selectstart", true). + applyStyles("-moz-user-select:none;-khtml-user-select:none;"). + addClass("x-unselectable"); + }, - /** - * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed, - * then it returns the calculated width of the sides (see getPadding) - * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides - * @return {Object/Number} - */ - getMargins : function(side){ - var me = this, - key, - hash = {t:"top", l:"left", r:"right", b: "bottom"}, - o = {}; + /** + * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed, + * then it returns the calculated width of the sides (see getPadding) + * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides + * @return {Object/Number} + */ + getMargins : function(side){ + var me = this, + key, + hash = {t:"top", l:"left", r:"right", b: "bottom"}, + o = {}; - if (!side) { - for (key in me.margins){ - o[hash[key]] = parseInt(me.getStyle(me.margins[key]), 10) || 0; + if (!side) { + for (key in me.margins){ + o[hash[key]] = parseFloat(me.getStyle(me.margins[key])) || 0; } - return o; - } else { - return me.addStyles.call(me, side, me.margins); - } - } + return o; + } else { + return me.addStyles.call(me, side, me.margins); + } + } }; -}()); +}()); + \ No newline at end of file