docs/source/Element.style.html

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