/*! * Ext JS Library 3.4.0 * Copyright(c) 2006-2011 Sencha Inc. * licensing@sencha.com * http://www.sencha.com/license */ /** * @class Ext.Element */ // special markup used throughout Ext when box wrapping elements 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();
// 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} The outermost wrapping element of the created box structure.
*/
boxWrap : function(cls){
cls = cls || 'x-box';
var el = Ext.get(this.insertHtml("beforeBegin", "{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.
*
*
* getViewSize utilizes clientHeight/clientWidth which excludes sizing of scrollbars.
* To obtain the size including scrollbars, use getStyleSize
*
* Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
*/
getViewSize : function(){
var doc = document,
d = this.dom,
isDoc = (d == doc || d == doc.body);
// If the body, use Ext.lib.Dom
if (isDoc) {
var extdom = Ext.lib.Dom;
return {
width : extdom.getViewWidth(),
height : extdom.getViewHeight()
};
// Else use clientHeight/clientWidth
} else {
return {
width : d.clientWidth,
height : 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)}; }, /** * 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]] = parseFloat(me.getStyle(me.margins[key])) || 0; } return o; } else { return me.addStyles.call(me, side, me.margins); } } }; }());