X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6:/src/core/Element.fx-more.js..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/src/core/src/dom/Element.fx-more.js diff --git a/src/core/Element.fx-more.js b/src/core/src/dom/Element.fx-more.js similarity index 60% rename from src/core/Element.fx-more.js rename to src/core/src/dom/Element.fx-more.js index c201e711..5540536f 100644 --- a/src/core/Element.fx-more.js +++ b/src/core/src/dom/Element.fx-more.js @@ -1,21 +1,15 @@ -/*! - * Ext JS Library 3.3.1 - * Copyright(c) 2006-2010 Sencha Inc. - * licensing@sencha.com - * http://www.sencha.com/license - */ /** - * @class Ext.Element + * @class Ext.core.Element */ -Ext.Element.addMethods( +Ext.core.Element.addMethods( function() { var VISIBILITY = "visibility", DISPLAY = "display", HIDDEN = "hidden", NONE = "none", - XMASKED = "x-masked", - XMASKEDRELATIVE = "x-masked-relative", - data = Ext.Element.data; + XMASKED = Ext.baseCSSPrefix + "masked", + XMASKEDRELATIVE = Ext.baseCSSPrefix + "masked-relative", + data = Ext.core.Element.data; return { /** @@ -26,11 +20,11 @@ Ext.Element.addMethods( isVisible : function(deep) { var vis = !this.isStyle(VISIBILITY, HIDDEN) && !this.isStyle(DISPLAY, NONE), p = this.dom.parentNode; - + if (deep !== true || !vis) { return vis; } - + while (p && !(/^body/i.test(p.tagName))) { if (!Ext.fly(p, '_isVisible').isVisible()) { return false; @@ -51,15 +45,15 @@ Ext.Element.addMethods( /** * Convenience method for setVisibilityMode(Element.DISPLAY) * @param {String} display (optional) What to set display to when visible - * @return {Ext.Element} this + * @return {Ext.core.Element} this */ enableDisplayMode : function(display) { - this.setVisibilityMode(Ext.Element.DISPLAY); - + this.setVisibilityMode(Ext.core.Element.DISPLAY); + if (!Ext.isEmpty(display)) { data(this.dom, 'originalDisplay', display); } - + return this; }, @@ -73,27 +67,30 @@ Ext.Element.addMethods( mask : function(msg, msgCls) { var me = this, dom = me.dom, - dh = Ext.DomHelper, - EXTELMASKMSG = "ext-el-mask-msg", + setExpression = dom.style.setExpression, + dh = Ext.core.DomHelper, + EXTELMASKMSG = Ext.baseCSSPrefix + "mask-msg", el, mask; if (!(/^body/i.test(dom.tagName) && me.getStyle('position') == 'static')) { - me.addClass(XMASKEDRELATIVE); + me.addCls(XMASKEDRELATIVE); } - if (el = data(dom, 'maskMsg')) { + el = data(dom, 'maskMsg'); + if (el) { el.remove(); } - if (el = data(dom, 'mask')) { + el = data(dom, 'mask'); + if (el) { el.remove(); } - mask = dh.append(dom, {cls : "ext-el-mask"}, true); + mask = dh.append(dom, {cls : Ext.baseCSSPrefix + "mask"}, true); data(dom, 'mask', mask); - me.addClass(XMASKED); + me.addCls(XMASKED); mask.setDisplayed(true); - + if (typeof msg == 'string') { var mm = dh.append(dom, {cls : EXTELMASKMSG, cn:{tag:'div'}}, true); data(dom, 'maskMsg', mm); @@ -102,12 +99,24 @@ Ext.Element.addMethods( mm.setDisplayed(true); mm.center(me); } - + // NOTE: CSS expressions are resource intensive and to be used only as a last resort + // These expressions are removed as soon as they are no longer necessary - in the unmask method. + // In normal use cases an element will be masked for a limited period of time. + // Fix for https://sencha.jira.com/browse/EXTJSIV-19. + // IE6 strict mode and IE6-9 quirks mode takes off left+right padding when calculating width! + if (!Ext.supports.IncludePaddingInWidthCalculation && setExpression) { + mask.dom.style.setExpression('width', 'this.parentNode.offsetWidth + "px"'); + } + + // Some versions and modes of IE subtract top+bottom padding when calculating height. + // Different versions from those which make the same error for width! + if (!Ext.supports.IncludePaddingInHeightCalculation && setExpression) { + mask.dom.style.setExpression('height', 'this.parentNode.offsetHeight + "px"'); + } // ie will not expand full height automatically - if (Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && me.getStyle('height') == 'auto') { + else if (Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && me.getStyle('height') == 'auto') { mask.setSize(undefined, me.getHeight()); } - return mask; }, @@ -121,37 +130,50 @@ Ext.Element.addMethods( maskMsg = data(dom, 'maskMsg'); if (mask) { + // Remove resource-intensive CSS expressions as soon as they are not required. + if (mask.dom.style.clearExpression) { + mask.dom.style.clearExpression('width'); + mask.dom.style.clearExpression('height'); + } if (maskMsg) { maskMsg.remove(); data(dom, 'maskMsg', undefined); } - + mask.remove(); data(dom, 'mask', undefined); - me.removeClass([XMASKED, XMASKEDRELATIVE]); + me.removeCls([XMASKED, XMASKEDRELATIVE]); } }, - /** - * Returns true if this element is masked + * Returns true if this element is masked. Also re-centers any displayed message within the mask. * @return {Boolean} */ isMasked : function() { - var m = data(this.dom, 'mask'); - return m && m.isVisible(); + var me = this, + mask = data(me.dom, 'mask'), + maskMsg = data(me.dom, 'maskMsg'); + + if (mask && mask.isVisible()) { + if (maskMsg) { + maskMsg.center(me); + } + return true; + } + return false; }, /** * Creates an iframe shim for this element to keep selects and other windowed objects from * showing through. - * @return {Ext.Element} The new shim element + * @return {Ext.core.Element} The new shim element */ createShim : function() { var el = document.createElement('iframe'), shim; - + el.frameBorder = '0'; - el.className = 'ext-shim'; + el.className = Ext.baseCSSPrefix + 'shim'; el.src = Ext.SSL_SECURE_URL; shim = Ext.get(this.dom.parentNode.insertBefore(el, this.dom)); shim.autoBoxAdjust = false;