Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / Element.style.html
index cf273cb..029c8f1 100644 (file)
@@ -3,8 +3,8 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>The source code</title>
-  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
-  <script type="text/javascript" src="../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>
 </head>
 <body onload="prettyPrint(); highlight();">
-  <pre class="prettyprint lang-js"><span id='Ext-core-Element'>/**
-</span> * @class Ext.core.Element
+  <pre class="prettyprint lang-js"><span id='Ext-Element'>/**
+</span> * @class Ext.Element
  */
 (function(){
-    Ext.core.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;';
     // local style camelizing for speed
-    var supports = Ext.supports,
+    var ELEMENT = Ext.Element,
+        supports = Ext.supports,
         view = document.defaultView,
         opacityRe = /alpha\(opacity=(.*)\)/i,
         trimRe = /^\s+|\s+$/g,
         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.core.Element.data;
+        data = ELEMENT.data;
 
-    Ext.override(Ext.core.Element, {
-        
-<span id='Ext-core-Element-method-adjustWidth'>        /**
+    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,
                 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;));
             }
@@ -70,7 +80,7 @@
         adjustHeight : function(height) {
             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;));
             }
         },
 
 
-<span id='Ext-core-Element-method-addCls'>        /**
+<span id='Ext-Element-method-addCls'>        /**
 </span>         * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
-         * @param {String/Array} className The CSS classes to add separated by space, or an array of classes
-         * @return {Ext.core.Element} this
+         * @param {String/String[]} className The CSS classes to add separated by space, or an array of classes
+         * @return {Ext.Element} this
          */
         addCls : function(className){
             var me = this,
             return me;
         },
 
-<span id='Ext-core-Element-method-removeCls'>        /**
+<span id='Ext-Element-method-removeCls'>        /**
 </span>         * Removes one or more CSS classes from the element.
-         * @param {String/Array} className The CSS classes to remove separated by space, or an array of classes
-         * @return {Ext.core.Element} this
+         * @param {String/String[]} className The CSS classes to remove separated by space, or an array of classes
+         * @return {Ext.Element} this
          */
         removeCls : function(className){
             var me = this,
             return me;
         },
 
-<span id='Ext-core-Element-method-radioCls'>        /**
+<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/Array} className The CSS class to add, or an array of classes
-         * @return {Ext.core.Element} this
+         * @param {String/String[]} className The CSS class to add, or an array of classes
+         * @return {Ext.Element} this
          */
         radioCls : function(className){
             var cn = this.dom.parentNode.childNodes,
             return this.addCls(className);
         },
 
-<span id='Ext-core-Element-method-toggleCls'>        /**
+<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.core.Element} this
+         * @return {Ext.Element} this
          * @method
          */
         toggleCls : Ext.supports.ClassList ?
                 return this.hasCls(className) ? this.removeCls(className) : this.addCls(className);
             },
 
-<span id='Ext-core-Element-method-hasCls'>        /**
+<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
                 return className &amp;&amp; (' ' + this.dom.className + ' ').indexOf(' ' + className + ' ') != -1;
             },
 
-<span id='Ext-core-Element-method-replaceCls'>        /**
+<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.core.Element} this
+         * @return {Ext.Element} this
          */
         replaceCls : function(oldClassName, newClassName){
             return this.removeCls(oldClassName).addCls(newClassName);
             return this.getStyle(style) == val;
         },
 
-<span id='Ext-core-Element-method-getStyle'>        /**
+<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(){
+        getStyle : function() {
             return view &amp;&amp; view.getComputedStyle ?
                 function(prop){
                     var el = this.dom,
                     if(el == document){
                         return null;
                     }
-                    prop = Ext.core.Element.normalize(prop);
+                    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 = Ext.core.Element.getRightMarginFixCleaner(el);
+                        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){
+                function (prop) {
                     var el = this.dom,
                         m, cs;
 
                     if (el == document) {
                         return null;
                     }
-                    
-                    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;
+                    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 = Ext.core.Element.normalize(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;
+                }
         }(),
 
-<span id='Ext-core-Element-method-getColor'>        /**
+<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
             return(color.length &gt; 5 ? color.toLowerCase() : defaultValue);
         },
 
-<span id='Ext-core-Element-method-setStyle'>        /**
+<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.core.Element} this
+         * @return {Ext.Element} this
          */
         setStyle : function(prop, value){
             var me = this,
                         me.setOpacity(value);
                     }
                     else {
-                        me.dom.style[Ext.core.Element.normalize(style)] = value;
+                        me.dom.style[ELEMENT.normalize(style)] = value;
                     }
                 }
             }
             return me;
         },
 
-<span id='Ext-core-Element-method-setOpacity'>        /**
+<span id='Ext-Element-method-setOpacity'>        /**
 </span>         * Set the opacity of the element
-         * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
+         * @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.core.Element} this
+         * @return {Ext.Element} this
          */
         setOpacity: function(opacity, animate) {
             var me = this,
         },
 
 
-<span id='Ext-core-Element-method-clearOpacity'>        /**
+<span id='Ext-Element-method-clearOpacity'>        /**
 </span>         * Clears any opacity settings from this element. Required in some cases for IE.
-         * @return {Ext.core.Element} this
+         * @return {Ext.Element} this
          */
         clearOpacity : function(){
             var style = this.dom.style;
             }
             return this;
         },
-        
-<span id='Ext-core-Element-method-adjustDirect2DDimension'>        /**
+
+<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 
+         * @return {Number} 0 or 1
          */
         adjustDirect2DDimension: function(dimension) {
             var me = this,
                 inlinePosition = dom.style['position'],
                 originIndex = dimension === 'width' ? 0 : 1,
                 floating;
-                
+
             if (display === 'inline') {
                 dom.style['display'] = 'inline-block';
             }
             // 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-core-Element-method-getHeight'>        /**
+
+<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
             }
             return height;
         },
-                
-<span id='Ext-core-Element-method-getWidth'>        /**
+
+<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
                 overflow = style.overflow;
                 me.setStyle({overflow: 'hidden'});
             }
-            
-            // Fix Opera 10.5x width calculation issues 
+
+            // 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 = 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
                     width++;
                 }
             }
-            
+
             if (contentWidth) {
                 width -= (me.getBorderWidth(&quot;lr&quot;) + me.getPadding(&quot;lr&quot;));
             }
-            
+
             if (Ext.isIEQuirks) {
                 me.setStyle({ overflow: overflow});
             }
             return width;
         },
 
-<span id='Ext-core-Element-method-setWidth'>        /**
+<span id='Ext-Element-method-setWidth'>        /**
 </span>         * Set the width of this Element.
-         * @param {Mixed} width The new width. This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
+         * @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.core.Element} this
+         * @return {Ext.Element} this
          */
         setWidth : function(width, animate){
             var me = this;
             return me;
         },
 
-<span id='Ext-core-Element-method-setHeight'>        /**
+<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
@@ -597,12 +638,12 @@ Ext.fly('elId').setHeight(150, {
     callback: function(){ this.{@link #update}(&quot;finished&quot;); }
 });
          * &lt;/code&gt;&lt;/pre&gt;
-         * @param {Mixed} height The new height. This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&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.core.Element} this
+         * @return {Ext.Element} this
          */
          setHeight : function(height, animate){
             var me = this;
@@ -623,7 +664,7 @@ Ext.fly('elId').setHeight(150, {
             return me;
         },
 
-<span id='Ext-core-Element-method-getBorderWidth'>        /**
+<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 &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.
@@ -633,7 +674,7 @@ Ext.fly('elId').setHeight(150, {
             return this.addStyles(side, borders);
         },
 
-<span id='Ext-core-Element-method-getPadding'>        /**
+<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 &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.
@@ -643,9 +684,9 @@ Ext.fly('elId').setHeight(150, {
             return this.addStyles(side, paddings);
         },
 
-<span id='Ext-core-Element-method-clip'>        /**
+<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.core.Element} this
+         * @return {Ext.Element} this
          */
         clip : function(){
             var me = this,
@@ -665,9 +706,9 @@ Ext.fly('elId').setHeight(150, {
             return me;
         },
 
-<span id='Ext-core-Element-method-unclip'>        /**
+<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.core.Element} this
+         * @return {Ext.Element} this
          */
         unclip : function(){
             var me = this,
@@ -677,14 +718,14 @@ Ext.fly('elId').setHeight(150, {
             if(data(dom, ISCLIPPED)){
                 data(dom, ISCLIPPED, false);
                 clip = data(dom, ORIGINALCLIP);
-                if(o.o){
-                    me.setStyle(OVERFLOW, o.o);
+                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;
@@ -708,19 +749,19 @@ Ext.fly('elId').setHeight(150, {
         },
 
         margins : margins,
-        
-<span id='Ext-core-Element-method-applyStyles'>        /**
+
+<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.core.Element} this
+         * @return {Ext.Element} this
          */
         applyStyles : function(style){
-            Ext.core.DomHelper.applyStyles(this.dom, style);
+            Ext.DomHelper.applyStyles(this.dom, style);
             return this;
         },
 
-<span id='Ext-core-Element-method-getStyles'>        /**
+<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'}.
@@ -733,7 +774,7 @@ Ext.fly('elId').setHeight(150, {
             var styles = {},
                 len = arguments.length,
                 i = 0, style;
-                
+
             for(; i &lt; len; ++i) {
                 style = arguments[i];
                 styles[style] = this.getStyle(style);
@@ -741,14 +782,14 @@ Ext.fly('elId').setHeight(150, {
             return styles;
         },
 
-<span id='Ext-core-Element-method-boxWrap'>       /**
+<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.core.Element.boxMarkup =
+    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;;
@@ -767,28 +808,28 @@ Ext.fly('elId').setHeight(150, {
         * (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.core.Element} The outermost wrapping element of the created box structure.
+        * @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(Ext.core.Element.boxMarkup, cls) + &quot;&lt;/div&gt;&quot;));
+            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-core-Element-method-setSize'>        /**
+<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 {Mixed} width The new width. This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
+         * @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 {Mixed} height The new height. This may be one of:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&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.core.Element} this
+         * @return {Ext.Element} this
          */
         setSize : function(width, height, animate){
             var me = this;
@@ -800,6 +841,11 @@ Ext.fly('elId').setHeight(150, {
             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;
+                }
                 me.dom.style.width = me.addUnits(width);
                 me.dom.style.height = me.addUnits(height);
             }
@@ -817,7 +863,7 @@ Ext.fly('elId').setHeight(150, {
             return me;
         },
 
-<span id='Ext-core-Element-method-getComputedHeight'>        /**
+<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.
@@ -835,7 +881,7 @@ Ext.fly('elId').setHeight(150, {
             return h;
         },
 
-<span id='Ext-core-Element-method-getComputedWidth'>        /**
+<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.
@@ -844,7 +890,7 @@ Ext.fly('elId').setHeight(150, {
         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()){
@@ -854,7 +900,7 @@ Ext.fly('elId').setHeight(150, {
             return w;
         },
 
-<span id='Ext-core-Element-method-getFrameWidth'>        /**
+<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
@@ -864,10 +910,10 @@ Ext.fly('elId').setHeight(150, {
             return onlyContentBox &amp;&amp; this.isBorderBox() ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
         },
 
-<span id='Ext-core-Element-method-addClsOnOver'>        /**
+<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.core.Element} this
+         * @return {Ext.Element} this
          */
         addClsOnOver : function(className){
             var dom = this.dom;
@@ -882,10 +928,10 @@ Ext.fly('elId').setHeight(150, {
             return this;
         },
 
-<span id='Ext-core-Element-method-addClsOnFocus'>        /**
+<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.core.Element} this
+         * @return {Ext.Element} this
          */
         addClsOnFocus : function(className){
             var me = this,
@@ -899,10 +945,10 @@ Ext.fly('elId').setHeight(150, {
             return me;
         },
 
-<span id='Ext-core-Element-method-addClsOnClick'>        /**
+<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.core.Element} this
+         * @return {Ext.Element} this
          */
         addClsOnClick : function(className){
             var dom = this.dom;
@@ -918,7 +964,7 @@ Ext.fly('elId').setHeight(150, {
             return this;
         },
 
-<span id='Ext-core-Element-method-getViewSize'>        /**
+<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;
@@ -947,8 +993,8 @@ Ext.fly('elId').setHeight(150, {
             // If the body, use static methods
             if (isDoc) {
                 ret = {
-                    width : Ext.core.Element.getViewWidth(),
-                    height : Ext.core.Element.getViewHeight()
+                    width : ELEMENT.getViewWidth(),
+                    height : ELEMENT.getViewHeight()
                 };
 
             // Else use clientHeight/clientWidth
@@ -972,7 +1018,7 @@ Ext.fly('elId').setHeight(150, {
             return ret;
         },
 
-<span id='Ext-core-Element-method-getStyleSize'>        /**
+<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.
@@ -992,8 +1038,8 @@ Ext.fly('elId').setHeight(150, {
             // If the body, use static methods
             if (isDoc) {
                 return {
-                    width : Ext.core.Element.getViewWidth(),
-                    height : Ext.core.Element.getViewHeight()
+                    width : ELEMENT.getViewWidth(),
+                    height : ELEMENT.getViewHeight()
                 };
             }
             // Use Styles if they are set
@@ -1014,7 +1060,7 @@ Ext.fly('elId').setHeight(150, {
             return {width: w || me.getWidth(true), height: h || me.getHeight(true)};
         },
 
-<span id='Ext-core-Element-method-getSize'>        /**
+<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)}
@@ -1023,9 +1069,9 @@ Ext.fly('elId').setHeight(150, {
             return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
         },
 
-<span id='Ext-core-Element-method-repaint'>        /**
+<span id='Ext-Element-method-repaint'>        /**
 </span>         * Forces the browser to repaint this element
-         * @return {Ext.core.Element} this
+         * @return {Ext.Element} this
          */
         repaint : function(){
             var dom = this.dom;
@@ -1036,22 +1082,39 @@ Ext.fly('elId').setHeight(150, {
             return this;
         },
 
-<span id='Ext-core-Element-method-unselectable'>        /**
+<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.core.Element} this
+         * @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:none;-khtml-user-select:none;&quot;);
+            me.applyStyles(&quot;-moz-user-select:-moz-none;-khtml-user-select:none;&quot;);
             me.addCls(Ext.baseCSSPrefix + 'unselectable');
-            
+
             return me;
         },
 
-<span id='Ext-core-Element-method-getMargin'>        /**
+<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