The source code

/** * @class Ext.Element */ -Ext.Element.addMethods(function(){ +Ext.Element.addMethods(function(){ // local style camelizing for speed var propCache = {}, camelRe = /(-[a-z])/gi, @@ -23,7 +24,7 @@ Ext.Element.addMethods(function(){ propFloat = Ext.isIE ? 'styleFloat' : 'cssFloat', opacityRe = /alpha$opacity=(.*)$/i, trimRe = /^\s+|\s+$/g, - EL = Ext.Element, + EL = Ext.Element, PADDING = "padding", MARGIN = "margin", BORDER = "border", @@ -31,7 +32,7 @@ Ext.Element.addMethods(function(){ RIGHT = "-right", TOP = "-top", BOTTOM = "-bottom", - WIDTH = "-width", + WIDTH = "-width", MATH = Math, HIDDEN = 'hidden', ISCLIPPED = 'isClipped', @@ -39,24 +40,24 @@ 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 + + + // 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 + // private ==> used by Fx adjustWidth : function(width) { var me = this; var isNum = Ext.isNumber(width); @@ -65,62 +66,73 @@ Ext.Element.addMethods(function(){ } return (isNum && width < 0) ? 0 : width; }, - - // private ==> used by Fx + + // private ==> used by Fx adjustHeight : function(height) { var me = this; var isNum = Ext.isNumber(height); if(isNum && me.autoBoxAdjust && !me.isBorderBox()){ - height -= (me.getBorderWidth("tb") + me.getPadding("tb")); + height -= (me.getBorderWidth("tb") + me.getPadding("tb")); } return (isNum && height < 0) ? 0 : height; }, - - + +

/** * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out. * @param {String/Array} className The CSS class to add, or an array of classes * @return {Ext.Element} this */ addClass : function(className){ - var me = this; - Ext.each(className, function(v) { - me.dom.className += (!me.hasClass(v) && v ? " " + v : ""); - }); + var me = this, i, len, v; + className = Ext.isArray(className) ? className : [className]; + for (i=0, len = className.length; i < len; i++) { + v = className[i]; + if (v) { + me.dom.className += (!me.hasClass(v) && v ? " " + v : ""); + }; + }; return me; }, - +

/** * Adds one or more CSS classes to this element and removes the same class(es) from all siblings. * @param {String/Array} className The CSS class to add, or an array of classes * @return {Ext.Element} this */ radioClass : function(className){ - Ext.each(this.dom.parentNode.childNodes, function(v) { - if(v.nodeType == 1) { - Ext.fly(v, '_internal').removeClass(className); + var cn = this.dom.parentNode.childNodes, v; + className = Ext.isArray(className) ? className : [className]; + for (var i=0, len = cn.length; i < len; i++) { + v = cn[i]; + if(v && v.nodeType == 1) { + Ext.fly(v, '_internal').removeClass(className); } - }); + }; return this.addClass(className); }, - +

/** * Removes one or more CSS classes from the element. * @param {String/Array} className The CSS class to remove, or an array of classes * @return {Ext.Element} this */ removeClass : function(className){ - var me = this; + var me = this, v; + className = Ext.isArray(className) ? className : [className]; 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"), - " "); - }); + for (var i=0, len=className.length; i < len; i++) { + v = className[i]; + if(v) { + me.dom.className = me.dom.className.replace( + classReCache[v] = classReCache[v] || new RegExp('(?:^|\\s+)' + v + '(?:\\s+|$)', "g"), " " + ); + } + }; } return me; }, - +

/** * 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 @@ -129,7 +141,7 @@ Ext.Element.addMethods(function(){ toggleClass : function(className){ return this.hasClass(className) ? this.removeClass(className) : this.addClass(className); }, - +

/** * Checks if the specified CSS class exists on this element's DOM node. * @param {String} className The CSS class to check for @@ -138,7 +150,7 @@ Ext.Element.addMethods(function(){ hasClass : function(className){ return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1; }, - +

/** * 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 @@ -148,42 +160,57 @@ Ext.Element.addMethods(function(){ replaceClass : function(oldClassName, newClassName){ return this.removeClass(oldClassName).addClass(newClassName); }, - + isStyle : function(style, val) { - return this.getStyle(style) == val; + return this.getStyle(style) == val; }, - +

/** * Normalizes currentStyle and computedStyle. * @param {String} property The style property whose value is returned. * @return {String} The current value of the style property for this element. */ - getStyle : function(){ + getStyle : function(){ return view && view.getComputedStyle ? function(prop){ var el = this.dom, - v, + v, cs, - out; - if(el == document) return null; + out, + display, + wk = Ext.isWebKit, + display; + + if(el == document){ + return null; + } prop = chkCache(prop); - out = (v = el.style[prop]) ? v : + // Fix bug caused by this: https://bugs.webkit.org/show_bug.cgi?id=13343 + if(wk && /marginRight/.test(prop)){ + display = this.getStyle('display'); + el.style.display = 'inline-block'; + } + out = (v = el.style[prop]) ? v : (cs = view.getComputedStyle(el, "")) ? cs[prop] : null; - + // Webkit returns rgb values for transparent. - if(Ext.isWebKit && out == 'rgba(0, 0, 0, 0)'){ - out = 'transparent'; + if(wk){ + if(out == 'rgba(0, 0, 0, 0)'){ + out = 'transparent'; + }else if(display){ + el.style.display = display; + } } return out; } : - function(prop){ - var el = this.dom, - m, - cs; - - if(el == document) return null; + function(prop){ + var el = this.dom, + m, + cs; + + if(el == document) return null; if (prop == 'opacity') { - if (el.style.filter.match) { + if (el.style.filter.match) { if(m = el.style.filter.match(opacityRe)){ var fv = parseFloat(m[1]); if(!isNaN(fv)){ @@ -193,7 +220,7 @@ Ext.Element.addMethods(function(){ } return 1; } - prop = chkCache(prop); + prop = chkCache(prop); return el.style[prop] || ((cs = el.currentStyle) ? cs[prop] : null); }; }(), @@ -210,14 +237,14 @@ Ext.Element.addMethods(function(){ var v = this.getStyle(attr), color = Ext.isDefined(prefix) ? prefix : '#', h; - + if(!v || /transparent|inherit/.test(v)){ return defaultValue; } if(/^r/.test(v)){ Ext.each(v.slice(4, v.length -1).split(','), function(s){ h = parseInt(s, 10); - color += (h < 16 ? '0' : '') + h.toString(16); + color += (h < 16 ? '0' : '') + h.toString(16); }); }else{ v = v.replace('#', ''); @@ -225,7 +252,7 @@ Ext.Element.addMethods(function(){ } return(color.length > 5 ? color.toLowerCase() : defaultValue); }, - +

/** * 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. @@ -233,23 +260,23 @@ Ext.Element.addMethods(function(){ * @return {Ext.Element} this */ setStyle : function(prop, value){ - var tmp, + var tmp, style, camel; if (!Ext.isObject(prop)) { tmp = {}; - tmp[prop] = value; + tmp[prop] = value; prop = tmp; } for (style in prop) { - value = prop[style]; - style == 'opacity' ? - this.setOpacity(value) : + value = prop[style]; + style == 'opacity' ? + this.setOpacity(value) : this.dom.style[chkCache(style)] = value; } return this; }, - +

/** * Set the opacity of the element * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc @@ -260,10 +287,10 @@ Ext.Element.addMethods(function(){ setOpacity : function(opacity, animate){ var me = this, s = me.dom.style; - - if(!animate || !me.anim){ + + if(!animate || !me.anim){ if(Ext.isIE){ - var opac = opacity < 1 ? 'alpha(opacity=' + opacity * 100 + ')' : '', + var opac = opacity < 1 ? 'alpha(opacity=' + opacity * 100 + ')' : '', val = s.filter.replace(opacityRe, '').replace(trimRe, ''); s.zoom = 1; @@ -276,7 +303,7 @@ Ext.Element.addMethods(function(){ } return me; }, - +

/** * Clears any opacity settings from this element. Required in some cases for IE. * @return {Ext.Element} this @@ -292,7 +319,7 @@ Ext.Element.addMethods(function(){ } return this; }, - +

/** * Returns the offset height of the element * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding @@ -303,11 +330,11 @@ Ext.Element.addMethods(function(){ 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; }, - +

/** * Returns the offset width of the element * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding @@ -321,7 +348,7 @@ Ext.Element.addMethods(function(){ w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr"); return w < 0 ? 0 : w; }, - +

/** * Set the width of this Element. * @param {Mixed} width The new width. This may be one of:


@@ -350,7 +377,7 @@ Ext.fly('elementId').setHeight(200, true);
 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"); } 
+    callback: function(){ this.{@link #update}("finished"); }
 });
          *

{@link #unclip}

{@link #clip}