Upgrade to ExtJS 3.0.3 - Released 10/11/2009
[extjs.git] / docs / source / Element.style.html
index 92c13c0..cc55a13 100644 (file)
-<html>\r
-<head>\r
-  <title>The source code</title>\r
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body  onload="prettyPrint();">\r
-    <pre class="prettyprint lang-js">/**\r
- * @class Ext.Element\r
- */\r
-Ext.Element.addMethods(function(){  \r
-    // local style camelizing for speed\r
-    var propCache = {},\r
-        camelRe = /(-[a-z])/gi,\r
-        classReCache = {},\r
-        view = document.defaultView,\r
-        propFloat = Ext.isIE ? 'styleFloat' : 'cssFloat',\r
-        opacityRe = /alpha\(opacity=(.*)\)/i,\r
-        trimRe = /^\s+|\s+$/g,\r
-        EL = Ext.Element,   \r
-        PADDING = "padding",\r
-        MARGIN = "margin",\r
-        BORDER = "border",\r
-        LEFT = "-left",\r
-        RIGHT = "-right",\r
-        TOP = "-top",\r
-        BOTTOM = "-bottom",\r
-        WIDTH = "-width",    \r
-        MATH = Math,\r
-        HIDDEN = 'hidden',\r
-        ISCLIPPED = 'isClipped',\r
-        OVERFLOW = 'overflow',\r
-        OVERFLOWX = 'overflow-x',\r
-        OVERFLOWY = 'overflow-y',\r
-        ORIGINALCLIP = 'originalClip',\r
-        // special markup used throughout Ext when box wrapping elements    \r
-        borders = {l: BORDER + LEFT + WIDTH, r: BORDER + RIGHT + WIDTH, t: BORDER + TOP + WIDTH, b: BORDER + BOTTOM + WIDTH},\r
-        paddings = {l: PADDING + LEFT, r: PADDING + RIGHT, t: PADDING + TOP, b: PADDING + BOTTOM},\r
-        margins = {l: MARGIN + LEFT, r: MARGIN + RIGHT, t: MARGIN + TOP, b: MARGIN + BOTTOM},\r
-        data = Ext.Element.data;\r
-        \r
-    \r
-    // private  \r
-    function camelFn(m, a) {\r
-        return a.charAt(1).toUpperCase();\r
-    }\r
-    \r
-    // private (needs to be called => addStyles.call(this, sides, styles))\r
-    function addStyles(sides, styles){\r
-        var val = 0;    \r
-        \r
-        Ext.each(sides.match(/\w/g), function(s) {\r
-            if (s = parseInt(this.getStyle(styles[s]), 10)) {\r
-                val += MATH.abs(s);      \r
-            }\r
-        },\r
-        this);\r
-        return val;\r
-    }\r
-\r
-    function chkCache(prop) {\r
-        return propCache[prop] || (propCache[prop] = prop == 'float' ? propFloat : prop.replace(camelRe, camelFn));\r
-\r
-    }\r
-            \r
-    return {    \r
-        // private  ==> used by Fx  \r
-        adjustWidth : function(width) {\r
-            var me = this;\r
-            var isNum = (typeof width == "number");\r
-            if(isNum && me.autoBoxAdjust && !me.isBorderBox()){\r
-               width -= (me.getBorderWidth("lr") + me.getPadding("lr"));\r
-            }\r
-            return (isNum && width < 0) ? 0 : width;\r
-        },\r
-        \r
-        // private   ==> used by Fx \r
-        adjustHeight : function(height) {\r
-            var me = this;\r
-            var isNum = (typeof height == "number");\r
-            if(isNum && me.autoBoxAdjust && !me.isBorderBox()){\r
-               height -= (me.getBorderWidth("tb") + me.getPadding("tb"));               \r
-            }\r
-            return (isNum && height < 0) ? 0 : height;\r
-        },\r
-    \r
-    \r
-        <div id="method-Ext.Element-addClass"></div>/**\r
-         * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.\r
-         * @param {String/Array} className The CSS class to add, or an array of classes\r
-         * @return {Ext.Element} this\r
-         */\r
-        addClass : function(className){\r
-            var me = this;\r
-            Ext.each(className, function(v) {\r
-                me.dom.className += (!me.hasClass(v) && v ? " " + v : "");  \r
-            });\r
-            return me;\r
-        },\r
-    \r
-        <div id="method-Ext.Element-radioClass"></div>/**\r
-         * Adds one or more CSS classes to this element and removes the same class(es) from all siblings.\r
-         * @param {String/Array} className The CSS class to add, or an array of classes\r
-         * @return {Ext.Element} this\r
-         */\r
-        radioClass : function(className){\r
-            Ext.each(this.dom.parentNode.childNodes, function(v) {\r
-                if(v.nodeType == 1) {\r
-                    Ext.fly(v, '_internal').removeClass(className);          \r
-                }\r
-            });\r
-            return this.addClass(className);\r
-        },\r
-    \r
-        <div id="method-Ext.Element-removeClass"></div>/**\r
-         * Removes one or more CSS classes from the element.\r
-         * @param {String/Array} className The CSS class to remove, or an array of classes\r
-         * @return {Ext.Element} this\r
-         */\r
-        removeClass : function(className){\r
-            var me = this;\r
-            if (me.dom.className) {\r
-                Ext.each(className, function(v) {               \r
-                    me.dom.className = me.dom.className.replace(\r
-                        classReCache[v] = classReCache[v] || new RegExp('(?:^|\\s+)' + v + '(?:\\s+|$)', "g"), \r
-                        " ");               \r
-                });    \r
-            }\r
-            return me;\r
-        },\r
-    \r
-        <div id="method-Ext.Element-toggleClass"></div>/**\r
-         * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).\r
-         * @param {String} className The CSS class to toggle\r
-         * @return {Ext.Element} this\r
-         */\r
-        toggleClass : function(className){\r
-            return this.hasClass(className) ? this.removeClass(className) : this.addClass(className);\r
-        },\r
-    \r
-        <div id="method-Ext.Element-hasClass"></div>/**\r
-         * Checks if the specified CSS class exists on this element's DOM node.\r
-         * @param {String} className The CSS class to check for\r
-         * @return {Boolean} True if the class exists, else false\r
-         */\r
-        hasClass : function(className){\r
-            return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;\r
-        },\r
-    \r
-        <div id="method-Ext.Element-replaceClass"></div>/**\r
-         * Replaces a CSS class on the element with another.  If the old name does not exist, the new name will simply be added.\r
-         * @param {String} oldClassName The CSS class to replace\r
-         * @param {String} newClassName The replacement CSS class\r
-         * @return {Ext.Element} this\r
-         */\r
-        replaceClass : function(oldClassName, newClassName){\r
-            return this.removeClass(oldClassName).addClass(newClassName);\r
-        },\r
-        \r
-        isStyle : function(style, val) {\r
-            return this.getStyle(style) == val;  \r
-        },\r
-    \r
-        <div id="method-Ext.Element-getStyle"></div>/**\r
-         * Normalizes currentStyle and computedStyle.\r
-         * @param {String} property The style property whose value is returned.\r
-         * @return {String} The current value of the style property for this element.\r
-         */\r
-        getStyle : function(){         \r
-            return view && view.getComputedStyle ?\r
-                function(prop){\r
-                    var el = this.dom,\r
-                        v,                  \r
-                        cs;\r
-                    if(el == document) return null;\r
-                    prop = chkCache(prop);\r
-                    return (v = el.style[prop]) ? v : \r
-                           (cs = view.getComputedStyle(el, "")) ? cs[prop] : null;\r
-                } :\r
-                function(prop){      \r
-                    var el = this.dom, \r
-                        m, \r
-                        cs;     \r
-                        \r
-                    if(el == document) return null;      \r
-                    if (prop == 'opacity') {\r
-                        if (el.style.filter.match) {                       \r
-                            if(m = el.style.filter.match(opacityRe)){\r
-                                var fv = parseFloat(m[1]);\r
-                                if(!isNaN(fv)){\r
-                                    return fv ? fv / 100 : 0;\r
-                                }\r
-                            }\r
-                        }\r
-                        return 1;\r
-                    }\r
-                    prop = chkCache(prop);  \r
-                    return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);\r
-                };\r
-        }(),\r
-        \r
-        <div id="method-Ext.Element-getColor"></div>/**\r
-         * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values\r
-         * are convert to standard 6 digit hex color.\r
-         * @param {String} attr The css attribute\r
-         * @param {String} defaultValue The default value to use when a valid color isn't found\r
-         * @param {String} prefix (optional) defaults to #. Use an empty string when working with\r
-         * color anims.\r
-         */\r
-        getColor : function(attr, defaultValue, prefix){\r
-            var v = this.getStyle(attr),\r
-                color = prefix || '#',\r
-                h;\r
-                \r
-            if(!v || /transparent|inherit/.test(v)){\r
-                return defaultValue;\r
-            }\r
-            if(/^r/.test(v)){\r
-                Ext.each(v.slice(4, v.length -1).split(','), function(s){\r
-                    h = parseInt(s, 10);\r
-                    color += (h < 16 ? '0' : '') + h.toString(16); \r
-                });\r
-            }else{\r
-                v = v.replace('#', '');\r
-                color += v.length == 3 ? v.replace(/^(\w)(\w)(\w)$/, '$1$1$2$2$3$3') : v;\r
-            }\r
-            return(color.length > 5 ? color.toLowerCase() : defaultValue);\r
-        },\r
-    \r
-        <div id="method-Ext.Element-setStyle"></div>/**\r
-         * Wrapper for setting style properties, also takes single object parameter of multiple styles.\r
-         * @param {String/Object} property The style property to be set, or an object of multiple styles.\r
-         * @param {String} value (optional) The value to apply to the given property, or null if an object was passed.\r
-         * @return {Ext.Element} this\r
-         */\r
-        setStyle : function(prop, value){\r
-            var tmp, \r
-                style,\r
-                camel;\r
-            if (!Ext.isObject(prop)) {\r
-                tmp = {};\r
-                tmp[prop] = value;          \r
-                prop = tmp;\r
-            }\r
-            for (style in prop) {\r
-                value = prop[style];            \r
-                style == 'opacity' ? \r
-                    this.setOpacity(value) : \r
-                    this.dom.style[chkCache(style)] = value;\r
-            }\r
-            return this;\r
-        },\r
-        \r
-        <div id="method-Ext.Element-setOpacity"></div>/**\r
-         * Set the opacity of the element\r
-         * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc\r
-         * @param {Boolean/Object} animate (optional) a standard Element animation config object or <tt>true</tt> for\r
-         * the default animation (<tt>{duration: .35, easing: 'easeIn'}</tt>)\r
-         * @return {Ext.Element} this\r
-         */\r
-         setOpacity : function(opacity, animate){\r
-            var me = this,\r
-                s = me.dom.style;\r
-                \r
-            if(!animate || !me.anim){            \r
-                if(Ext.isIE){\r
-                    var opac = opacity < 1 ? 'alpha(opacity=' + opacity * 100 + ')' : '', \r
-                    val = s.filter.replace(opacityRe, '').replace(trimRe, '');\r
-\r
-                    s.zoom = 1;\r
-                    s.filter = val + (val.length > 0 ? ' ' : '') + opac;\r
-                }else{\r
-                    s.opacity = opacity;\r
-                }\r
-            }else{\r
-                me.anim({opacity: {to: opacity}}, me.preanim(arguments, 1), null, .35, 'easeIn');\r
-            }\r
-            return me;\r
-        },\r
-        \r
-        <div id="method-Ext.Element-clearOpacity"></div>/**\r
-         * Clears any opacity settings from this element. Required in some cases for IE.\r
-         * @return {Ext.Element} this\r
-         */\r
-        clearOpacity : function(){\r
-            var style = this.dom.style;\r
-            if(Ext.isIE){\r
-                if(!Ext.isEmpty(style.filter)){\r
-                    style.filter = style.filter.replace(opacityRe, '').replace(trimRe, '');\r
-                }\r
-            }else{\r
-                style.opacity = style['-moz-opacity'] = style['-khtml-opacity'] = '';\r
-            }\r
-            return this;\r
-        },\r
-    \r
-        <div id="method-Ext.Element-getHeight"></div>/**\r
-         * Returns the offset height of the element\r
-         * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding\r
-         * @return {Number} The element's height\r
-         */\r
-        getHeight : function(contentHeight){\r
-            var me = this,\r
-                dom = me.dom,\r
-                h = MATH.max(dom.offsetHeight, dom.clientHeight) || 0;\r
-            h = !contentHeight ? h : h - me.getBorderWidth("tb") - me.getPadding("tb");\r
-            return h < 0 ? 0 : h;\r
-        },\r
-    \r
-        <div id="method-Ext.Element-getWidth"></div>/**\r
-         * Returns the offset width of the element\r
-         * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding\r
-         * @return {Number} The element's width\r
-         */\r
-        getWidth : function(contentWidth){\r
-            var me = this,\r
-                dom = me.dom,\r
-                w = MATH.max(dom.offsetWidth, dom.clientWidth) || 0;\r
-            w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr");\r
-            return w < 0 ? 0 : w;\r
-        },\r
-    \r
-        <div id="method-Ext.Element-setWidth"></div>/**\r
-         * Set the width of this Element.\r
-         * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>\r
-         * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>\r
-         * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.\r
-         * </ul></div>\r
-         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
-         * @return {Ext.Element} this\r
-         */\r
-        setWidth : function(width, animate){\r
-            var me = this;\r
-            width = me.adjustWidth(width);\r
-            !animate || !me.anim ? \r
-                me.dom.style.width = me.addUnits(width) :\r
-                me.anim({width : {to : width}}, me.preanim(arguments, 1));\r
-            return me;\r
-        },\r
-    \r
-        <div id="method-Ext.Element-setHeight"></div>/**\r
-         * Set the height of this Element.\r
-         * <pre><code>\r
-// change the height to 200px and animate with default configuration\r
-Ext.fly('elementId').setHeight(200, true);\r
-\r
-// change the height to 150px and animate with a custom configuration\r
-Ext.fly('elId').setHeight(150, {\r
-    duration : .5, // animation will have a duration of .5 seconds\r
-    // will change the content to "finished"\r
-    callback: function(){ this.{@link #update}("finished"); } \r
-});\r
-         * </code></pre>\r
-         * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>\r
-         * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels.)</li>\r
-         * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>\r
-         * </ul></div>\r
-         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
-         * @return {Ext.Element} this\r
-         */\r
-         setHeight : function(height, animate){\r
-            var me = this;\r
-            height = me.adjustHeight(height);\r
-            !animate || !me.anim ? \r
-                me.dom.style.height = me.addUnits(height) :\r
-                me.anim({height : {to : height}}, me.preanim(arguments, 1));\r
-            return me;\r
-        },\r
-        \r
-        <div id="method-Ext.Element-getBorderWidth"></div>/**\r
-         * Gets the width of the border(s) for the specified side(s)\r
-         * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,\r
-         * 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
-         * @return {Number} The width of the sides passed added together\r
-         */\r
-        getBorderWidth : function(side){\r
-            return addStyles.call(this, side, borders);\r
-        },\r
-    \r
-        <div id="method-Ext.Element-getPadding"></div>/**\r
-         * Gets the width of the padding(s) for the specified side(s)\r
-         * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,\r
-         * passing <tt>'lr'</tt> would get the padding <b><u>l</u></b>eft + the padding <b><u>r</u></b>ight.\r
-         * @return {Number} The padding of the sides passed added together\r
-         */\r
-        getPadding : function(side){\r
-            return addStyles.call(this, side, paddings);\r
-        },\r
-    \r
-        <div id="method-Ext.Element-clip"></div>/**\r
-         *  Store the current overflow setting and clip overflow on the element - use <tt>{@link #unclip}</tt> to remove\r
-         * @return {Ext.Element} this\r
-         */\r
-        clip : function(){\r
-            var me = this,\r
-                dom = me.dom;\r
-                \r
-            if(!data(dom, ISCLIPPED)){\r
-                data(dom, ISCLIPPED, true);\r
-                data(dom, ORIGINALCLIP, {\r
-                    o: me.getStyle(OVERFLOW),\r
-                    x: me.getStyle(OVERFLOWX),\r
-                    y: me.getStyle(OVERFLOWY)\r
-                });\r
-                me.setStyle(OVERFLOW, HIDDEN);\r
-                me.setStyle(OVERFLOWX, HIDDEN);\r
-                me.setStyle(OVERFLOWY, HIDDEN);\r
-            }\r
-            return me;\r
-        },\r
-    \r
-        <div id="method-Ext.Element-unclip"></div>/**\r
-         *  Return clipping (overflow) to original clipping before <tt>{@link #clip}</tt> was called\r
-         * @return {Ext.Element} this\r
-         */\r
-        unclip : function(){\r
-            var me = this,\r
-                dom = me.dom;\r
-                \r
-            if(data(dom, ISCLIPPED)){\r
-                data(dom, ISCLIPPED, false);\r
-                var o = data(dom, ORIGINALCLIP);\r
-                if(o.o){\r
-                    me.setStyle(OVERFLOW, o.o);\r
-                }\r
-                if(o.x){\r
-                    me.setStyle(OVERFLOWX, o.x);\r
-                }\r
-                if(o.y){\r
-                    me.setStyle(OVERFLOWY, o.y);\r
-                }\r
-            }\r
-            return me;\r
-        },\r
-        \r
-        addStyles : addStyles,\r
-        margins : margins\r
-    }\r
-}()         \r
-);</pre>    \r
-</body>\r
+<html>
+<head>
+  <title>The source code</title>
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+</head>
+<body  onload="prettyPrint();">
+    <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.0.3
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/**
+ * @class Ext.Element
+ */
+Ext.Element.addMethods(function(){  
+    // local style camelizing for speed
+    var propCache = {},
+        camelRe = /(-[a-z])/gi,
+        classReCache = {},
+        view = document.defaultView,
+        propFloat = Ext.isIE ? 'styleFloat' : 'cssFloat',
+        opacityRe = /alpha\(opacity=(.*)\)/i,
+        trimRe = /^\s+|\s+$/g,
+        EL = Ext.Element,   
+        PADDING = "padding",
+        MARGIN = "margin",
+        BORDER = "border",
+        LEFT = "-left",
+        RIGHT = "-right",
+        TOP = "-top",
+        BOTTOM = "-bottom",
+        WIDTH = "-width",    
+        MATH = Math,
+        HIDDEN = 'hidden',
+        ISCLIPPED = 'isClipped',
+        OVERFLOW = 'overflow',
+        OVERFLOWX = 'overflow-x',
+        OVERFLOWY = 'overflow-y',
+        ORIGINALCLIP = 'originalClip',
+        // special markup used throughout Ext when box wrapping elements    
+        borders = {l: BORDER + LEFT + WIDTH, r: BORDER + RIGHT + WIDTH, t: BORDER + TOP + WIDTH, b: BORDER + BOTTOM + WIDTH},
+        paddings = {l: PADDING + LEFT, r: PADDING + RIGHT, t: PADDING + TOP, b: PADDING + BOTTOM},
+        margins = {l: MARGIN + LEFT, r: MARGIN + RIGHT, t: MARGIN + TOP, b: MARGIN + BOTTOM},
+        data = Ext.Element.data;
+        
+    
+    // private  
+    function camelFn(m, a) {
+        return a.charAt(1).toUpperCase();
+    }
+    
+    function chkCache(prop) {
+        return propCache[prop] || (propCache[prop] = prop == 'float' ? propFloat : prop.replace(camelRe, camelFn));
+    }
+            
+    return {
+        // private  ==> used by Fx  
+        adjustWidth : function(width) {
+            var me = this;
+            var isNum = Ext.isNumber(width);
+            if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
+               width -= (me.getBorderWidth("lr") + me.getPadding("lr"));
+            }
+            return (isNum && width < 0) ? 0 : width;
+        },
+        
+        // private   ==> used by Fx 
+        adjustHeight : function(height) {
+            var me = this;
+            var isNum = Ext.isNumber(height);
+            if(isNum && me.autoBoxAdjust && !me.isBorderBox()){
+               height -= (me.getBorderWidth("tb") + me.getPadding("tb"));               
+            }
+            return (isNum && height < 0) ? 0 : height;
+        },
+    
+    
+        <div id="method-Ext.Element-addClass"></div>/**
+         * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
+         * @param {String/Array} className The CSS class to add, or an array of classes
+         * @return {Ext.Element} this
+         */
+        addClass : function(className){
+            var me = this;
+            Ext.each(className, function(v) {
+                me.dom.className += (!me.hasClass(v) && v ? " " + v : "");  
+            });
+            return me;
+        },
+    
+        <div id="method-Ext.Element-radioClass"></div>/**
+         * Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
+         * @param {String/Array} className The CSS class to add, or an array of classes
+         * @return {Ext.Element} this
+         */
+        radioClass : function(className){
+            Ext.each(this.dom.parentNode.childNodes, function(v) {
+                if(v.nodeType == 1) {
+                    Ext.fly(v, '_internal').removeClass(className);          
+                }
+            });
+            return this.addClass(className);
+        },
+    
+        <div id="method-Ext.Element-removeClass"></div>/**
+         * Removes one or more CSS classes from the element.
+         * @param {String/Array} className The CSS class to remove, or an array of classes
+         * @return {Ext.Element} this
+         */
+        removeClass : function(className){
+            var me = this;
+            if (me.dom && me.dom.className) {
+                Ext.each(className, function(v) {               
+                    me.dom.className = me.dom.className.replace(
+                        classReCache[v] = classReCache[v] || new RegExp('(?:^|\\s+)' + v + '(?:\\s+|$)', "g"), 
+                        " ");               
+                });    
+            }
+            return me;
+        },
+    
+        <div id="method-Ext.Element-toggleClass"></div>/**
+         * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
+         * @param {String} className The CSS class to toggle
+         * @return {Ext.Element} this
+         */
+        toggleClass : function(className){
+            return this.hasClass(className) ? this.removeClass(className) : this.addClass(className);
+        },
+    
+        <div id="method-Ext.Element-hasClass"></div>/**
+         * Checks if the specified CSS class exists on this element's DOM node.
+         * @param {String} className The CSS class to check for
+         * @return {Boolean} True if the class exists, else false
+         */
+        hasClass : function(className){
+            return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;
+        },
+    
+        <div id="method-Ext.Element-replaceClass"></div>/**
+         * Replaces a CSS class on the element with another.  If the old name does not exist, the new name will simply be added.
+         * @param {String} oldClassName The CSS class to replace
+         * @param {String} newClassName The replacement CSS class
+         * @return {Ext.Element} this
+         */
+        replaceClass : function(oldClassName, newClassName){
+            return this.removeClass(oldClassName).addClass(newClassName);
+        },
+        
+        isStyle : function(style, val) {
+            return this.getStyle(style) == val;  
+        },
+    
+        <div id="method-Ext.Element-getStyle"></div>/**
+         * Normalizes currentStyle and computedStyle.
+         * @param {String} property The style property whose value is returned.
+         * @return {String} The current value of the style property for this element.
+         */
+        getStyle : function(){         
+            return view && view.getComputedStyle ?
+                function(prop){
+                    var el = this.dom,
+                        v,                  
+                        cs,
+                        out;
+                    if(el == document) return null;
+                    prop = chkCache(prop);
+                    out = (v = el.style[prop]) ? v : 
+                           (cs = view.getComputedStyle(el, "")) ? cs[prop] : null;
+                    
+                    // Webkit returns rgb values for transparent.
+                    if(Ext.isWebKit && out == 'rgba(0, 0, 0, 0)'){
+                        out = 'transparent';
+                    }
+                    return out;
+                } :
+                function(prop){      
+                    var el = this.dom, 
+                        m, 
+                        cs;     
+                        
+                    if(el == document) return null;      
+                    if (prop == 'opacity') {
+                        if (el.style.filter.match) {                       
+                            if(m = el.style.filter.match(opacityRe)){
+                                var fv = parseFloat(m[1]);
+                                if(!isNaN(fv)){
+                                    return fv ? fv / 100 : 0;
+                                }
+                            }
+                        }
+                        return 1;
+                    }
+                    prop = chkCache(prop);  
+                    return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
+                };
+        }(),
+
+        <div id="method-Ext.Element-getColor"></div>/**
+         * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
+         * are convert to standard 6 digit hex color.
+         * @param {String} attr The css attribute
+         * @param {String} defaultValue The default value to use when a valid color isn't found
+         * @param {String} prefix (optional) defaults to #. Use an empty string when working with
+         * color anims.
+         */
+        getColor : function(attr, defaultValue, prefix){
+            var v = this.getStyle(attr),
+                color = Ext.isDefined(prefix) ? prefix : '#',
+                h;
+                
+            if(!v || /transparent|inherit/.test(v)){
+                return defaultValue;
+            }
+            if(/^r/.test(v)){
+                Ext.each(v.slice(4, v.length -1).split(','), function(s){
+                    h = parseInt(s, 10);
+                    color += (h < 16 ? '0' : '') + h.toString(16); 
+                });
+            }else{
+                v = v.replace('#', '');
+                color += v.length == 3 ? v.replace(/^(\w)(\w)(\w)$/, '$1$1$2$2$3$3') : v;
+            }
+            return(color.length > 5 ? color.toLowerCase() : defaultValue);
+        },
+    
+        <div id="method-Ext.Element-setStyle"></div>/**
+         * Wrapper for setting style properties, also takes single object parameter of multiple styles.
+         * @param {String/Object} property The style property to be set, or an object of multiple styles.
+         * @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
+         * @return {Ext.Element} this
+         */
+        setStyle : function(prop, value){
+            var tmp, 
+                style,
+                camel;
+            if (!Ext.isObject(prop)) {
+                tmp = {};
+                tmp[prop] = value;          
+                prop = tmp;
+            }
+            for (style in prop) {
+                value = prop[style];            
+                style == 'opacity' ? 
+                    this.setOpacity(value) : 
+                    this.dom.style[chkCache(style)] = value;
+            }
+            return this;
+        },
+        
+        <div id="method-Ext.Element-setOpacity"></div>/**
+         * Set the opacity of the element
+         * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
+         * @param {Boolean/Object} animate (optional) a standard Element animation config object or <tt>true</tt> for
+         * the default animation (<tt>{duration: .35, easing: 'easeIn'}</tt>)
+         * @return {Ext.Element} this
+         */
+         setOpacity : function(opacity, animate){
+            var me = this,
+                s = me.dom.style;
+                
+            if(!animate || !me.anim){            
+                if(Ext.isIE){
+                    var opac = opacity < 1 ? 'alpha(opacity=' + opacity * 100 + ')' : '', 
+                    val = s.filter.replace(opacityRe, '').replace(trimRe, '');
+
+                    s.zoom = 1;
+                    s.filter = val + (val.length > 0 ? ' ' : '') + opac;
+                }else{
+                    s.opacity = opacity;
+                }
+            }else{
+                me.anim({opacity: {to: opacity}}, me.preanim(arguments, 1), null, .35, 'easeIn');
+            }
+            return me;
+        },
+        
+        <div id="method-Ext.Element-clearOpacity"></div>/**
+         * Clears any opacity settings from this element. Required in some cases for IE.
+         * @return {Ext.Element} this
+         */
+        clearOpacity : function(){
+            var style = this.dom.style;
+            if(Ext.isIE){
+                if(!Ext.isEmpty(style.filter)){
+                    style.filter = style.filter.replace(opacityRe, '').replace(trimRe, '');
+                }
+            }else{
+                style.opacity = style['-moz-opacity'] = style['-khtml-opacity'] = '';
+            }
+            return this;
+        },
+    
+        <div id="method-Ext.Element-getHeight"></div>/**
+         * Returns the offset height of the element
+         * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding
+         * @return {Number} The element's height
+         */
+        getHeight : function(contentHeight){
+            var me = this,
+                dom = me.dom,
+                hidden = Ext.isIE && me.isStyle('display', 'none'),
+                h = MATH.max(dom.offsetHeight, hidden ? 0 : dom.clientHeight) || 0;
+                
+            h = !contentHeight ? h : h - me.getBorderWidth("tb") - me.getPadding("tb");
+            return h < 0 ? 0 : h;
+        },
+    
+        <div id="method-Ext.Element-getWidth"></div>/**
+         * Returns the offset width of the element
+         * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding
+         * @return {Number} The element's width
+         */
+        getWidth : function(contentWidth){
+            var me = this,
+                dom = me.dom,
+                hidden = Ext.isIE && me.isStyle('display', 'none'),
+                w = MATH.max(dom.offsetWidth, hidden ? 0 : dom.clientWidth) || 0;
+            w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr");
+            return w < 0 ? 0 : w;
+        },
+    
+        <div id="method-Ext.Element-setWidth"></div>/**
+         * Set the width of this Element.
+         * @param {Mixed} width The new width. This may be one of:<div class="mdetail-params"><ul>
+         * <li>A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).</li>
+         * <li>A String used to set the CSS width style. Animation may <b>not</b> be used.
+         * </ul></div>
+         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+         * @return {Ext.Element} this
+         */
+        setWidth : function(width, animate){
+            var me = this;
+            width = me.adjustWidth(width);
+            !animate || !me.anim ? 
+                me.dom.style.width = me.addUnits(width) :
+                me.anim({width : {to : width}}, me.preanim(arguments, 1));
+            return me;
+        },
+    
+        <div id="method-Ext.Element-setHeight"></div>/**
+         * Set the height of this Element.
+         * <pre><code>
+// change the height to 200px and animate with default configuration
+Ext.fly('elementId').setHeight(200, true);
+
+// change the height to 150px and animate with a custom configuration
+Ext.fly('elId').setHeight(150, {
+    duration : .5, // animation will have a duration of .5 seconds
+    // will change the content to "finished"
+    callback: function(){ this.{@link #update}("finished"); } 
+});
+         * </code></pre>
+         * @param {Mixed} height The new height. This may be one of:<div class="mdetail-params"><ul>
+         * <li>A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels.)</li>
+         * <li>A String used to set the CSS height style. Animation may <b>not</b> be used.</li>
+         * </ul></div>
+         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+         * @return {Ext.Element} this
+         */
+         setHeight : function(height, animate){
+            var me = this;
+            height = me.adjustHeight(height);
+            !animate || !me.anim ? 
+                me.dom.style.height = me.addUnits(height) :
+                me.anim({height : {to : height}}, me.preanim(arguments, 1));
+            return me;
+        },
+        
+        <div id="method-Ext.Element-getBorderWidth"></div>/**
+         * Gets the width of the border(s) for the specified side(s)
+         * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
+         * passing <tt>'lr'</tt> would get the border <b><u>l</u></b>eft width + the border <b><u>r</u></b>ight width.
+         * @return {Number} The width of the sides passed added together
+         */
+        getBorderWidth : function(side){
+            return this.addStyles(side, borders);
+        },
+    
+        <div id="method-Ext.Element-getPadding"></div>/**
+         * Gets the width of the padding(s) for the specified side(s)
+         * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
+         * passing <tt>'lr'</tt> would get the padding <b><u>l</u></b>eft + the padding <b><u>r</u></b>ight.
+         * @return {Number} The padding of the sides passed added together
+         */
+        getPadding : function(side){
+            return this.addStyles(side, paddings);
+        },
+    
+        <div id="method-Ext.Element-clip"></div>/**
+         *  Store the current overflow setting and clip overflow on the element - use <tt>{@link #unclip}</tt> to remove
+         * @return {Ext.Element} this
+         */
+        clip : function(){
+            var me = this,
+                dom = me.dom;
+                
+            if(!data(dom, ISCLIPPED)){
+                data(dom, ISCLIPPED, true);
+                data(dom, ORIGINALCLIP, {
+                    o: me.getStyle(OVERFLOW),
+                    x: me.getStyle(OVERFLOWX),
+                    y: me.getStyle(OVERFLOWY)
+                });
+                me.setStyle(OVERFLOW, HIDDEN);
+                me.setStyle(OVERFLOWX, HIDDEN);
+                me.setStyle(OVERFLOWY, HIDDEN);
+            }
+            return me;
+        },
+    
+        <div id="method-Ext.Element-unclip"></div>/**
+         *  Return clipping (overflow) to original clipping before <tt>{@link #clip}</tt> was called
+         * @return {Ext.Element} this
+         */
+        unclip : function(){
+            var me = this,
+                dom = me.dom;
+                
+            if(data(dom, ISCLIPPED)){
+                data(dom, ISCLIPPED, false);
+                var o = data(dom, ORIGINALCLIP);
+                if(o.o){
+                    me.setStyle(OVERFLOW, o.o);
+                }
+                if(o.x){
+                    me.setStyle(OVERFLOWX, o.x);
+                }
+                if(o.y){
+                    me.setStyle(OVERFLOWY, o.y);
+                }
+            }
+            return me;
+        },
+
+        // private
+        addStyles : function(sides, styles){
+            var val = 0;
+
+            Ext.each(sides.match(/\w/g), function(s) {
+                if (s = parseInt(this.getStyle(styles[s]), 10)) {
+                    val += MATH.abs(s);
+                }
+            },
+            this);
+            return val;
+        },
+
+        margins : margins
+    }
+}()         
+);
+</pre>
+</body>
 </html>
\ No newline at end of file