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