3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
11 // special markup used throughout Ext when box wrapping elements
12 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>';
14 Ext.Element.addMethods(function(){
15 var INTERNAL = "_internal",
16 pxMatch = /(\d+\.?\d+)px/;
19 * More flexible version of {@link #setStyle} for setting style properties.
20 * @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
21 * a function which returns such a specification.
22 * @return {Ext.Element} this
24 applyStyles : function(style){
25 Ext.DomHelper.applyStyles(this.dom, style);
30 * Returns an object with properties matching the styles requested.
31 * For example, el.getStyles('color', 'font-size', 'width') might return
32 * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.
33 * @param {String} style1 A style name
34 * @param {String} style2 A style name
35 * @param {String} etc.
36 * @return {Object} The style object
38 getStyles : function(){
40 Ext.each(arguments, function(v) {
41 ret[v] = this.getStyle(v);
47 // private ==> used by ext full
48 setOverflow : function(v){
50 if(v=='auto' && Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug
51 dom.style.overflow = 'hidden';
52 (function(){dom.style.overflow = 'auto';}).defer(1);
54 dom.style.overflow = v;
59 * <p>Wraps the specified element with a special 9 element markup/CSS block that renders by default as
60 * a gray container with a gradient background, rounded corners and a 4-way shadow.</p>
61 * <p>This special markup is used throughout Ext when box wrapping elements ({@link Ext.Button},
62 * {@link Ext.Panel} when <tt>{@link Ext.Panel#frame frame=true}</tt>, {@link Ext.Window}). The markup
63 * is of this form:</p>
65 Ext.Element.boxMarkup =
66 '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div>
67 <div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div>
68 <div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
70 * <p>Example usage:</p>
73 Ext.get("foo").boxWrap();
75 // You can also add a custom class and use CSS inheritance rules to customize the box look.
76 // 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
77 // for how to create a custom box wrap style.
78 Ext.get("foo").boxWrap().addClass("x-box-blue");
80 * @param {String} class (optional) A base CSS class to apply to the containing wrapper element
81 * (defaults to <tt>'x-box'</tt>). Note that there are a number of CSS rules that are dependent on
82 * this name to make the overall effect work, so if you supply an alternate base class, make sure you
83 * also supply all of the necessary rules.
84 * @return {Ext.Element} The outermost wrapping element of the created box structure.
86 boxWrap : function(cls){
88 var el = Ext.get(this.insertHtml("beforeBegin", "<div class='" + cls + "'>" + String.format(Ext.Element.boxMarkup, cls) + "</div>")); //String.format('<div class="{0}">'+Ext.Element.boxMarkup+'</div>', cls)));
89 Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);
94 * Set the size of this Element. If animation is true, both width and height will be animated concurrently.
95 * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
96 * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>
97 * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
98 * <li>A size object in the format <code>{width: widthValue, height: heightValue}</code>.</li>
100 * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
101 * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).</li>
102 * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
104 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
105 * @return {Ext.Element} this
107 setSize : function(width, height, animate){
109 if(typeof width == 'object'){ // in case of object from getSize()
110 height = width.height;
113 width = me.adjustWidth(width);
114 height = me.adjustHeight(height);
115 if(!animate || !me.anim){
116 me.dom.style.width = me.addUnits(width);
117 me.dom.style.height = me.addUnits(height);
119 me.anim({width: {to: width}, height: {to: height}}, me.preanim(arguments, 2));
125 * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
126 * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
127 * if a height has not been set using CSS.
130 getComputedHeight : function(){
132 h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);
134 h = parseFloat(me.getStyle('height')) || 0;
135 if(!me.isBorderBox()){
136 h += me.getFrameWidth('tb');
143 * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
144 * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
145 * if a width has not been set using CSS.
148 getComputedWidth : function(){
149 var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);
151 w = parseFloat(this.getStyle('width')) || 0;
152 if(!this.isBorderBox()){
153 w += this.getFrameWidth('lr');
160 * Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
161 for more information about the sides.
162 * @param {String} sides
165 getFrameWidth : function(sides, onlyContentBox){
166 return onlyContentBox && this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
170 * Sets up event handlers to add and remove a css class when the mouse is over this element
171 * @param {String} className
172 * @return {Ext.Element} this
174 addClassOnOver : function(className){
177 Ext.fly(this, INTERNAL).addClass(className);
180 Ext.fly(this, INTERNAL).removeClass(className);
187 * Sets up event handlers to add and remove a css class when this element has the focus
188 * @param {String} className
189 * @return {Ext.Element} this
191 addClassOnFocus : function(className){
192 this.on("focus", function(){
193 Ext.fly(this, INTERNAL).addClass(className);
195 this.on("blur", function(){
196 Ext.fly(this, INTERNAL).removeClass(className);
202 * Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)
203 * @param {String} className
204 * @return {Ext.Element} this
206 addClassOnClick : function(className){
208 this.on("mousedown", function(){
209 Ext.fly(dom, INTERNAL).addClass(className);
210 var d = Ext.getDoc(),
212 Ext.fly(dom, INTERNAL).removeClass(className);
213 d.removeListener("mouseup", fn);
221 * <p>Returns the dimensions of the element available to lay content out in.<p>
222 * <p>If the element (or any ancestor element) has CSS style <code>display : none</code>, the dimensions will be zero.</p>
223 * example:<pre><code>
224 var vpSize = Ext.getBody().getViewSize();
226 // all Windows created afterwards will have a default value of 90% height and 95% width
227 Ext.Window.override({
228 width: vpSize.width * 0.9,
229 height: vpSize.height * 0.95
231 // To handle window resizing you would have to hook onto onWindowResize.
234 * getViewSize utilizes clientHeight/clientWidth which excludes sizing of scrollbars.
235 * To obtain the size including scrollbars, use getStyleSize
237 * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
240 getViewSize : function(){
243 isDoc = (d == doc || d == doc.body);
245 // If the body, use Ext.lib.Dom
247 var extdom = Ext.lib.Dom;
249 width : extdom.getViewWidth(),
250 height : extdom.getViewHeight()
253 // Else use clientHeight/clientWidth
256 width : d.clientWidth,
257 height : d.clientHeight
263 * <p>Returns the dimensions of the element available to lay content out in.<p>
265 * getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and offsetWidth/clientWidth.
266 * To obtain the size excluding scrollbars, use getViewSize
268 * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
271 getStyleSize : function(){
276 isDoc = (d == doc || d == doc.body),
279 // If the body, use Ext.lib.Dom
281 var extdom = Ext.lib.Dom;
283 width : extdom.getViewWidth(),
284 height : extdom.getViewHeight()
287 // Use Styles if they are set
288 if(s.width && s.width != 'auto'){
289 w = parseFloat(s.width);
290 if(me.isBorderBox()){
291 w -= me.getFrameWidth('lr');
294 // Use Styles if they are set
295 if(s.height && s.height != 'auto'){
296 h = parseFloat(s.height);
297 if(me.isBorderBox()){
298 h -= me.getFrameWidth('tb');
301 // Use getWidth/getHeight if style not set.
302 return {width: w || me.getWidth(true), height: h || me.getHeight(true)};
306 * Returns the size of the element.
307 * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding
308 * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
310 getSize : function(contentSize){
311 return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
315 * Forces the browser to repaint this element
316 * @return {Ext.Element} this
318 repaint : function(){
320 this.addClass("x-repaint");
321 setTimeout(function(){
322 Ext.fly(dom).removeClass("x-repaint");
328 * Disables text selection for this element (normalized across browsers)
329 * @return {Ext.Element} this
331 unselectable : function(){
332 this.dom.unselectable = "on";
333 return this.swallowEvent("selectstart", true).
334 applyStyles("-moz-user-select:none;-khtml-user-select:none;").
335 addClass("x-unselectable");
339 * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
340 * then it returns the calculated width of the sides (see getPadding)
341 * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides
342 * @return {Object/Number}
344 getMargins : function(side){
347 hash = {t:"top", l:"left", r:"right", b: "bottom"},
351 for (key in me.margins){
352 o[hash[key]] = parseFloat(me.getStyle(me.margins[key])) || 0;
356 return me.addStyles.call(me, side, me.margins);