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();
// 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");
* {width: widthValue, height: heightValue}.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.
var vpSize = Ext.getBody().getViewSize();
// all Windows created afterwards will have a default value of 90% height and 95% width
Ext.Window.override({
width: vpSize.width * 0.9,
height: vpSize.height * 0.95
});
// To handle window resizing you would have to hook onto onWindowResize.
{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');
// 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;
}
}
// 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;
}
}
return {
width : w,
height : h
};
},
/**
* 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;
}
return o;
} else {
return me.addStyles.call(me, side, me.margins);
}
}
};
}());