docs/source/Element.style.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-core-Element'>/**
  19 </span> * @class Ext.core.Element
  20  */
  21 (function(){
  22     Ext.core.Element.boxMarkup = '&lt;div class=&quot;{0}-tl&quot;&gt;&lt;div class=&quot;{0}-tr&quot;&gt;&lt;div class=&quot;{0}-tc&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;{0}-ml&quot;&gt;&lt;div class=&quot;{0}-mr&quot;&gt;&lt;div class=&quot;{0}-mc&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;{0}-bl&quot;&gt;&lt;div class=&quot;{0}-br&quot;&gt;&lt;div class=&quot;{0}-bc&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
  23     // local style camelizing for speed
  24     var supports = Ext.supports,
  25         view = document.defaultView,
  26         opacityRe = /alpha\(opacity=(.*)\)/i,
  27         trimRe = /^\s+|\s+$/g,
  28         spacesRe = /\s+/,
  29         wordsRe = /\w/g,
  30         adjustDirect2DTableRe = /table-row|table-.*-group/,
  31         INTERNAL = '_internal',
  32         PADDING = 'padding',
  33         MARGIN = 'margin',
  34         BORDER = 'border',
  35         LEFT = '-left',
  36         RIGHT = '-right',
  37         TOP = '-top',
  38         BOTTOM = '-bottom',
  39         WIDTH = '-width',
  40         MATH = Math,
  41         HIDDEN = 'hidden',
  42         ISCLIPPED = 'isClipped',
  43         OVERFLOW = 'overflow',
  44         OVERFLOWX = 'overflow-x',
  45         OVERFLOWY = 'overflow-y',
  46         ORIGINALCLIP = 'originalClip',
  47         // special markup used throughout Ext when box wrapping elements
  48         borders = {l: BORDER + LEFT + WIDTH, r: BORDER + RIGHT + WIDTH, t: BORDER + TOP + WIDTH, b: BORDER + BOTTOM + WIDTH},
  49         paddings = {l: PADDING + LEFT, r: PADDING + RIGHT, t: PADDING + TOP, b: PADDING + BOTTOM},
  50         margins = {l: MARGIN + LEFT, r: MARGIN + RIGHT, t: MARGIN + TOP, b: MARGIN + BOTTOM},
  51         data = Ext.core.Element.data;
  52
  53     Ext.override(Ext.core.Element, {
  54
  55 <span id='Ext-core-Element-method-adjustWidth'>        /**
  56 </span>         * TODO: Look at this
  57          */
  58         // private  ==&gt; used by Fx
  59         adjustWidth : function(width) {
  60             var me = this,
  61                 isNum = (typeof width == 'number');
  62
  63             if(isNum &amp;&amp; me.autoBoxAdjust &amp;&amp; !me.isBorderBox()){
  64                width -= (me.getBorderWidth(&quot;lr&quot;) + me.getPadding(&quot;lr&quot;));
  65             }
  66             return (isNum &amp;&amp; width &lt; 0) ? 0 : width;
  67         },
  68
  69         // private   ==&gt; used by Fx
  70         adjustHeight : function(height) {
  71             var me = this,
  72                 isNum = (typeof height == &quot;number&quot;);
  73
  74             if(isNum &amp;&amp; me.autoBoxAdjust &amp;&amp; !me.isBorderBox()){
  75                height -= (me.getBorderWidth(&quot;tb&quot;) + me.getPadding(&quot;tb&quot;));
  76             }
  77             return (isNum &amp;&amp; height &lt; 0) ? 0 : height;
  78         },
  79
  80
  81 <span id='Ext-core-Element-method-addCls'>        /**
  82 </span>         * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
  83          * @param {String/Array} className The CSS classes to add separated by space, or an array of classes
  84          * @return {Ext.core.Element} this
  85          */
  86         addCls : function(className){
  87             var me = this,
  88                 cls = [],
  89                 space = ((me.dom.className.replace(trimRe, '') == '') ? &quot;&quot; : &quot; &quot;),
  90                 i, len, v;
  91             if (className === undefined) {
  92                 return me;
  93             }
  94             // Separate case is for speed
  95             if (Object.prototype.toString.call(className) !== '[object Array]') {
  96                 if (typeof className === 'string') {
  97                     className = className.replace(trimRe, '').split(spacesRe);
  98                     if (className.length === 1) {
  99                         className = className[0];
 100                         if (!me.hasCls(className)) {
 101                             me.dom.className += space + className;
 102                         }
 103                     } else {
 104                         this.addCls(className);
 105                     }
 106                 }
 107             } else {
 108                 for (i = 0, len = className.length; i &lt; len; i++) {
 109                     v = className[i];
 110                     if (typeof v == 'string' &amp;&amp; (' ' + me.dom.className + ' ').indexOf(' ' + v + ' ') == -1) {
 111                         cls.push(v);
 112                     }
 113                 }
 114                 if (cls.length) {
 115                     me.dom.className += space + cls.join(&quot; &quot;);
 116                 }
 117             }
 118             return me;
 119         },
 120
 121 <span id='Ext-core-Element-method-removeCls'>        /**
 122 </span>         * Removes one or more CSS classes from the element.
 123          * @param {String/Array} className The CSS classes to remove separated by space, or an array of classes
 124          * @return {Ext.core.Element} this
 125          */
 126         removeCls : function(className){
 127             var me = this,
 128                 i, idx, len, cls, elClasses;
 129             if (className === undefined) {
 130                 return me;
 131             }
 132             if (Object.prototype.toString.call(className) !== '[object Array]') {
 133                 className = className.replace(trimRe, '').split(spacesRe);
 134             }
 135             if (me.dom &amp;&amp; me.dom.className) {
 136                 elClasses = me.dom.className.replace(trimRe, '').split(spacesRe);
 137                 for (i = 0, len = className.length; i &lt; len; i++) {
 138                     cls = className[i];
 139                     if (typeof cls == 'string') {
 140                         cls = cls.replace(trimRe, '');
 141                         idx = Ext.Array.indexOf(elClasses, cls);
 142                         if (idx != -1) {
 143                             Ext.Array.erase(elClasses, idx, 1);
 144                         }
 145                     }
 146                 }
 147                 me.dom.className = elClasses.join(&quot; &quot;);
 148             }
 149             return me;
 150         },
 151
 152 <span id='Ext-core-Element-method-radioCls'>        /**
 153 </span>         * Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
 154          * @param {String/Array} className The CSS class to add, or an array of classes
 155          * @return {Ext.core.Element} this
 156          */
 157         radioCls : function(className){
 158             var cn = this.dom.parentNode.childNodes,
 159                 v, i, len;
 160             className = Ext.isArray(className) ? className : [className];
 161             for (i = 0, len = cn.length; i &lt; len; i++) {
 162                 v = cn[i];
 163                 if (v &amp;&amp; v.nodeType == 1) {
 164                     Ext.fly(v, '_internal').removeCls(className);
 165                 }
 166             }
 167             return this.addCls(className);
 168         },
 169
 170 <span id='Ext-core-Element-method-toggleCls'>        /**
 171 </span>         * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
 172          * @param {String} className The CSS class to toggle
 173          * @return {Ext.core.Element} this
 174          * @method
 175          */
 176         toggleCls : Ext.supports.ClassList ?
 177             function(className) {
 178                 this.dom.classList.toggle(Ext.String.trim(className));
 179                 return this;
 180             } :
 181             function(className) {
 182                 return this.hasCls(className) ? this.removeCls(className) : this.addCls(className);
 183             },
 184
 185 <span id='Ext-core-Element-method-hasCls'>        /**
 186 </span>         * Checks if the specified CSS class exists on this element's DOM node.
 187          * @param {String} className The CSS class to check for
 188          * @return {Boolean} True if the class exists, else false
 189          * @method
 190          */
 191         hasCls : Ext.supports.ClassList ?
 192             function(className) {
 193                 if (!className) {
 194                     return false;
 195                 }
 196                 className = className.split(spacesRe);
 197                 var ln = className.length,
 198                     i = 0;
 199                 for (; i &lt; ln; i++) {
 200                     if (className[i] &amp;&amp; this.dom.classList.contains(className[i])) {
 201                         return true;
 202                     }
 203                 }
 204                 return false;
 205             } :
 206             function(className){
 207                 return className &amp;&amp; (' ' + this.dom.className + ' ').indexOf(' ' + className + ' ') != -1;
 208             },
 209
 210 <span id='Ext-core-Element-method-replaceCls'>        /**
 211 </span>         * Replaces a CSS class on the element with another.  If the old name does not exist, the new name will simply be added.
 212          * @param {String} oldClassName The CSS class to replace
 213          * @param {String} newClassName The replacement CSS class
 214          * @return {Ext.core.Element} this
 215          */
 216         replaceCls : function(oldClassName, newClassName){
 217             return this.removeCls(oldClassName).addCls(newClassName);
 218         },
 219
 220         isStyle : function(style, val) {
 221             return this.getStyle(style) == val;
 222         },
 223
 224 <span id='Ext-core-Element-method-getStyle'>        /**
 225 </span>         * Normalizes currentStyle and computedStyle.
 226          * @param {String} property The style property whose value is returned.
 227          * @return {String} The current value of the style property for this element.
 228          * @method
 229          */
 230         getStyle : function(){
 231             return view &amp;&amp; view.getComputedStyle ?
 232                 function(prop){
 233                     var el = this.dom,
 234                         v, cs, out, display, cleaner;
 235
 236                     if(el == document){
 237                         return null;
 238                     }
 239                     prop = Ext.core.Element.normalize(prop);
 240                     out = (v = el.style[prop]) ? v :
 241                            (cs = view.getComputedStyle(el, &quot;&quot;)) ? cs[prop] : null;
 242
 243                     // Ignore cases when the margin is correctly reported as 0, the bug only shows
 244                     // numbers larger.
 245                     if(prop == 'marginRight' &amp;&amp; out != '0px' &amp;&amp; !supports.RightMargin){
 246                         cleaner = Ext.core.Element.getRightMarginFixCleaner(el);
 247                         display = this.getStyle('display');
 248                         el.style.display = 'inline-block';
 249                         out = view.getComputedStyle(el, '').marginRight;
 250                         el.style.display = display;
 251                         cleaner();
 252                     }
 253
 254                     if(prop == 'backgroundColor' &amp;&amp; out == 'rgba(0, 0, 0, 0)' &amp;&amp; !supports.TransparentColor){
 255                         out = 'transparent';
 256                     }
 257                     return out;
 258                 } :
 259                 function(prop){
 260                     var el = this.dom,
 261                         m, cs;
 262
 263                     if (el == document) {
 264                         return null;
 265                     }
 266
 267                     if (prop == 'opacity') {
 268                         if (el.style.filter.match) {
 269                             m = el.style.filter.match(opacityRe);
 270                             if(m){
 271                                 var fv = parseFloat(m[1]);
 272                                 if(!isNaN(fv)){
 273                                     return fv ? fv / 100 : 0;
 274                                 }
 275                             }
 276                         }
 277                         return 1;
 278                     }
 279                     prop = Ext.core.Element.normalize(prop);
 280                     return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
 281                 };
 282         }(),
 283
 284 <span id='Ext-core-Element-method-getColor'>        /**
 285 </span>         * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
 286          * are convert to standard 6 digit hex color.
 287          * @param {String} attr The css attribute
 288          * @param {String} defaultValue The default value to use when a valid color isn't found
 289          * @param {String} prefix (optional) defaults to #. Use an empty string when working with
 290          * color anims.
 291          */
 292         getColor : function(attr, defaultValue, prefix){
 293             var v = this.getStyle(attr),
 294                 color = prefix || prefix === '' ? prefix : '#',
 295                 h;
 296
 297             if(!v || (/transparent|inherit/.test(v))) {
 298                 return defaultValue;
 299             }
 300             if(/^r/.test(v)){
 301                 Ext.each(v.slice(4, v.length -1).split(','), function(s){
 302                     h = parseInt(s, 10);
 303                     color += (h &lt; 16 ? '0' : '') + h.toString(16);
 304                 });
 305             }else{
 306                 v = v.replace('#', '');
 307                 color += v.length == 3 ? v.replace(/^(\w)(\w)(\w)$/, '$1$1$2$2$3$3') : v;
 308             }
 309             return(color.length &gt; 5 ? color.toLowerCase() : defaultValue);
 310         },
 311
 312 <span id='Ext-core-Element-method-setStyle'>        /**
 313 </span>         * Wrapper for setting style properties, also takes single object parameter of multiple styles.
 314          * @param {String/Object} property The style property to be set, or an object of multiple styles.
 315          * @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
 316          * @return {Ext.core.Element} this
 317          */
 318         setStyle : function(prop, value){
 319             var me = this,
 320                 tmp, style;
 321
 322             if (!me.dom) {
 323                 return me;
 324             }
 325             if (typeof prop === 'string') {
 326                 tmp = {};
 327                 tmp[prop] = value;
 328                 prop = tmp;
 329             }
 330             for (style in prop) {
 331                 if (prop.hasOwnProperty(style)) {
 332                     value = Ext.value(prop[style], '');
 333                     if (style == 'opacity') {
 334                         me.setOpacity(value);
 335                     }
 336                     else {
 337                         me.dom.style[Ext.core.Element.normalize(style)] = value;
 338                     }
 339                 }
 340             }
 341             return me;
 342         },
 343
 344 <span id='Ext-core-Element-method-setOpacity'>        /**
 345 </span>         * Set the opacity of the element
 346          * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
 347          * @param {Boolean/Object} animate (optional) a standard Element animation config object or &lt;tt&gt;true&lt;/tt&gt; for
 348          * the default animation (&lt;tt&gt;{duration: .35, easing: 'easeIn'}&lt;/tt&gt;)
 349          * @return {Ext.core.Element} this
 350          */
 351         setOpacity: function(opacity, animate) {
 352             var me = this,
 353                 dom = me.dom,
 354                 val,
 355                 style;
 356
 357             if (!me.dom) {
 358                 return me;
 359             }
 360
 361             style = me.dom.style;
 362
 363             if (!animate || !me.anim) {
 364                 if (!Ext.supports.Opacity) {
 365                     opacity = opacity &lt; 1 ? 'alpha(opacity=' + opacity * 100 + ')': '';
 366                     val = style.filter.replace(opacityRe, '').replace(trimRe, '');
 367
 368                     style.zoom = 1;
 369                     style.filter = val + (val.length &gt; 0 ? ' ': '') + opacity;
 370                 }
 371                 else {
 372                     style.opacity = opacity;
 373                 }
 374             }
 375             else {
 376                 if (!Ext.isObject(animate)) {
 377                     animate = {
 378                         duration: 350,
 379                         easing: 'ease-in'
 380                     };
 381                 }
 382                 me.animate(Ext.applyIf({
 383                     to: {
 384                         opacity: opacity
 385                     }
 386                 },
 387                 animate));
 388             }
 389             return me;
 390         },
 391
 392
 393 <span id='Ext-core-Element-method-clearOpacity'>        /**
 394 </span>         * Clears any opacity settings from this element. Required in some cases for IE.
 395          * @return {Ext.core.Element} this
 396          */
 397         clearOpacity : function(){
 398             var style = this.dom.style;
 399             if(!Ext.supports.Opacity){
 400                 if(!Ext.isEmpty(style.filter)){
 401                     style.filter = style.filter.replace(opacityRe, '').replace(trimRe, '');
 402                 }
 403             }else{
 404                 style.opacity = style['-moz-opacity'] = style['-khtml-opacity'] = '';
 405             }
 406             return this;
 407         },
 408
 409 <span id='Ext-core-Element-method-adjustDirect2DDimension'>        /**
 410 </span>         * @private
 411          * Returns 1 if the browser returns the subpixel dimension rounded to the lowest pixel.
 412          * @return {Number} 0 or 1
 413          */
 414         adjustDirect2DDimension: function(dimension) {
 415             var me = this,
 416                 dom = me.dom,
 417                 display = me.getStyle('display'),
 418                 inlineDisplay = dom.style['display'],
 419                 inlinePosition = dom.style['position'],
 420                 originIndex = dimension === 'width' ? 0 : 1,
 421                 floating;
 422
 423             if (display === 'inline') {
 424                 dom.style['display'] = 'inline-block';
 425             }
 426
 427             dom.style['position'] = display.match(adjustDirect2DTableRe) ? 'absolute' : 'static';
 428
 429             // floating will contain digits that appears after the decimal point
 430             // if height or width are set to auto we fallback to msTransformOrigin calculation
 431             floating = (parseFloat(me.getStyle(dimension)) || parseFloat(dom.currentStyle.msTransformOrigin.split(' ')[originIndex]) * 2) % 1;
 432
 433             dom.style['position'] = inlinePosition;
 434
 435             if (display === 'inline') {
 436                 dom.style['display'] = inlineDisplay;
 437             }
 438
 439             return floating;
 440         },
 441
 442 <span id='Ext-core-Element-method-getHeight'>        /**
 443 </span>         * Returns the offset height of the element
 444          * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding
 445          * @return {Number} The element's height
 446          */
 447         getHeight: function(contentHeight, preciseHeight) {
 448             var me = this,
 449                 dom = me.dom,
 450                 hidden = Ext.isIE &amp;&amp; me.isStyle('display', 'none'),
 451                 height, overflow, style, floating;
 452
 453             // IE Quirks mode acts more like a max-size measurement unless overflow is hidden during measurement.
 454             // We will put the overflow back to it's original value when we are done measuring.
 455             if (Ext.isIEQuirks) {
 456                 style = dom.style;
 457                 overflow = style.overflow;
 458                 me.setStyle({ overflow: 'hidden'});
 459             }
 460
 461             height = dom.offsetHeight;
 462
 463             height = MATH.max(height, hidden ? 0 : dom.clientHeight) || 0;
 464
 465             // IE9 Direct2D dimension rounding bug
 466             if (!hidden &amp;&amp; Ext.supports.Direct2DBug) {
 467                 floating = me.adjustDirect2DDimension('height');
 468                 if (preciseHeight) {
 469                     height += floating;
 470                 }
 471                 else if (floating &gt; 0 &amp;&amp; floating &lt; 0.5) {
 472                     height++;
 473                 }
 474             }
 475
 476             if (contentHeight) {
 477                 height -= (me.getBorderWidth(&quot;tb&quot;) + me.getPadding(&quot;tb&quot;));
 478             }
 479
 480             if (Ext.isIEQuirks) {
 481                 me.setStyle({ overflow: overflow});
 482             }
 483
 484             if (height &lt; 0) {
 485                 height = 0;
 486             }
 487             return height;
 488         },
 489
 490 <span id='Ext-core-Element-method-getWidth'>        /**
 491 </span>         * Returns the offset width of the element
 492          * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding
 493          * @return {Number} The element's width
 494          */
 495         getWidth: function(contentWidth, preciseWidth) {
 496             var me = this,
 497                 dom = me.dom,
 498                 hidden = Ext.isIE &amp;&amp; me.isStyle('display', 'none'),
 499                 rect, width, overflow, style, floating, parentPosition;
 500
 501             // IE Quirks mode acts more like a max-size measurement unless overflow is hidden during measurement.
 502             // We will put the overflow back to it's original value when we are done measuring.
 503             if (Ext.isIEQuirks) {
 504                 style = dom.style;
 505                 overflow = style.overflow;
 506                 me.setStyle({overflow: 'hidden'});
 507             }
 508
 509             // Fix Opera 10.5x width calculation issues
 510             if (Ext.isOpera10_5) {
 511                 if (dom.parentNode.currentStyle.position === 'relative') {
 512                     parentPosition = dom.parentNode.style.position;
 513                     dom.parentNode.style.position = 'static';
 514                     width = dom.offsetWidth;
 515                     dom.parentNode.style.position = parentPosition;
 516                 }
 517                 width = Math.max(width || 0, dom.offsetWidth);
 518
 519             // Gecko will in some cases report an offsetWidth that is actually less than the width of the
 520             // text contents, because it measures fonts with sub-pixel precision but rounds the calculated
 521             // value down. Using getBoundingClientRect instead of offsetWidth allows us to get the precise
 522             // subpixel measurements so we can force them to always be rounded up. See
 523             // https://bugzilla.mozilla.org/show_bug.cgi?id=458617
 524             } else if (Ext.supports.BoundingClientRect) {
 525                 rect = dom.getBoundingClientRect();
 526                 width = rect.right - rect.left;
 527                 width = preciseWidth ? width : Math.ceil(width);
 528             } else {
 529                 width = dom.offsetWidth;
 530             }
 531
 532             width = MATH.max(width, hidden ? 0 : dom.clientWidth) || 0;
 533
 534             // IE9 Direct2D dimension rounding bug
 535             if (!hidden &amp;&amp; Ext.supports.Direct2DBug) {
 536                 floating = me.adjustDirect2DDimension('width');
 537                 if (preciseWidth) {
 538                     width += floating;
 539                 }
 540                 else if (floating &gt; 0 &amp;&amp; floating &lt; 0.5) {
 541                     width++;
 542                 }
 543             }
 544
 545             if (contentWidth) {
 546                 width -= (me.getBorderWidth(&quot;lr&quot;) + me.getPadding(&quot;lr&quot;));
 547             }
 548
 549             if (Ext.isIEQuirks) {
 550                 me.setStyle({ overflow: overflow});
 551             }
 552
 553             if (width &lt; 0) {
 554                 width = 0;
 555             }
 556             return width;
 557         },
 558
 559 <span id='Ext-core-Element-method-setWidth'>        /**
 560 </span>         * Set the width of this Element.
 561          * @param {Mixed} width The new width. This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
 562          * &lt;li&gt;A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).&lt;/li&gt;
 563          * &lt;li&gt;A String used to set the CSS width style. Animation may &lt;b&gt;not&lt;/b&gt; be used.
 564          * &lt;/ul&gt;&lt;/div&gt;
 565          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
 566          * @return {Ext.core.Element} this
 567          */
 568         setWidth : function(width, animate){
 569             var me = this;
 570             width = me.adjustWidth(width);
 571             if (!animate || !me.anim) {
 572                 me.dom.style.width = me.addUnits(width);
 573             }
 574             else {
 575                 if (!Ext.isObject(animate)) {
 576                     animate = {};
 577                 }
 578                 me.animate(Ext.applyIf({
 579                     to: {
 580                         width: width
 581                     }
 582                 }, animate));
 583             }
 584             return me;
 585         },
 586
 587 <span id='Ext-core-Element-method-setHeight'>        /**
 588 </span>         * Set the height of this Element.
 589          * &lt;pre&gt;&lt;code&gt;
 590 // change the height to 200px and animate with default configuration
 591 Ext.fly('elementId').setHeight(200, true);
 592
 593 // change the height to 150px and animate with a custom configuration
 594 Ext.fly('elId').setHeight(150, {
 595     duration : .5, // animation will have a duration of .5 seconds
 596     // will change the content to &quot;finished&quot;
 597     callback: function(){ this.{@link #update}(&quot;finished&quot;); }
 598 });
 599          * &lt;/code&gt;&lt;/pre&gt;
 600          * @param {Mixed} height The new height. This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
 601          * &lt;li&gt;A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels.)&lt;/li&gt;
 602          * &lt;li&gt;A String used to set the CSS height style. Animation may &lt;b&gt;not&lt;/b&gt; be used.&lt;/li&gt;
 603          * &lt;/ul&gt;&lt;/div&gt;
 604          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
 605          * @return {Ext.core.Element} this
 606          */
 607          setHeight : function(height, animate){
 608             var me = this;
 609             height = me.adjustHeight(height);
 610             if (!animate || !me.anim) {
 611                 me.dom.style.height = me.addUnits(height);
 612             }
 613             else {
 614                 if (!Ext.isObject(animate)) {
 615                     animate = {};
 616                 }
 617                 me.animate(Ext.applyIf({
 618                     to: {
 619                         height: height
 620                     }
 621                 }, animate));
 622             }
 623             return me;
 624         },
 625
 626 <span id='Ext-core-Element-method-getBorderWidth'>        /**
 627 </span>         * Gets the width of the border(s) for the specified side(s)
 628          * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
 629          * passing &lt;tt&gt;'lr'&lt;/tt&gt; would get the border &lt;b&gt;&lt;u&gt;l&lt;/u&gt;&lt;/b&gt;eft width + the border &lt;b&gt;&lt;u&gt;r&lt;/u&gt;&lt;/b&gt;ight width.
 630          * @return {Number} The width of the sides passed added together
 631          */
 632         getBorderWidth : function(side){
 633             return this.addStyles(side, borders);
 634         },
 635
 636 <span id='Ext-core-Element-method-getPadding'>        /**
 637 </span>         * Gets the width of the padding(s) for the specified side(s)
 638          * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
 639          * passing &lt;tt&gt;'lr'&lt;/tt&gt; would get the padding &lt;b&gt;&lt;u&gt;l&lt;/u&gt;&lt;/b&gt;eft + the padding &lt;b&gt;&lt;u&gt;r&lt;/u&gt;&lt;/b&gt;ight.
 640          * @return {Number} The padding of the sides passed added together
 641          */
 642         getPadding : function(side){
 643             return this.addStyles(side, paddings);
 644         },
 645
 646 <span id='Ext-core-Element-method-clip'>        /**
 647 </span>         *  Store the current overflow setting and clip overflow on the element - use &lt;tt&gt;{@link #unclip}&lt;/tt&gt; to remove
 648          * @return {Ext.core.Element} this
 649          */
 650         clip : function(){
 651             var me = this,
 652                 dom = me.dom;
 653
 654             if(!data(dom, ISCLIPPED)){
 655                 data(dom, ISCLIPPED, true);
 656                 data(dom, ORIGINALCLIP, {
 657                     o: me.getStyle(OVERFLOW),
 658                     x: me.getStyle(OVERFLOWX),
 659                     y: me.getStyle(OVERFLOWY)
 660                 });
 661                 me.setStyle(OVERFLOW, HIDDEN);
 662                 me.setStyle(OVERFLOWX, HIDDEN);
 663                 me.setStyle(OVERFLOWY, HIDDEN);
 664             }
 665             return me;
 666         },
 667
 668 <span id='Ext-core-Element-method-unclip'>        /**
 669 </span>         *  Return clipping (overflow) to original clipping before &lt;tt&gt;{@link #clip}&lt;/tt&gt; was called
 670          * @return {Ext.core.Element} this
 671          */
 672         unclip : function(){
 673             var me = this,
 674                 dom = me.dom,
 675                 clip;
 676
 677             if(data(dom, ISCLIPPED)){
 678                 data(dom, ISCLIPPED, false);
 679                 clip = data(dom, ORIGINALCLIP);
 680                 if(o.o){
 681                     me.setStyle(OVERFLOW, o.o);
 682                 }
 683                 if(o.x){
 684                     me.setStyle(OVERFLOWX, o.x);
 685                 }
 686                 if(o.y){
 687                     me.setStyle(OVERFLOWY, o.y);
 688                 }
 689             }
 690             return me;
 691         },
 692
 693         // private
 694         addStyles : function(sides, styles){
 695             var totalSize = 0,
 696                 sidesArr = sides.match(wordsRe),
 697                 i = 0,
 698                 len = sidesArr.length,
 699                 side, size;
 700             for (; i &lt; len; i++) {
 701                 side = sidesArr[i];
 702                 size = side &amp;&amp; parseInt(this.getStyle(styles[side]), 10);
 703                 if (size) {
 704                     totalSize += MATH.abs(size);
 705                 }
 706             }
 707             return totalSize;
 708         },
 709
 710         margins : margins,
 711
 712 <span id='Ext-core-Element-method-applyStyles'>        /**
 713 </span>         * More flexible version of {@link #setStyle} for setting style properties.
 714          * @param {String/Object/Function} styles A style specification string, e.g. &quot;width:100px&quot;, or object in the form {width:&quot;100px&quot;}, or
 715          * a function which returns such a specification.
 716          * @return {Ext.core.Element} this
 717          */
 718         applyStyles : function(style){
 719             Ext.core.DomHelper.applyStyles(this.dom, style);
 720             return this;
 721         },
 722
 723 <span id='Ext-core-Element-method-getStyles'>        /**
 724 </span>         * Returns an object with properties matching the styles requested.
 725          * For example, el.getStyles('color', 'font-size', 'width') might return
 726          * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.
 727          * @param {String} style1 A style name
 728          * @param {String} style2 A style name
 729          * @param {String} etc.
 730          * @return {Object} The style object
 731          */
 732         getStyles : function(){
 733             var styles = {},
 734                 len = arguments.length,
 735                 i = 0, style;
 736
 737             for(; i &lt; len; ++i) {
 738                 style = arguments[i];
 739                 styles[style] = this.getStyle(style);
 740             }
 741             return styles;
 742         },
 743
 744 <span id='Ext-core-Element-method-boxWrap'>       /**
 745 </span>        * &lt;p&gt;Wraps the specified element with a special 9 element markup/CSS block that renders by default as
 746         * a gray container with a gradient background, rounded corners and a 4-way shadow.&lt;/p&gt;
 747         * &lt;p&gt;This special markup is used throughout Ext when box wrapping elements ({@link Ext.button.Button},
 748         * {@link Ext.panel.Panel} when &lt;tt&gt;{@link Ext.panel.Panel#frame frame=true}&lt;/tt&gt;, {@link Ext.window.Window}).  The markup
 749         * is of this form:&lt;/p&gt;
 750         * &lt;pre&gt;&lt;code&gt;
 751     Ext.core.Element.boxMarkup =
 752     &amp;#39;&amp;lt;div class=&quot;{0}-tl&quot;&gt;&amp;lt;div class=&quot;{0}-tr&quot;&gt;&amp;lt;div class=&quot;{0}-tc&quot;&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;
 753      &amp;lt;div class=&quot;{0}-ml&quot;&gt;&amp;lt;div class=&quot;{0}-mr&quot;&gt;&amp;lt;div class=&quot;{0}-mc&quot;&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;
 754      &amp;lt;div class=&quot;{0}-bl&quot;&gt;&amp;lt;div class=&quot;{0}-br&quot;&gt;&amp;lt;div class=&quot;{0}-bc&quot;&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;&amp;#39;;
 755         * &lt;/code&gt;&lt;/pre&gt;
 756         * &lt;p&gt;Example usage:&lt;/p&gt;
 757         * &lt;pre&gt;&lt;code&gt;
 758     // Basic box wrap
 759     Ext.get(&quot;foo&quot;).boxWrap();
 760
 761     // You can also add a custom class and use CSS inheritance rules to customize the box look.
 762     // 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
 763     // for how to create a custom box wrap style.
 764     Ext.get(&quot;foo&quot;).boxWrap().addCls(&quot;x-box-blue&quot;);
 765         * &lt;/code&gt;&lt;/pre&gt;
 766         * @param {String} class (optional) A base CSS class to apply to the containing wrapper element
 767         * (defaults to &lt;tt&gt;'x-box'&lt;/tt&gt;). Note that there are a number of CSS rules that are dependent on
 768         * this name to make the overall effect work, so if you supply an alternate base class, make sure you
 769         * also supply all of the necessary rules.
 770         * @return {Ext.core.Element} The outermost wrapping element of the created box structure.
 771         */
 772         boxWrap : function(cls){
 773             cls = cls || Ext.baseCSSPrefix + 'box';
 774             var el = Ext.get(this.insertHtml(&quot;beforeBegin&quot;, &quot;&lt;div class='&quot; + cls + &quot;'&gt;&quot; + Ext.String.format(Ext.core.Element.boxMarkup, cls) + &quot;&lt;/div&gt;&quot;));
 775             Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);
 776             return el;
 777         },
 778
 779 <span id='Ext-core-Element-method-setSize'>        /**
 780 </span>         * Set the size of this Element. If animation is true, both width and height will be animated concurrently.
 781          * @param {Mixed} width The new width. This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
 782          * &lt;li&gt;A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).&lt;/li&gt;
 783          * &lt;li&gt;A String used to set the CSS width style. Animation may &lt;b&gt;not&lt;/b&gt; be used.
 784          * &lt;li&gt;A size object in the format &lt;code&gt;{width: widthValue, height: heightValue}&lt;/code&gt;.&lt;/li&gt;
 785          * &lt;/ul&gt;&lt;/div&gt;
 786          * @param {Mixed} height The new height. This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
 787          * &lt;li&gt;A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).&lt;/li&gt;
 788          * &lt;li&gt;A String used to set the CSS height style. Animation may &lt;b&gt;not&lt;/b&gt; be used.&lt;/li&gt;
 789          * &lt;/ul&gt;&lt;/div&gt;
 790          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
 791          * @return {Ext.core.Element} this
 792          */
 793         setSize : function(width, height, animate){
 794             var me = this;
 795             if (Ext.isObject(width)) { // in case of object from getSize()
 796                 animate = height;
 797                 height = width.height;
 798                 width = width.width;
 799             }
 800             width = me.adjustWidth(width);
 801             height = me.adjustHeight(height);
 802             if(!animate || !me.anim){
 803                 me.dom.style.width = me.addUnits(width);
 804                 me.dom.style.height = me.addUnits(height);
 805             }
 806             else {
 807                 if (animate === true) {
 808                     animate = {};
 809                 }
 810                 me.animate(Ext.applyIf({
 811                     to: {
 812                         width: width,
 813                         height: height
 814                     }
 815                 }, animate));
 816             }
 817             return me;
 818         },
 819
 820 <span id='Ext-core-Element-method-getComputedHeight'>        /**
 821 </span>         * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
 822          * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
 823          * if a height has not been set using CSS.
 824          * @return {Number}
 825          */
 826         getComputedHeight : function(){
 827             var me = this,
 828                 h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);
 829             if(!h){
 830                 h = parseFloat(me.getStyle('height')) || 0;
 831                 if(!me.isBorderBox()){
 832                     h += me.getFrameWidth('tb');
 833                 }
 834             }
 835             return h;
 836         },
 837
 838 <span id='Ext-core-Element-method-getComputedWidth'>        /**
 839 </span>         * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
 840          * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
 841          * if a width has not been set using CSS.
 842          * @return {Number}
 843          */
 844         getComputedWidth : function(){
 845             var me = this,
 846                 w = Math.max(me.dom.offsetWidth, me.dom.clientWidth);
 847
 848             if(!w){
 849                 w = parseFloat(me.getStyle('width')) || 0;
 850                 if(!me.isBorderBox()){
 851                     w += me.getFrameWidth('lr');
 852                 }
 853             }
 854             return w;
 855         },
 856
 857 <span id='Ext-core-Element-method-getFrameWidth'>        /**
 858 </span>         * Returns the sum width of the padding and borders for the passed &quot;sides&quot;. See getBorderWidth()
 859          for more information about the sides.
 860          * @param {String} sides
 861          * @return {Number}
 862          */
 863         getFrameWidth : function(sides, onlyContentBox){
 864             return onlyContentBox &amp;&amp; this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
 865         },
 866
 867 <span id='Ext-core-Element-method-addClsOnOver'>        /**
 868 </span>         * Sets up event handlers to add and remove a css class when the mouse is over this element
 869          * @param {String} className
 870          * @return {Ext.core.Element} this
 871          */
 872         addClsOnOver : function(className){
 873             var dom = this.dom;
 874             this.hover(
 875                 function(){
 876                     Ext.fly(dom, INTERNAL).addCls(className);
 877                 },
 878                 function(){
 879                     Ext.fly(dom, INTERNAL).removeCls(className);
 880                 }
 881             );
 882             return this;
 883         },
 884
 885 <span id='Ext-core-Element-method-addClsOnFocus'>        /**
 886 </span>         * Sets up event handlers to add and remove a css class when this element has the focus
 887          * @param {String} className
 888          * @return {Ext.core.Element} this
 889          */
 890         addClsOnFocus : function(className){
 891             var me = this,
 892                 dom = me.dom;
 893             me.on(&quot;focus&quot;, function(){
 894                 Ext.fly(dom, INTERNAL).addCls(className);
 895             });
 896             me.on(&quot;blur&quot;, function(){
 897                 Ext.fly(dom, INTERNAL).removeCls(className);
 898             });
 899             return me;
 900         },
 901
 902 <span id='Ext-core-Element-method-addClsOnClick'>        /**
 903 </span>         * 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)
 904          * @param {String} className
 905          * @return {Ext.core.Element} this
 906          */
 907         addClsOnClick : function(className){
 908             var dom = this.dom;
 909             this.on(&quot;mousedown&quot;, function(){
 910                 Ext.fly(dom, INTERNAL).addCls(className);
 911                 var d = Ext.getDoc(),
 912                     fn = function(){
 913                         Ext.fly(dom, INTERNAL).removeCls(className);
 914                         d.removeListener(&quot;mouseup&quot;, fn);
 915                     };
 916                 d.on(&quot;mouseup&quot;, fn);
 917             });
 918             return this;
 919         },
 920
 921 <span id='Ext-core-Element-method-getViewSize'>        /**
 922 </span>         * &lt;p&gt;Returns the dimensions of the element available to lay content out in.&lt;p&gt;
 923          * &lt;p&gt;If the element (or any ancestor element) has CSS style &lt;code&gt;display : none&lt;/code&gt;, the dimensions will be zero.&lt;/p&gt;
 924          * example:&lt;pre&gt;&lt;code&gt;
 925         var vpSize = Ext.getBody().getViewSize();
 926
 927         // all Windows created afterwards will have a default value of 90% height and 95% width
 928         Ext.Window.override({
 929             width: vpSize.width * 0.9,
 930             height: vpSize.height * 0.95
 931         });
 932         // To handle window resizing you would have to hook onto onWindowResize.
 933         * &lt;/code&gt;&lt;/pre&gt;
 934         *
 935         * getViewSize utilizes clientHeight/clientWidth which excludes sizing of scrollbars.
 936         * To obtain the size including scrollbars, use getStyleSize
 937         *
 938         * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
 939         */
 940
 941         getViewSize : function(){
 942             var me = this,
 943                 dom = me.dom,
 944                 isDoc = (dom == Ext.getDoc().dom || dom == Ext.getBody().dom),
 945                 style, overflow, ret;
 946
 947             // If the body, use static methods
 948             if (isDoc) {
 949                 ret = {
 950                     width : Ext.core.Element.getViewWidth(),
 951                     height : Ext.core.Element.getViewHeight()
 952                 };
 953
 954             // Else use clientHeight/clientWidth
 955             }
 956             else {
 957                 // IE 6 &amp; IE Quirks mode acts more like a max-size measurement unless overflow is hidden during measurement.
 958                 // We will put the overflow back to it's original value when we are done measuring.
 959                 if (Ext.isIE6 || Ext.isIEQuirks) {
 960                     style = dom.style;
 961                     overflow = style.overflow;
 962                     me.setStyle({ overflow: 'hidden'});
 963                 }
 964                 ret = {
 965                     width : dom.clientWidth,
 966                     height : dom.clientHeight
 967                 };
 968                 if (Ext.isIE6 || Ext.isIEQuirks) {
 969                     me.setStyle({ overflow: overflow });
 970                 }
 971             }
 972             return ret;
 973         },
 974
 975 <span id='Ext-core-Element-method-getStyleSize'>        /**
 976 </span>        * &lt;p&gt;Returns the dimensions of the element available to lay content out in.&lt;p&gt;
 977         *
 978         * getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and offsetWidth/clientWidth.
 979         * To obtain the size excluding scrollbars, use getViewSize
 980         *
 981         * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
 982         */
 983
 984         getStyleSize : function(){
 985             var me = this,
 986                 doc = document,
 987                 d = this.dom,
 988                 isDoc = (d == doc || d == doc.body),
 989                 s = d.style,
 990                 w, h;
 991
 992             // If the body, use static methods
 993             if (isDoc) {
 994                 return {
 995                     width : Ext.core.Element.getViewWidth(),
 996                     height : Ext.core.Element.getViewHeight()
 997                 };
 998             }
 999             // Use Styles if they are set
1000             if(s.width &amp;&amp; s.width != 'auto'){
1001                 w = parseFloat(s.width);
1002                 if(me.isBorderBox()){
1003                    w -= me.getFrameWidth('lr');
1004                 }
1005             }
1006             // Use Styles if they are set
1007             if(s.height &amp;&amp; s.height != 'auto'){
1008                 h = parseFloat(s.height);
1009                 if(me.isBorderBox()){
1010                    h -= me.getFrameWidth('tb');
1011                 }
1012             }
1013             // Use getWidth/getHeight if style not set.
1014             return {width: w || me.getWidth(true), height: h || me.getHeight(true)};
1015         },
1016
1017 <span id='Ext-core-Element-method-getSize'>        /**
1018 </span>         * Returns the size of the element.
1019          * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding
1020          * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
1021          */
1022         getSize : function(contentSize){
1023             return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
1024         },
1025
1026 <span id='Ext-core-Element-method-repaint'>        /**
1027 </span>         * Forces the browser to repaint this element
1028          * @return {Ext.core.Element} this
1029          */
1030         repaint : function(){
1031             var dom = this.dom;
1032             this.addCls(Ext.baseCSSPrefix + 'repaint');
1033             setTimeout(function(){
1034                 Ext.fly(dom).removeCls(Ext.baseCSSPrefix + 'repaint');
1035             }, 1);
1036             return this;
1037         },
1038
1039 <span id='Ext-core-Element-method-unselectable'>        /**
1040 </span>         * Disables text selection for this element (normalized across browsers)
1041          * @return {Ext.core.Element} this
1042          */
1043         unselectable : function(){
1044             var me = this;
1045             me.dom.unselectable = &quot;on&quot;;
1046
1047             me.swallowEvent(&quot;selectstart&quot;, true);
1048             me.applyStyles(&quot;-moz-user-select:none;-khtml-user-select:none;&quot;);
1049             me.addCls(Ext.baseCSSPrefix + 'unselectable');
1050
1051             return me;
1052         },
1053
1054 <span id='Ext-core-Element-method-getMargin'>        /**
1055 </span>         * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
1056          * then it returns the calculated width of the sides (see getPadding)
1057          * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides
1058          * @return {Object/Number}
1059          */
1060         getMargin : function(side){
1061             var me = this,
1062                 hash = {t:&quot;top&quot;, l:&quot;left&quot;, r:&quot;right&quot;, b: &quot;bottom&quot;},
1063                 o = {},
1064                 key;
1065
1066             if (!side) {
1067                 for (key in me.margins){
1068                     o[hash[key]] = parseFloat(me.getStyle(me.margins[key])) || 0;
1069                 }
1070                 return o;
1071             } else {
1072                 return me.addStyles.call(me, side, me.margins);
1073             }
1074         }
1075     });
1076 })();</pre>
1077 </body>
1078 </html>