docs/source/Element.style.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.2.1
  11  * Copyright(c) 2006-2010 Ext JS, Inc.
  12  * licensing@extjs.com
  13  * http://www.extjs.com/license
  14  */
  15 <div id="cls-Ext.Element"></div>/**
  16  * @class Ext.Element
  17  */
  18 Ext.Element.addMethods(function(){
  19     // local style camelizing for speed
  20     var propCache = {},
  21         camelRe = /(-[a-z])/gi,
  22         classReCache = {},
  23         view = document.defaultView,
  24         propFloat = Ext.isIE ? 'styleFloat' : 'cssFloat',
  25         opacityRe = /alpha\(opacity=(.*)\)/i,
  26         trimRe = /^\s+|\s+$/g,
  27         spacesRe = /\s+/,
  28         wordsRe = /\w/g,
  29         EL = Ext.Element,
  30         PADDING = "padding",
  31         MARGIN = "margin",
  32         BORDER = "border",
  33         LEFT = "-left",
  34         RIGHT = "-right",
  35         TOP = "-top",
  36         BOTTOM = "-bottom",
  37         WIDTH = "-width",
  38         MATH = Math,
  39         HIDDEN = 'hidden',
  40         ISCLIPPED = 'isClipped',
  41         OVERFLOW = 'overflow',
  42         OVERFLOWX = 'overflow-x',
  43         OVERFLOWY = 'overflow-y',
  44         ORIGINALCLIP = 'originalClip',
  45         // special markup used throughout Ext when box wrapping elements
  46         borders = {l: BORDER + LEFT + WIDTH, r: BORDER + RIGHT + WIDTH, t: BORDER + TOP + WIDTH, b: BORDER + BOTTOM + WIDTH},
  47         paddings = {l: PADDING + LEFT, r: PADDING + RIGHT, t: PADDING + TOP, b: PADDING + BOTTOM},
  48         margins = {l: MARGIN + LEFT, r: MARGIN + RIGHT, t: MARGIN + TOP, b: MARGIN + BOTTOM},
  49         data = Ext.Element.data;
  50
  51
  52     // private
  53     function camelFn(m, a) {
  54         return a.charAt(1).toUpperCase();
  55     }
  56
  57     function chkCache(prop) {
  58         return propCache[prop] || (propCache[prop] = prop == 'float' ? propFloat : prop.replace(camelRe, camelFn));
  59     }
  60
  61     return {
  62         // private  ==> used by Fx
  63         adjustWidth : function(width) {
  64             var me = this;
  65             var isNum = (typeof width == "number");
  66             if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
  67                width -= (me.getBorderWidth("lr") + me.getPadding("lr"));
  68             }
  69             return (isNum && width < 0) ? 0 : width;
  70         },
  71
  72         // private   ==> used by Fx
  73         adjustHeight : function(height) {
  74             var me = this;
  75             var isNum = (typeof height == "number");
  76             if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
  77                height -= (me.getBorderWidth("tb") + me.getPadding("tb"));
  78             }
  79             return (isNum && height < 0) ? 0 : height;
  80         },
  81
  82
  83         <div id="method-Ext.Element-addClass"></div>/**
  84          * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
  85          * @param {String/Array} className The CSS class to add, or an array of classes
  86          * @return {Ext.Element} this
  87          */
  88         addClass : function(className){
  89             var me = this,
  90                 i,
  91                 len,
  92                 v,
  93                 cls = [];
  94             // Separate case is for speed
  95             if (!Ext.isArray(className)) {
  96                 if (typeof className == 'string' && !this.hasClass(className)) {
  97                     me.dom.className += " " + className;
  98                 }
  99             }
 100             else {
 101                 for (i = 0, len = className.length; i < len; i++) {
 102                     v = className[i];
 103                     if (typeof v == 'string' && (' ' + me.dom.className + ' ').indexOf(' ' + v + ' ') == -1) {
 104                         cls.push(v);
 105                     }
 106                 }
 107                 if (cls.length) {
 108                     me.dom.className += " " + cls.join(" ");
 109                 }
 110             }
 111             return me;
 112         },
 113
 114         <div id="method-Ext.Element-removeClass"></div>/**
 115          * Removes one or more CSS classes from the element.
 116          * @param {String/Array} className The CSS class to remove, or an array of classes
 117          * @return {Ext.Element} this
 118          */
 119         removeClass : function(className){
 120             var me = this,
 121                 i,
 122                 idx,
 123                 len,
 124                 cls,
 125                 elClasses;
 126             if (!Ext.isArray(className)){
 127                 className = [className];
 128             }
 129             if (me.dom && me.dom.className) {
 130                 elClasses = me.dom.className.replace(trimRe, '').split(spacesRe);
 131                 for (i = 0, len = className.length; i < len; i++) {
 132                     cls = className[i];
 133                     if (typeof cls == 'string') {
 134                         cls = cls.replace(trimRe, '');
 135                         idx = elClasses.indexOf(cls);
 136                         if (idx != -1) {
 137                             elClasses.splice(idx, 1);
 138                         }
 139                     }
 140                 }
 141                 me.dom.className = elClasses.join(" ");
 142             }
 143             return me;
 144         },
 145
 146         <div id="method-Ext.Element-radioClass"></div>/**
 147          * Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
 148          * @param {String/Array} className The CSS class to add, or an array of classes
 149          * @return {Ext.Element} this
 150          */
 151         radioClass : function(className){
 152             var cn = this.dom.parentNode.childNodes,
 153                 v,
 154                 i,
 155                 len;
 156             className = Ext.isArray(className) ? className : [className];
 157             for (i = 0, len = cn.length; i < len; i++) {
 158                 v = cn[i];
 159                 if (v && v.nodeType == 1) {
 160                     Ext.fly(v, '_internal').removeClass(className);
 161                 }
 162             };
 163             return this.addClass(className);
 164         },
 165
 166         <div id="method-Ext.Element-toggleClass"></div>/**
 167          * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
 168          * @param {String} className The CSS class to toggle
 169          * @return {Ext.Element} this
 170          */
 171         toggleClass : function(className){
 172             return this.hasClass(className) ? this.removeClass(className) : this.addClass(className);
 173         },
 174
 175         <div id="method-Ext.Element-hasClass"></div>/**
 176          * Checks if the specified CSS class exists on this element's DOM node.
 177          * @param {String} className The CSS class to check for
 178          * @return {Boolean} True if the class exists, else false
 179          */
 180         hasClass : function(className){
 181             return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;
 182         },
 183
 184         <div id="method-Ext.Element-replaceClass"></div>/**
 185          * Replaces a CSS class on the element with another.  If the old name does not exist, the new name will simply be added.
 186          * @param {String} oldClassName The CSS class to replace
 187          * @param {String} newClassName The replacement CSS class
 188          * @return {Ext.Element} this
 189          */
 190         replaceClass : function(oldClassName, newClassName){
 191             return this.removeClass(oldClassName).addClass(newClassName);
 192         },
 193
 194         isStyle : function(style, val) {
 195             return this.getStyle(style) == val;
 196         },
 197
 198         <div id="method-Ext.Element-getStyle"></div>/**
 199          * Normalizes currentStyle and computedStyle.
 200          * @param {String} property The style property whose value is returned.
 201          * @return {String} The current value of the style property for this element.
 202          */
 203         getStyle : function(){
 204             return view && view.getComputedStyle ?
 205                 function(prop){
 206                     var el = this.dom,
 207                         v,
 208                         cs,
 209                         out,
 210                         display,
 211                         wk = Ext.isWebKit,
 212                         display;
 213
 214                     if(el == document){
 215                         return null;
 216                     }
 217                     prop = chkCache(prop);
 218                     // Fix bug caused by this: https://bugs.webkit.org/show_bug.cgi?id=13343
 219                     if(wk && /marginRight/.test(prop)){
 220                         display = this.getStyle('display');
 221                         el.style.display = 'inline-block';
 222                     }
 223                     out = (v = el.style[prop]) ? v :
 224                            (cs = view.getComputedStyle(el, "")) ? cs[prop] : null;
 225
 226                     // Webkit returns rgb values for transparent.
 227                     if(wk){
 228                         if(out == 'rgba(0, 0, 0, 0)'){
 229                             out = 'transparent';
 230                         }else if(display){
 231                             el.style.display = display;
 232                         }
 233                     }
 234                     return out;
 235                 } :
 236                 function(prop){
 237                     var el = this.dom,
 238                         m,
 239                         cs;
 240
 241                     if(el == document) return null;
 242                     if (prop == 'opacity') {
 243                         if (el.style.filter.match) {
 244                             if(m = el.style.filter.match(opacityRe)){
 245                                 var fv = parseFloat(m[1]);
 246                                 if(!isNaN(fv)){
 247                                     return fv ? fv / 100 : 0;
 248                                 }
 249                             }
 250                         }
 251                         return 1;
 252                     }
 253                     prop = chkCache(prop);
 254                     return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
 255                 };
 256         }(),
 257
 258         <div id="method-Ext.Element-getColor"></div>/**
 259          * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
 260          * are convert to standard 6 digit hex color.
 261          * @param {String} attr The css attribute
 262          * @param {String} defaultValue The default value to use when a valid color isn't found
 263          * @param {String} prefix (optional) defaults to #. Use an empty string when working with
 264          * color anims.
 265          */
 266         getColor : function(attr, defaultValue, prefix){
 267             var v = this.getStyle(attr),
 268                 color = (typeof prefix != 'undefined') ? prefix : '#',
 269                 h;
 270
 271             if(!v || /transparent|inherit/.test(v)){
 272                 return defaultValue;
 273             }
 274             if(/^r/.test(v)){
 275                 Ext.each(v.slice(4, v.length -1).split(','), function(s){
 276                     h = parseInt(s, 10);
 277                     color += (h < 16 ? '0' : '') + h.toString(16);
 278                 });
 279             }else{
 280                 v = v.replace('#', '');
 281                 color += v.length == 3 ? v.replace(/^(\w)(\w)(\w)$/, '$1$1$2$2$3$3') : v;
 282             }
 283             return(color.length > 5 ? color.toLowerCase() : defaultValue);
 284         },
 285
 286         <div id="method-Ext.Element-setStyle"></div>/**
 287          * Wrapper for setting style properties, also takes single object parameter of multiple styles.
 288          * @param {String/Object} property The style property to be set, or an object of multiple styles.
 289          * @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
 290          * @return {Ext.Element} this
 291          */
 292         setStyle : function(prop, value){
 293             var tmp,
 294                 style,
 295                 camel;
 296             if (typeof prop != 'object') {
 297                 tmp = {};
 298                 tmp[prop] = value;
 299                 prop = tmp;
 300             }
 301             for (style in prop) {
 302                 value = prop[style];
 303                 style == 'opacity' ?
 304                     this.setOpacity(value) :
 305                     this.dom.style[chkCache(style)] = value;
 306             }
 307             return this;
 308         },
 309
 310         <div id="method-Ext.Element-setOpacity"></div>/**
 311          * Set the opacity of the element
 312          * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
 313          * @param {Boolean/Object} animate (optional) a standard Element animation config object or <tt>true</tt> for
 314          * the default animation (<tt>{duration: .35, easing: 'easeIn'}</tt>)
 315          * @return {Ext.Element} this
 316          */
 317          setOpacity : function(opacity, animate){
 318             var me = this,
 319                 s = me.dom.style;
 320
 321             if(!animate || !me.anim){
 322                 if(Ext.isIE){
 323                     var opac = opacity < 1 ? 'alpha(opacity=' + opacity * 100 + ')' : '',
 324                     val = s.filter.replace(opacityRe, '').replace(trimRe, '');
 325
 326                     s.zoom = 1;
 327                     s.filter = val + (val.length > 0 ? ' ' : '') + opac;
 328                 }else{
 329                     s.opacity = opacity;
 330                 }
 331             }else{
 332                 me.anim({opacity: {to: opacity}}, me.preanim(arguments, 1), null, .35, 'easeIn');
 333             }
 334             return me;
 335         },
 336
 337         <div id="method-Ext.Element-clearOpacity"></div>/**
 338          * Clears any opacity settings from this element. Required in some cases for IE.
 339          * @return {Ext.Element} this
 340          */
 341         clearOpacity : function(){
 342             var style = this.dom.style;
 343             if(Ext.isIE){
 344                 if(!Ext.isEmpty(style.filter)){
 345                     style.filter = style.filter.replace(opacityRe, '').replace(trimRe, '');
 346                 }
 347             }else{
 348                 style.opacity = style['-moz-opacity'] = style['-khtml-opacity'] = '';
 349             }
 350             return this;
 351         },
 352
 353         <div id="method-Ext.Element-getHeight"></div>/**
 354          * Returns the offset height of the element
 355          * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding
 356          * @return {Number} The element's height
 357          */
 358         getHeight : function(contentHeight){
 359             var me = this,
 360                 dom = me.dom,
 361                 hidden = Ext.isIE && me.isStyle('display', 'none'),
 362                 h = MATH.max(dom.offsetHeight, hidden ? 0 : dom.clientHeight) || 0;
 363
 364             h = !contentHeight ? h : h - me.getBorderWidth("tb") - me.getPadding("tb");
 365             return h < 0 ? 0 : h;
 366         },
 367
 368         <div id="method-Ext.Element-getWidth"></div>/**
 369          * Returns the offset width of the element
 370          * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding
 371          * @return {Number} The element's width
 372          */
 373         getWidth : function(contentWidth){
 374             var me = this,
 375                 dom = me.dom,
 376                 hidden = Ext.isIE && me.isStyle('display', 'none'),
 377                 w = MATH.max(dom.offsetWidth, hidden ? 0 : dom.clientWidth) || 0;
 378             w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr");
 379             return w < 0 ? 0 : w;
 380         },
 381
 382         <div id="method-Ext.Element-setWidth"></div>/**
 383          * Set the width of this Element.
 384          * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
 385          * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>
 386          * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
 387          * </ul></div>
 388          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
 389          * @return {Ext.Element} this
 390          */
 391         setWidth : function(width, animate){
 392             var me = this;
 393             width = me.adjustWidth(width);
 394             !animate || !me.anim ?
 395                 me.dom.style.width = me.addUnits(width) :
 396                 me.anim({width : {to : width}}, me.preanim(arguments, 1));
 397             return me;
 398         },
 399
 400         <div id="method-Ext.Element-setHeight"></div>/**
 401          * Set the height of this Element.
 402          * <pre><code>
 403 // change the height to 200px and animate with default configuration
 404 Ext.fly('elementId').setHeight(200, true);
 405
 406 // change the height to 150px and animate with a custom configuration
 407 Ext.fly('elId').setHeight(150, {
 408     duration : .5, // animation will have a duration of .5 seconds
 409     // will change the content to "finished"
 410     callback: function(){ this.{@link #update}("finished"); }
 411 });
 412          * </code></pre>
 413          * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
 414          * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels.)</li>
 415          * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
 416          * </ul></div>
 417          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
 418          * @return {Ext.Element} this
 419          */
 420          setHeight : function(height, animate){
 421             var me = this;
 422             height = me.adjustHeight(height);
 423             !animate || !me.anim ?
 424                 me.dom.style.height = me.addUnits(height) :
 425                 me.anim({height : {to : height}}, me.preanim(arguments, 1));
 426             return me;
 427         },
 428
 429         <div id="method-Ext.Element-getBorderWidth"></div>/**
 430          * Gets the width of the border(s) for the specified side(s)
 431          * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
 432          * passing <tt>'lr'</tt> would get the border <b><u>l</u></b>eft width + the border <b><u>r</u></b>ight width.
 433          * @return {Number} The width of the sides passed added together
 434          */
 435         getBorderWidth : function(side){
 436             return this.addStyles(side, borders);
 437         },
 438
 439         <div id="method-Ext.Element-getPadding"></div>/**
 440          * Gets the width of the padding(s) for the specified side(s)
 441          * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
 442          * passing <tt>'lr'</tt> would get the padding <b><u>l</u></b>eft + the padding <b><u>r</u></b>ight.
 443          * @return {Number} The padding of the sides passed added together
 444          */
 445         getPadding : function(side){
 446             return this.addStyles(side, paddings);
 447         },
 448
 449         <div id="method-Ext.Element-clip"></div>/**
 450          *  Store the current overflow setting and clip overflow on the element - use <tt>{@link #unclip}</tt> to remove
 451          * @return {Ext.Element} this
 452          */
 453         clip : function(){
 454             var me = this,
 455                 dom = me.dom;
 456
 457             if(!data(dom, ISCLIPPED)){
 458                 data(dom, ISCLIPPED, true);
 459                 data(dom, ORIGINALCLIP, {
 460                     o: me.getStyle(OVERFLOW),
 461                     x: me.getStyle(OVERFLOWX),
 462                     y: me.getStyle(OVERFLOWY)
 463                 });
 464                 me.setStyle(OVERFLOW, HIDDEN);
 465                 me.setStyle(OVERFLOWX, HIDDEN);
 466                 me.setStyle(OVERFLOWY, HIDDEN);
 467             }
 468             return me;
 469         },
 470
 471         <div id="method-Ext.Element-unclip"></div>/**
 472          *  Return clipping (overflow) to original clipping before <tt>{@link #clip}</tt> was called
 473          * @return {Ext.Element} this
 474          */
 475         unclip : function(){
 476             var me = this,
 477                 dom = me.dom;
 478
 479             if(data(dom, ISCLIPPED)){
 480                 data(dom, ISCLIPPED, false);
 481                 var o = data(dom, ORIGINALCLIP);
 482                 if(o.o){
 483                     me.setStyle(OVERFLOW, o.o);
 484                 }
 485                 if(o.x){
 486                     me.setStyle(OVERFLOWX, o.x);
 487                 }
 488                 if(o.y){
 489                     me.setStyle(OVERFLOWY, o.y);
 490                 }
 491             }
 492             return me;
 493         },
 494
 495         // private
 496         addStyles : function(sides, styles){
 497             var ttlSize = 0,
 498                 sidesArr = sides.match(wordsRe),
 499                 side,
 500                 size,
 501                 i,
 502                 len = sidesArr.length;
 503             for (i = 0; i < len; i++) {
 504                 side = sidesArr[i];
 505                 size = side && parseInt(this.getStyle(styles[side]), 10);
 506                 if (size) {
 507                     ttlSize += MATH.abs(size);
 508                 }
 509             }
 510             return ttlSize;
 511         },
 512
 513         margins : margins
 514     }
 515 }()
 516 );
 517 </pre>
 518 </body>
 519 </html>