docs/source/Element.style.html

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