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
@@ -250,72 +254,127 @@ Ext.get("foo").boxWrap().addClass("x-box-blue");
});
// 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) };
- },
+ * @param {Boolean} contentBox True to return the W3 content box within the padding area of the element. False
+ * or omitted to return the full area of the element within the border. See http://www.w3.org/TR/CSS2/box.html
+ * @return {Object} An object containing the elements's area: {width: <element width>, height: <element height>}
+ */
+ getViewSize : function(contentBox){
+ var doc = document,
+ me = this,
+ d = me.dom,
+ extdom = Ext.lib.Dom,
+ isDoc = (d == doc || d == doc.body),
+ isBB, w, h, tbBorder = 0, lrBorder = 0,
+ tbPadding = 0, lrPadding = 0;
+ if (isDoc) {
+ return { width: extdom.getViewWidth(), height: extdom.getViewHeight() };
+ }
+ isBB = me.isBorderBox();
+ tbBorder = me.getBorderWidth('tb');
+ lrBorder = me.getBorderWidth('lr');
+ tbPadding = me.getPadding('tb');
+ lrPadding = me.getPadding('lr');
- /**
- * 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)};
- },
+ // Width calcs
+ // Try the style first, then clientWidth, then offsetWidth
+ if (w = me.getStyle('width').match(pxMatch)){
+ if ((w = parseInt(w[1], 10)) && isBB){
+ // Style includes the padding and border if isBB
+ w -= (lrBorder + lrPadding);
+ }
+ if (!contentBox){
+ w += lrPadding;
+ }
+ } else {
+ if (!(w = d.clientWidth) && (w = d.offsetWidth)){
+ w -= lrBorder;
+ }
+ if (w && contentBox){
+ w -= lrPadding;
+ }
+ }
- /**
- * 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;
- },
+ // Height calcs
+ // Try the style first, then clientHeight, then offsetHeight
+ if (h = me.getStyle('height').match(pxMatch)){
+ if ((h = parseInt(h[1], 10)) && isBB){
+ // Style includes the padding and border if isBB
+ h -= (tbBorder + tbPadding);
+ }
+ if (!contentBox){
+ h += tbPadding;
+ }
+ } else {
+ if (!(h = d.clientHeight) && (h = d.offsetHeight)){
+ h -= tbBorder;
+ }
+ if (h && contentBox){
+ h -= tbPadding;
+ }
+ }
- /**
- * 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");
- },
+ return {
+ width : w,
+ height : h
+ };
+ },
- /**
- * 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 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;
+ },
+
+ /**
+ * 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 = {};
- 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]] = parseInt(me.getStyle(me.margins[key]), 10) || 0;
}
- return o;
- } else {
- return me.addStyles.call(me, side, me.margins);
- }
- }
+ return o;
+ } else {
+ return me.addStyles.call(me, side, me.margins);
+ }
+ }
};
-}());