Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Element.style.html
index cc55a13..029c8f1 100644 (file)
@@ -1,37 +1,42 @@
+<!DOCTYPE html>
 <html>
 <head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <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>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </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
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-Element'>/**
+</span> * @class Ext.Element
  */
-Ext.Element.addMethods(function(){  
+(function(){
     // local style camelizing for speed
-    var propCache = {},
-        camelRe = /(-[a-z])/gi,
-        classReCache = {},
+    var ELEMENT = Ext.Element,
+        supports = Ext.supports,
         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",    
+        spacesRe = /\s+/,
+        wordsRe = /\w/g,
+        adjustDirect2DTableRe = /table-row|table-.*-group/,
+        INTERNAL = '_internal',
+        PADDING = 'padding',
+        MARGIN = 'margin',
+        BORDER = 'border',
+        LEFT = '-left',
+        RIGHT = '-right',
+        TOP = '-top',
+        BOTTOM = '-bottom',
+        WIDTH = '-width',
         MATH = Math,
         HIDDEN = 'hidden',
         ISCLIPPED = 'isClipped',
@@ -39,167 +44,286 @@ Ext.Element.addMethods(function(){
         OVERFLOWX = 'overflow-x',
         OVERFLOWY = 'overflow-y',
         ORIGINALCLIP = 'originalClip',
-        // special markup used throughout Ext when box wrapping elements    
+        // 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  
+        data = ELEMENT.data;
+
+    ELEMENT.boxMarkup = '&lt;div class=&quot;{0}-tl&quot;&gt;&lt;div class=&quot;{0}-tr&quot;&gt;&lt;div class=&quot;{0}-tc&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;{0}-ml&quot;&gt;&lt;div class=&quot;{0}-mr&quot;&gt;&lt;div class=&quot;{0}-mc&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;{0}-bl&quot;&gt;&lt;div class=&quot;{0}-br&quot;&gt;&lt;div class=&quot;{0}-bc&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
+
+    // These property values are read from the parentNode if they cannot be read
+    // from the child:
+    ELEMENT.inheritedProps = {
+        fontSize: 1,
+        fontStyle: 1,
+        opacity: 1
+    };
+
+    Ext.override(ELEMENT, {
+
+<span id='Ext-Element-method-adjustWidth'>        /**
+</span>         * TODO: Look at this
+         */
+        // private  ==&gt; 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"));
+            var me = this,
+                isNum = (typeof width == 'number');
+
+            if(isNum &amp;&amp; me.autoBoxAdjust &amp;&amp; !me.isBorderBox()){
+               width -= (me.getBorderWidth(&quot;lr&quot;) + me.getPadding(&quot;lr&quot;));
             }
-            return (isNum && width < 0) ? 0 : width;
+            return (isNum &amp;&amp; width &lt; 0) ? 0 : width;
         },
-        
-        // private   ==> used by Fx 
+
+        // private   ==&gt; 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"));               
+            var me = this,
+                isNum = (typeof height == &quot;number&quot;);
+
+            if(isNum &amp;&amp; me.autoBoxAdjust &amp;&amp; !me.isBorderBox()){
+               height -= (me.getBorderWidth(&quot;tb&quot;) + me.getPadding(&quot;tb&quot;));
             }
-            return (isNum && height < 0) ? 0 : height;
+            return (isNum &amp;&amp; height &lt; 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
+
+
+<span id='Ext-Element-method-addCls'>        /**
+</span>         * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
+         * @param {String/String[]} className The CSS classes to add separated by space, 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 : "");  
-            });
+        addCls : function(className){
+            var me = this,
+                cls = [],
+                space = ((me.dom.className.replace(trimRe, '') == '') ? &quot;&quot; : &quot; &quot;),
+                i, len, v;
+            if (className === undefined) {
+                return me;
+            }
+            // Separate case is for speed
+            if (Object.prototype.toString.call(className) !== '[object Array]') {
+                if (typeof className === 'string') {
+                    className = className.replace(trimRe, '').split(spacesRe);
+                    if (className.length === 1) {
+                        className = className[0];
+                        if (!me.hasCls(className)) {
+                            me.dom.className += space + className;
+                        }
+                    } else {
+                        this.addCls(className);
+                    }
+                }
+            } else {
+                for (i = 0, len = className.length; i &lt; len; i++) {
+                    v = className[i];
+                    if (typeof v == 'string' &amp;&amp; (' ' + me.dom.className + ' ').indexOf(' ' + v + ' ') == -1) {
+                        cls.push(v);
+                    }
+                }
+                if (cls.length) {
+                    me.dom.className += space + cls.join(&quot; &quot;);
+                }
+            }
             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
+
+<span id='Ext-Element-method-removeCls'>        /**
+</span>         * Removes one or more CSS classes from the element.
+         * @param {String/String[]} className The CSS classes to remove separated by space, 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);          
+        removeCls : function(className){
+            var me = this,
+                i, idx, len, cls, elClasses;
+            if (className === undefined) {
+                return me;
+            }
+            if (Object.prototype.toString.call(className) !== '[object Array]') {
+                className = className.replace(trimRe, '').split(spacesRe);
+            }
+            if (me.dom &amp;&amp; me.dom.className) {
+                elClasses = me.dom.className.replace(trimRe, '').split(spacesRe);
+                for (i = 0, len = className.length; i &lt; len; i++) {
+                    cls = className[i];
+                    if (typeof cls == 'string') {
+                        cls = cls.replace(trimRe, '');
+                        idx = Ext.Array.indexOf(elClasses, cls);
+                        if (idx != -1) {
+                            Ext.Array.erase(elClasses, idx, 1);
+                        }
+                    }
                 }
-            });
-            return this.addClass(className);
+                me.dom.className = elClasses.join(&quot; &quot;);
+            }
+            return me;
         },
-    
-        <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
+
+<span id='Ext-Element-method-radioCls'>        /**
+</span>         * Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
+         * @param {String/String[]} className The CSS class to add, 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"), 
-                        " ");               
-                });    
+        radioCls : function(className){
+            var cn = this.dom.parentNode.childNodes,
+                v, i, len;
+            className = Ext.isArray(className) ? className : [className];
+            for (i = 0, len = cn.length; i &lt; len; i++) {
+                v = cn[i];
+                if (v &amp;&amp; v.nodeType == 1) {
+                    Ext.fly(v, '_internal').removeCls(className);
+                }
             }
-            return me;
+            return this.addCls(className);
         },
-    
-        <div id="method-Ext.Element-toggleClass"></div>/**
-         * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
+
+<span id='Ext-Element-method-toggleCls'>        /**
+</span>         * 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
+         * @method
          */
-        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.
+        toggleCls : Ext.supports.ClassList ?
+            function(className) {
+                this.dom.classList.toggle(Ext.String.trim(className));
+                return this;
+            } :
+            function(className) {
+                return this.hasCls(className) ? this.removeCls(className) : this.addCls(className);
+            },
+
+<span id='Ext-Element-method-hasCls'>        /**
+</span>         * 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
+         * @method
          */
-        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.
+        hasCls : Ext.supports.ClassList ?
+            function(className) {
+                if (!className) {
+                    return false;
+                }
+                className = className.split(spacesRe);
+                var ln = className.length,
+                    i = 0;
+                for (; i &lt; ln; i++) {
+                    if (className[i] &amp;&amp; this.dom.classList.contains(className[i])) {
+                        return true;
+                    }
+                }
+                return false;
+            } :
+            function(className){
+                return className &amp;&amp; (' ' + this.dom.className + ' ').indexOf(' ' + className + ' ') != -1;
+            },
+
+<span id='Ext-Element-method-replaceCls'>        /**
+</span>         * 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);
+        replaceCls : function(oldClassName, newClassName){
+            return this.removeCls(oldClassName).addCls(newClassName);
         },
-        
+
         isStyle : function(style, val) {
-            return this.getStyle(style) == val;  
+            return this.getStyle(style) == val;
         },
-    
-        <div id="method-Ext.Element-getStyle"></div>/**
-         * Normalizes currentStyle and computedStyle.
+
+<span id='Ext-Element-method-getStyle'>        /**
+</span>         * 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.
+         * @method
          */
-        getStyle : function(){         
-            return view && view.getComputedStyle ?
+        getStyle : function() {
+            return view &amp;&amp; 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)'){
+                        v, cs, out, display, cleaner;
+
+                    if(el == document){
+                        return null;
+                    }
+                    prop = ELEMENT.normalize(prop);
+                    out = (v = el.style[prop]) ? v :
+                           (cs = view.getComputedStyle(el, &quot;&quot;)) ? cs[prop] : null;
+
+                    // Ignore cases when the margin is correctly reported as 0, the bug only shows
+                    // numbers larger.
+                    if(prop == 'marginRight' &amp;&amp; out != '0px' &amp;&amp; !supports.RightMargin){
+                        cleaner = ELEMENT.getRightMarginFixCleaner(el);
+                        display = this.getStyle('display');
+                        el.style.display = 'inline-block';
+                        out = view.getComputedStyle(el, '').marginRight;
+                        el.style.display = display;
+                        cleaner();
+                    }
+
+                    if(prop == 'backgroundColor' &amp;&amp; out == 'rgba(0, 0, 0, 0)' &amp;&amp; !supports.TransparentColor){
                         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;
+                function (prop) {
+                    var el = this.dom,
+                        m, cs;
+
+                    if (el == document) {
+                        return null;
+                    }
+                    prop = ELEMENT.normalize(prop);
+
+                    do {
+                        if (prop == 'opacity') {
+                            if (el.style.filter.match) {
+                                m = el.style.filter.match(opacityRe);
+                                if(m){
+                                    var fv = parseFloat(m[1]);
+                                    if(!isNaN(fv)){
+                                        return fv ? fv / 100 : 0;
+                                    }
                                 }
                             }
+                            return 1;
                         }
-                        return 1;
-                    }
-                    prop = chkCache(prop);  
-                    return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
-                };
+
+                        // the try statement does have a cost, so we avoid it unless we are
+                        // on IE6
+                        if (!Ext.isIE6) {
+                            return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
+                        }
+
+                        try {
+                            return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null);
+                        } catch (e) {
+                            // in some cases, IE6 will throw Invalid Argument for properties
+                            // like fontSize (see in /examples/tabs/tabs.html).
+                        }
+
+                        if (!ELEMENT.inheritedProps[prop]) {
+                            break;
+                        }
+
+                        el = el.parentNode;
+                        // this is _not_ perfect, but we can only hope that the style we
+                        // need is inherited from a parentNode. If not and since IE won't
+                        // give us the info we need, we are never going to be 100% right.
+                    } while (el);
+
+                    //&lt;debug&gt;
+                    Ext.log({
+                        level: 'warn',
+                        msg: 'Failed to get ' + this.dom.id + '.currentStyle.' + prop
+                    });
+                    //&lt;/debug&gt;
+                    return 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
+<span id='Ext-Element-method-getColor'>        /**
+</span>         * 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
@@ -208,82 +332,112 @@ Ext.Element.addMethods(function(){
          */
         getColor : function(attr, defaultValue, prefix){
             var v = this.getStyle(attr),
-                color = Ext.isDefined(prefix) ? prefix : '#',
+                color = prefix || prefix === '' ? prefix : '#',
                 h;
-                
-            if(!v || /transparent|inherit/.test(v)){
+
+            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); 
+                    color += (h &lt; 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);
+            return(color.length &gt; 5 ? color.toLowerCase() : defaultValue);
         },
-    
-        <div id="method-Ext.Element-setStyle"></div>/**
-         * Wrapper for setting style properties, also takes single object parameter of multiple styles.
+
+<span id='Ext-Element-method-setStyle'>        /**
+</span>         * 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)) {
+            var me = this,
+                tmp, style;
+
+            if (!me.dom) {
+                return me;
+            }
+            if (typeof prop === 'string') {
                 tmp = {};
-                tmp[prop] = value;          
+                tmp[prop] = value;
                 prop = tmp;
             }
             for (style in prop) {
-                value = prop[style];            
-                style == 'opacity' ? 
-                    this.setOpacity(value) : 
-                    this.dom.style[chkCache(style)] = value;
+                if (prop.hasOwnProperty(style)) {
+                    value = Ext.value(prop[style], '');
+                    if (style == 'opacity') {
+                        me.setOpacity(value);
+                    }
+                    else {
+                        me.dom.style[ELEMENT.normalize(style)] = value;
+                    }
+                }
             }
-            return this;
+            return me;
         },
-        
-        <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>)
+
+<span id='Ext-Element-method-setOpacity'>        /**
+</span>         * Set the opacity of the element
+         * @param {Number} 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 &lt;tt&gt;true&lt;/tt&gt; for
+         * the default animation (&lt;tt&gt;{duration: .35, easing: 'easeIn'}&lt;/tt&gt;)
          * @return {Ext.Element} this
          */
-         setOpacity : function(opacity, animate){
+        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;
+                dom = me.dom,
+                val,
+                style;
+
+            if (!me.dom) {
+                return me;
+            }
+
+            style = me.dom.style;
+
+            if (!animate || !me.anim) {
+                if (!Ext.supports.Opacity) {
+                    opacity = opacity &lt; 1 ? 'alpha(opacity=' + opacity * 100 + ')': '';
+                    val = style.filter.replace(opacityRe, '').replace(trimRe, '');
+
+                    style.zoom = 1;
+                    style.filter = val + (val.length &gt; 0 ? ' ': '') + opacity;
+                }
+                else {
+                    style.opacity = opacity;
                 }
-            }else{
-                me.anim({opacity: {to: opacity}}, me.preanim(arguments, 1), null, .35, 'easeIn');
+            }
+            else {
+                if (!Ext.isObject(animate)) {
+                    animate = {
+                        duration: 350,
+                        easing: 'ease-in'
+                    };
+                }
+                me.animate(Ext.applyIf({
+                    to: {
+                        opacity: opacity
+                    }
+                },
+                animate));
             }
             return me;
         },
-        
-        <div id="method-Ext.Element-clearOpacity"></div>/**
-         * Clears any opacity settings from this element. Required in some cases for IE.
+
+
+<span id='Ext-Element-method-clearOpacity'>        /**
+</span>         * 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.supports.Opacity){
                 if(!Ext.isEmpty(style.filter)){
                     style.filter = style.filter.replace(opacityRe, '').replace(trimRe, '');
                 }
@@ -292,111 +446,252 @@ Ext.Element.addMethods(function(){
             }
             return this;
         },
-    
-        <div id="method-Ext.Element-getHeight"></div>/**
-         * Returns the offset height of the element
+
+<span id='Ext-Element-method-adjustDirect2DDimension'>        /**
+</span>         * @private
+         * Returns 1 if the browser returns the subpixel dimension rounded to the lowest pixel.
+         * @return {Number} 0 or 1
+         */
+        adjustDirect2DDimension: function(dimension) {
+            var me = this,
+                dom = me.dom,
+                display = me.getStyle('display'),
+                inlineDisplay = dom.style['display'],
+                inlinePosition = dom.style['position'],
+                originIndex = dimension === 'width' ? 0 : 1,
+                floating;
+
+            if (display === 'inline') {
+                dom.style['display'] = 'inline-block';
+            }
+
+            dom.style['position'] = display.match(adjustDirect2DTableRe) ? 'absolute' : 'static';
+
+            // floating will contain digits that appears after the decimal point
+            // if height or width are set to auto we fallback to msTransformOrigin calculation
+            floating = (parseFloat(me.getStyle(dimension)) || parseFloat(dom.currentStyle.msTransformOrigin.split(' ')[originIndex]) * 2) % 1;
+
+            dom.style['position'] = inlinePosition;
+
+            if (display === 'inline') {
+                dom.style['display'] = inlineDisplay;
+            }
+
+            return floating;
+        },
+
+<span id='Ext-Element-method-getHeight'>        /**
+</span>         * 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){
+        getHeight: function(contentHeight, preciseHeight) {
             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
+                hidden = Ext.isIE &amp;&amp; me.isStyle('display', 'none'),
+                height, overflow, style, floating;
+
+            // IE Quirks mode acts more like a max-size measurement unless overflow is hidden during measurement.
+            // We will put the overflow back to it's original value when we are done measuring.
+            if (Ext.isIEQuirks) {
+                style = dom.style;
+                overflow = style.overflow;
+                me.setStyle({ overflow: 'hidden'});
+            }
+
+            height = dom.offsetHeight;
+
+            height = MATH.max(height, hidden ? 0 : dom.clientHeight) || 0;
+
+            // IE9 Direct2D dimension rounding bug
+            if (!hidden &amp;&amp; Ext.supports.Direct2DBug) {
+                floating = me.adjustDirect2DDimension('height');
+                if (preciseHeight) {
+                    height += floating;
+                }
+                else if (floating &gt; 0 &amp;&amp; floating &lt; 0.5) {
+                    height++;
+                }
+            }
+
+            if (contentHeight) {
+                height -= (me.getBorderWidth(&quot;tb&quot;) + me.getPadding(&quot;tb&quot;));
+            }
+
+            if (Ext.isIEQuirks) {
+                me.setStyle({ overflow: overflow});
+            }
+
+            if (height &lt; 0) {
+                height = 0;
+            }
+            return height;
+        },
+
+<span id='Ext-Element-method-getWidth'>        /**
+</span>         * 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){
+        getWidth: function(contentWidth, preciseWidth) {
             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>
+                hidden = Ext.isIE &amp;&amp; me.isStyle('display', 'none'),
+                rect, width, overflow, style, floating, parentPosition;
+
+            // IE Quirks mode acts more like a max-size measurement unless overflow is hidden during measurement.
+            // We will put the overflow back to it's original value when we are done measuring.
+            if (Ext.isIEQuirks) {
+                style = dom.style;
+                overflow = style.overflow;
+                me.setStyle({overflow: 'hidden'});
+            }
+
+            // Fix Opera 10.5x width calculation issues
+            if (Ext.isOpera10_5) {
+                if (dom.parentNode.currentStyle.position === 'relative') {
+                    parentPosition = dom.parentNode.style.position;
+                    dom.parentNode.style.position = 'static';
+                    width = dom.offsetWidth;
+                    dom.parentNode.style.position = parentPosition;
+                }
+                width = Math.max(width || 0, dom.offsetWidth);
+
+            // Gecko will in some cases report an offsetWidth that is actually less than the width of the
+            // text contents, because it measures fonts with sub-pixel precision but rounds the calculated
+            // value down. Using getBoundingClientRect instead of offsetWidth allows us to get the precise
+            // subpixel measurements so we can force them to always be rounded up. See
+            // https://bugzilla.mozilla.org/show_bug.cgi?id=458617
+            } else if (Ext.supports.BoundingClientRect) {
+                rect = dom.getBoundingClientRect();
+                width = rect.right - rect.left;
+                width = preciseWidth ? width : Math.ceil(width);
+            } else {
+                width = dom.offsetWidth;
+            }
+
+            width = MATH.max(width, hidden ? 0 : dom.clientWidth) || 0;
+
+            // IE9 Direct2D dimension rounding bug
+            if (!hidden &amp;&amp; Ext.supports.Direct2DBug) {
+                floating = me.adjustDirect2DDimension('width');
+                if (preciseWidth) {
+                    width += floating;
+                }
+                else if (floating &gt; 0 &amp;&amp; floating &lt; 0.5) {
+                    width++;
+                }
+            }
+
+            if (contentWidth) {
+                width -= (me.getBorderWidth(&quot;lr&quot;) + me.getPadding(&quot;lr&quot;));
+            }
+
+            if (Ext.isIEQuirks) {
+                me.setStyle({ overflow: overflow});
+            }
+
+            if (width &lt; 0) {
+                width = 0;
+            }
+            return width;
+        },
+
+<span id='Ext-Element-method-setWidth'>        /**
+</span>         * Set the width of this Element.
+         * @param {Number/String} width The new width. This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
+         * &lt;li&gt;A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).&lt;/li&gt;
+         * &lt;li&gt;A String used to set the CSS width style. Animation may &lt;b&gt;not&lt;/b&gt; be used.
+         * &lt;/ul&gt;&lt;/div&gt;
          * @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));
+            if (!animate || !me.anim) {
+                me.dom.style.width = me.addUnits(width);
+            }
+            else {
+                if (!Ext.isObject(animate)) {
+                    animate = {};
+                }
+                me.animate(Ext.applyIf({
+                    to: {
+                        width: width
+                    }
+                }, animate));
+            }
             return me;
         },
-    
-        <div id="method-Ext.Element-setHeight"></div>/**
-         * Set the height of this Element.
-         * <pre><code>
+
+<span id='Ext-Element-method-setHeight'>        /**
+</span>         * Set the height of this Element.
+         * &lt;pre&gt;&lt;code&gt;
 // 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"); } 
+    // will change the content to &quot;finished&quot;
+    callback: function(){ this.{@link #update}(&quot;finished&quot;); }
 });
-         * </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>
+         * &lt;/code&gt;&lt;/pre&gt;
+         * @param {Number/String} height The new height. This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
+         * &lt;li&gt;A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels.)&lt;/li&gt;
+         * &lt;li&gt;A String used to set the CSS height style. Animation may &lt;b&gt;not&lt;/b&gt; be used.&lt;/li&gt;
+         * &lt;/ul&gt;&lt;/div&gt;
          * @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));
+            if (!animate || !me.anim) {
+                me.dom.style.height = me.addUnits(height);
+            }
+            else {
+                if (!Ext.isObject(animate)) {
+                    animate = {};
+                }
+                me.animate(Ext.applyIf({
+                    to: {
+                        height: height
+                    }
+                }, animate));
+            }
             return me;
         },
-        
-        <div id="method-Ext.Element-getBorderWidth"></div>/**
-         * Gets the width of the border(s) for the specified side(s)
+
+<span id='Ext-Element-method-getBorderWidth'>        /**
+</span>         * 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.
+         * passing &lt;tt&gt;'lr'&lt;/tt&gt; would get the border &lt;b&gt;&lt;u&gt;l&lt;/u&gt;&lt;/b&gt;eft width + the border &lt;b&gt;&lt;u&gt;r&lt;/u&gt;&lt;/b&gt;ight width.
          * @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)
+
+<span id='Ext-Element-method-getPadding'>        /**
+</span>         * 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.
+         * passing &lt;tt&gt;'lr'&lt;/tt&gt; would get the padding &lt;b&gt;&lt;u&gt;l&lt;/u&gt;&lt;/b&gt;eft + the padding &lt;b&gt;&lt;u&gt;r&lt;/u&gt;&lt;/b&gt;ight.
          * @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
+
+<span id='Ext-Element-method-clip'>        /**
+</span>         *  Store the current overflow setting and clip overflow on the element - use &lt;tt&gt;{@link #unclip}&lt;/tt&gt; 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, {
@@ -410,26 +705,27 @@ Ext.fly('elId').setHeight(150, {
             }
             return me;
         },
-    
-        <div id="method-Ext.Element-unclip"></div>/**
-         *  Return clipping (overflow) to original clipping before <tt>{@link #clip}</tt> was called
+
+<span id='Ext-Element-method-unclip'>        /**
+</span>         *  Return clipping (overflow) to original clipping before &lt;tt&gt;{@link #clip}&lt;/tt&gt; was called
          * @return {Ext.Element} this
          */
         unclip : function(){
             var me = this,
-                dom = me.dom;
-                
+                dom = me.dom,
+                clip;
+
             if(data(dom, ISCLIPPED)){
                 data(dom, ISCLIPPED, false);
-                var o = data(dom, ORIGINALCLIP);
-                if(o.o){
-                    me.setStyle(OVERFLOW, o.o);
+                clip = data(dom, ORIGINALCLIP);
+                if(clip.o){
+                    me.setStyle(OVERFLOW, clip.o);
                 }
-                if(o.x){
-                    me.setStyle(OVERFLOWX, o.x);
+                if(clip.x){
+                    me.setStyle(OVERFLOWX, clip.x);
                 }
-                if(o.y){
-                    me.setStyle(OVERFLOWY, o.y);
+                if(clip.y){
+                    me.setStyle(OVERFLOWY, clip.y);
                 }
             }
             return me;
@@ -437,21 +733,409 @@ Ext.fly('elId').setHeight(150, {
 
         // private
         addStyles : function(sides, styles){
-            var val = 0;
+            var totalSize = 0,
+                sidesArr = sides.match(wordsRe),
+                i = 0,
+                len = sidesArr.length,
+                side, size;
+            for (; i &lt; len; i++) {
+                side = sidesArr[i];
+                size = side &amp;&amp; parseInt(this.getStyle(styles[side]), 10);
+                if (size) {
+                    totalSize += MATH.abs(size);
+                }
+            }
+            return totalSize;
+        },
+
+        margins : margins,
+
+<span id='Ext-Element-method-applyStyles'>        /**
+</span>         * More flexible version of {@link #setStyle} for setting style properties.
+         * @param {String/Object/Function} styles A style specification string, e.g. &quot;width:100px&quot;, or object in the form {width:&quot;100px&quot;}, or
+         * a function which returns such a specification.
+         * @return {Ext.Element} this
+         */
+        applyStyles : function(style){
+            Ext.DomHelper.applyStyles(this.dom, style);
+            return this;
+        },
+
+<span id='Ext-Element-method-getStyles'>        /**
+</span>         * Returns an object with properties matching the styles requested.
+         * For example, el.getStyles('color', 'font-size', 'width') might return
+         * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.
+         * @param {String} style1 A style name
+         * @param {String} style2 A style name
+         * @param {String} etc.
+         * @return {Object} The style object
+         */
+        getStyles : function(){
+            var styles = {},
+                len = arguments.length,
+                i = 0, style;
+
+            for(; i &lt; len; ++i) {
+                style = arguments[i];
+                styles[style] = this.getStyle(style);
+            }
+            return styles;
+        },
+
+<span id='Ext-Element-method-boxWrap'>       /**
+</span>        * &lt;p&gt;Wraps the specified element with a special 9 element markup/CSS block that renders by default as
+        * a gray container with a gradient background, rounded corners and a 4-way shadow.&lt;/p&gt;
+        * &lt;p&gt;This special markup is used throughout Ext when box wrapping elements ({@link Ext.button.Button},
+        * {@link Ext.panel.Panel} when &lt;tt&gt;{@link Ext.panel.Panel#frame frame=true}&lt;/tt&gt;, {@link Ext.window.Window}).  The markup
+        * is of this form:&lt;/p&gt;
+        * &lt;pre&gt;&lt;code&gt;
+    Ext.Element.boxMarkup =
+    &amp;#39;&amp;lt;div class=&quot;{0}-tl&quot;&gt;&amp;lt;div class=&quot;{0}-tr&quot;&gt;&amp;lt;div class=&quot;{0}-tc&quot;&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;
+     &amp;lt;div class=&quot;{0}-ml&quot;&gt;&amp;lt;div class=&quot;{0}-mr&quot;&gt;&amp;lt;div class=&quot;{0}-mc&quot;&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;
+     &amp;lt;div class=&quot;{0}-bl&quot;&gt;&amp;lt;div class=&quot;{0}-br&quot;&gt;&amp;lt;div class=&quot;{0}-bc&quot;&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;&amp;lt;/div&gt;&amp;#39;;
+        * &lt;/code&gt;&lt;/pre&gt;
+        * &lt;p&gt;Example usage:&lt;/p&gt;
+        * &lt;pre&gt;&lt;code&gt;
+    // Basic box wrap
+    Ext.get(&quot;foo&quot;).boxWrap();
 
-            Ext.each(sides.match(/\w/g), function(s) {
-                if (s = parseInt(this.getStyle(styles[s]), 10)) {
-                    val += MATH.abs(s);
+    // You can also add a custom class and use CSS inheritance rules to customize the box look.
+    // 'x-box-blue' is a built-in alternative -- look at the related CSS definitions as an example
+    // for how to create a custom box wrap style.
+    Ext.get(&quot;foo&quot;).boxWrap().addCls(&quot;x-box-blue&quot;);
+        * &lt;/code&gt;&lt;/pre&gt;
+        * @param {String} class (optional) A base CSS class to apply to the containing wrapper element
+        * (defaults to &lt;tt&gt;'x-box'&lt;/tt&gt;). Note that there are a number of CSS rules that are dependent on
+        * this name to make the overall effect work, so if you supply an alternate base class, make sure you
+        * also supply all of the necessary rules.
+        * @return {Ext.Element} The outermost wrapping element of the created box structure.
+        */
+        boxWrap : function(cls){
+            cls = cls || Ext.baseCSSPrefix + 'box';
+            var el = Ext.get(this.insertHtml(&quot;beforeBegin&quot;, &quot;&lt;div class='&quot; + cls + &quot;'&gt;&quot; + Ext.String.format(ELEMENT.boxMarkup, cls) + &quot;&lt;/div&gt;&quot;));
+            Ext.DomQuery.selectNode('.' + cls + '-mc', el.dom).appendChild(this.dom);
+            return el;
+        },
+
+<span id='Ext-Element-method-setSize'>        /**
+</span>         * Set the size of this Element. If animation is true, both width and height will be animated concurrently.
+         * @param {Number/String} width The new width. This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
+         * &lt;li&gt;A Number specifying the new width in this Element's {@link #defaultUnit}s (by default, pixels).&lt;/li&gt;
+         * &lt;li&gt;A String used to set the CSS width style. Animation may &lt;b&gt;not&lt;/b&gt; be used.
+         * &lt;li&gt;A size object in the format &lt;code&gt;{width: widthValue, height: heightValue}&lt;/code&gt;.&lt;/li&gt;
+         * &lt;/ul&gt;&lt;/div&gt;
+         * @param {Number/String} height The new height. This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
+         * &lt;li&gt;A Number specifying the new height in this Element's {@link #defaultUnit}s (by default, pixels).&lt;/li&gt;
+         * &lt;li&gt;A String used to set the CSS height style. Animation may &lt;b&gt;not&lt;/b&gt; be used.&lt;/li&gt;
+         * &lt;/ul&gt;&lt;/div&gt;
+         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
+         * @return {Ext.Element} this
+         */
+        setSize : function(width, height, animate){
+            var me = this;
+            if (Ext.isObject(width)) { // in case of object from getSize()
+                animate = height;
+                height = width.height;
+                width = width.width;
+            }
+            width = me.adjustWidth(width);
+            height = me.adjustHeight(height);
+            if(!animate || !me.anim){
+                // Must touch some property before setting style.width/height on non-quirk IE6,7, or the
+                // properties will not reflect the changes on the style immediately
+                if (!Ext.isIEQuirks &amp;&amp; (Ext.isIE6 || Ext.isIE7)) {
+                    me.dom.offsetTop;
                 }
-            },
-            this);
-            return val;
+                me.dom.style.width = me.addUnits(width);
+                me.dom.style.height = me.addUnits(height);
+            }
+            else {
+                if (animate === true) {
+                    animate = {};
+                }
+                me.animate(Ext.applyIf({
+                    to: {
+                        width: width,
+                        height: height
+                    }
+                }, animate));
+            }
+            return me;
         },
 
-        margins : margins
-    }
-}()         
-);
-</pre>
+<span id='Ext-Element-method-getComputedHeight'>        /**
+</span>         * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
+         * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
+         * if a height has not been set using CSS.
+         * @return {Number}
+         */
+        getComputedHeight : function(){
+            var me = this,
+                h = Math.max(me.dom.offsetHeight, me.dom.clientHeight);
+            if(!h){
+                h = parseFloat(me.getStyle('height')) || 0;
+                if(!me.isBorderBox()){
+                    h += me.getFrameWidth('tb');
+                }
+            }
+            return h;
+        },
+
+<span id='Ext-Element-method-getComputedWidth'>        /**
+</span>         * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
+         * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
+         * if a width has not been set using CSS.
+         * @return {Number}
+         */
+        getComputedWidth : function(){
+            var me = this,
+                w = Math.max(me.dom.offsetWidth, me.dom.clientWidth);
+
+            if(!w){
+                w = parseFloat(me.getStyle('width')) || 0;
+                if(!me.isBorderBox()){
+                    w += me.getFrameWidth('lr');
+                }
+            }
+            return w;
+        },
+
+<span id='Ext-Element-method-getFrameWidth'>        /**
+</span>         * Returns the sum width of the padding and borders for the passed &quot;sides&quot;. See getBorderWidth()
+         for more information about the sides.
+         * @param {String} sides
+         * @return {Number}
+         */
+        getFrameWidth : function(sides, onlyContentBox){
+            return onlyContentBox &amp;&amp; this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
+        },
+
+<span id='Ext-Element-method-addClsOnOver'>        /**
+</span>         * Sets up event handlers to add and remove a css class when the mouse is over this element
+         * @param {String} className
+         * @return {Ext.Element} this
+         */
+        addClsOnOver : function(className){
+            var dom = this.dom;
+            this.hover(
+                function(){
+                    Ext.fly(dom, INTERNAL).addCls(className);
+                },
+                function(){
+                    Ext.fly(dom, INTERNAL).removeCls(className);
+                }
+            );
+            return this;
+        },
+
+<span id='Ext-Element-method-addClsOnFocus'>        /**
+</span>         * Sets up event handlers to add and remove a css class when this element has the focus
+         * @param {String} className
+         * @return {Ext.Element} this
+         */
+        addClsOnFocus : function(className){
+            var me = this,
+                dom = me.dom;
+            me.on(&quot;focus&quot;, function(){
+                Ext.fly(dom, INTERNAL).addCls(className);
+            });
+            me.on(&quot;blur&quot;, function(){
+                Ext.fly(dom, INTERNAL).removeCls(className);
+            });
+            return me;
+        },
+
+<span id='Ext-Element-method-addClsOnClick'>        /**
+</span>         * Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)
+         * @param {String} className
+         * @return {Ext.Element} this
+         */
+        addClsOnClick : function(className){
+            var dom = this.dom;
+            this.on(&quot;mousedown&quot;, function(){
+                Ext.fly(dom, INTERNAL).addCls(className);
+                var d = Ext.getDoc(),
+                    fn = function(){
+                        Ext.fly(dom, INTERNAL).removeCls(className);
+                        d.removeListener(&quot;mouseup&quot;, fn);
+                    };
+                d.on(&quot;mouseup&quot;, fn);
+            });
+            return this;
+        },
+
+<span id='Ext-Element-method-getViewSize'>        /**
+</span>         * &lt;p&gt;Returns the dimensions of the element available to lay content out in.&lt;p&gt;
+         * &lt;p&gt;If the element (or any ancestor element) has CSS style &lt;code&gt;display : none&lt;/code&gt;, the dimensions will be zero.&lt;/p&gt;
+         * example:&lt;pre&gt;&lt;code&gt;
+        var vpSize = Ext.getBody().getViewSize();
+
+        // all Windows created afterwards will have a default value of 90% height and 95% width
+        Ext.Window.override({
+            width: vpSize.width * 0.9,
+            height: vpSize.height * 0.95
+        });
+        // To handle window resizing you would have to hook onto onWindowResize.
+        * &lt;/code&gt;&lt;/pre&gt;
+        *
+        * getViewSize utilizes clientHeight/clientWidth which excludes sizing of scrollbars.
+        * To obtain the size including scrollbars, use getStyleSize
+        *
+        * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
+        */
+
+        getViewSize : function(){
+            var me = this,
+                dom = me.dom,
+                isDoc = (dom == Ext.getDoc().dom || dom == Ext.getBody().dom),
+                style, overflow, ret;
+
+            // If the body, use static methods
+            if (isDoc) {
+                ret = {
+                    width : ELEMENT.getViewWidth(),
+                    height : ELEMENT.getViewHeight()
+                };
+
+            // Else use clientHeight/clientWidth
+            }
+            else {
+                // IE 6 &amp; IE Quirks mode acts more like a max-size measurement unless overflow is hidden during measurement.
+                // We will put the overflow back to it's original value when we are done measuring.
+                if (Ext.isIE6 || Ext.isIEQuirks) {
+                    style = dom.style;
+                    overflow = style.overflow;
+                    me.setStyle({ overflow: 'hidden'});
+                }
+                ret = {
+                    width : dom.clientWidth,
+                    height : dom.clientHeight
+                };
+                if (Ext.isIE6 || Ext.isIEQuirks) {
+                    me.setStyle({ overflow: overflow });
+                }
+            }
+            return ret;
+        },
+
+<span id='Ext-Element-method-getStyleSize'>        /**
+</span>        * &lt;p&gt;Returns the dimensions of the element available to lay content out in.&lt;p&gt;
+        *
+        * getStyleSize utilizes prefers style sizing if present, otherwise it chooses the larger of offsetHeight/clientHeight and offsetWidth/clientWidth.
+        * To obtain the size excluding scrollbars, use getViewSize
+        *
+        * Sizing of the document body is handled at the adapter level which handles special cases for IE and strict modes, etc.
+        */
+
+        getStyleSize : function(){
+            var me = this,
+                doc = document,
+                d = this.dom,
+                isDoc = (d == doc || d == doc.body),
+                s = d.style,
+                w, h;
+
+            // If the body, use static methods
+            if (isDoc) {
+                return {
+                    width : ELEMENT.getViewWidth(),
+                    height : ELEMENT.getViewHeight()
+                };
+            }
+            // Use Styles if they are set
+            if(s.width &amp;&amp; s.width != 'auto'){
+                w = parseFloat(s.width);
+                if(me.isBorderBox()){
+                   w -= me.getFrameWidth('lr');
+                }
+            }
+            // Use Styles if they are set
+            if(s.height &amp;&amp; s.height != 'auto'){
+                h = parseFloat(s.height);
+                if(me.isBorderBox()){
+                   h -= me.getFrameWidth('tb');
+                }
+            }
+            // Use getWidth/getHeight if style not set.
+            return {width: w || me.getWidth(true), height: h || me.getHeight(true)};
+        },
+
+<span id='Ext-Element-method-getSize'>        /**
+</span>         * Returns the size of the element.
+         * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding
+         * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
+         */
+        getSize : function(contentSize){
+            return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
+        },
+
+<span id='Ext-Element-method-repaint'>        /**
+</span>         * Forces the browser to repaint this element
+         * @return {Ext.Element} this
+         */
+        repaint : function(){
+            var dom = this.dom;
+            this.addCls(Ext.baseCSSPrefix + 'repaint');
+            setTimeout(function(){
+                Ext.fly(dom).removeCls(Ext.baseCSSPrefix + 'repaint');
+            }, 1);
+            return this;
+        },
+
+<span id='Ext-Element-method-selectable'>        /**
+</span>         * Enable text selection for this element (normalized across browsers)
+         * @return {Ext.Element} this
+         */
+        selectable : function() {
+            var me = this;
+            me.dom.unselectable = &quot;off&quot;;
+            // Prevent it from bubles up and enables it to be selectable
+            me.on('selectstart', function (e) {
+                e.stopPropagation();
+                return true;
+            });
+            me.applyStyles(&quot;-moz-user-select: text; -khtml-user-select: text;&quot;);
+            me.removeCls(Ext.baseCSSPrefix + 'unselectable');
+            return me;
+        },
+
+<span id='Ext-Element-method-unselectable'>        /**
+</span>         * Disables text selection for this element (normalized across browsers)
+         * @return {Ext.Element} this
+         */
+        unselectable : function(){
+            var me = this;
+            me.dom.unselectable = &quot;on&quot;;
+
+            me.swallowEvent(&quot;selectstart&quot;, true);
+            me.applyStyles(&quot;-moz-user-select:-moz-none;-khtml-user-select:none;&quot;);
+            me.addCls(Ext.baseCSSPrefix + 'unselectable');
+
+            return me;
+        },
+
+<span id='Ext-Element-method-getMargin'>        /**
+</span>         * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
+         * then it returns the calculated width of the sides (see getPadding)
+         * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides
+         * @return {Object/Number}
+         */
+        getMargin : function(side){
+            var me = this,
+                hash = {t:&quot;top&quot;, l:&quot;left&quot;, r:&quot;right&quot;, b: &quot;bottom&quot;},
+                o = {},
+                key;
+
+            if (!side) {
+                for (key in me.margins){
+                    o[hash[key]] = parseFloat(me.getStyle(me.margins[key])) || 0;
+                }
+                return o;
+            } else {
+                return me.addStyles.call(me, side, me.margins);
+            }
+        }
+    });
+})();</pre>
 </body>
-</html>
\ No newline at end of file
+</html>