X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/docs/source/Element.fx-more.html diff --git a/docs/source/Element.fx-more.html b/docs/source/Element.fx-more.html index ad279f89..38adb267 100644 --- a/docs/source/Element.fx-more.html +++ b/docs/source/Element.fx-more.html @@ -1,45 +1,48 @@ + - + The source code - - + + + + - -
/*!
- * 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.Element
  */
 Ext.Element.addMethods(
     function() {
-        var VISIBILITY      = "visibility",
-            DISPLAY         = "display",
-            HIDDEN          = "hidden",
-            NONE            = "none",
-            XMASKED         = "x-masked",
-            XMASKEDRELATIVE = "x-masked-relative",
+        var VISIBILITY      = "visibility",
+            DISPLAY         = "display",
+            HIDDEN          = "hidden",
+            NONE            = "none",
+            XMASKED         = Ext.baseCSSPrefix + "masked",
+            XMASKEDRELATIVE = Ext.baseCSSPrefix + "masked-relative",
             data            = Ext.Element.data;
 
         return {
-            
/** - * Checks whether the element is currently visible using both visibility and display properties. - * @param {Boolean} deep (optional) True to walk the dom and see if parent elements are hidden (defaults to false) + /** + * Checks whether the element is currently visible using both visibility and display properties. + * @param {Boolean} [deep=false] True to walk the dom and see if parent elements are hidden * @return {Boolean} True if the element is currently visible, else false */ isVisible : function(deep) { - var vis = !this.isStyle(VISIBILITY, HIDDEN) && !this.isStyle(DISPLAY, NONE), + 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))) { + + while (p && !(/^body/i.test(p.tagName))) { if (!Ext.fly(p, '_isVisible').isVisible()) { return false; } @@ -48,79 +51,94 @@ Ext.Element.addMethods( return true; }, -
/** - * Returns true if display is not "none" + /** + * Returns true if display is not "none" * @return {Boolean} */ isDisplayed : function() { return !this.isStyle(DISPLAY, NONE); }, -
/** - * Convenience method for setVisibilityMode(Element.DISPLAY) + /** + * Convenience method for setVisibilityMode(Element.DISPLAY) * @param {String} display (optional) What to set display to when visible * @return {Ext.Element} this */ enableDisplayMode : function(display) { this.setVisibilityMode(Ext.Element.DISPLAY); - + if (!Ext.isEmpty(display)) { data(this.dom, 'originalDisplay', display); } - + return this; }, -
/** - * Puts a mask over this element to disable user interaction. Requires core.css. + /** + * Puts a mask over this element to disable user interaction. Requires core.css. * This method can only be applied to elements which accept child nodes. * @param {String} msg (optional) A message to display in the mask * @param {String} msgCls (optional) A css class to apply to the msg element - * @return {Element} The mask element + * @return {Ext.Element} The mask element */ mask : function(msg, msgCls) { var me = this, dom = me.dom, + setExpression = dom.style.setExpression, dh = Ext.DomHelper, - EXTELMASKMSG = "ext-el-mask-msg", + EXTELMASKMSG = Ext.baseCSSPrefix + "mask-msg", el, mask; - if (!(/^body/i.test(dom.tagName) && me.getStyle('position') == 'static')) { - me.addClass(XMASKEDRELATIVE); + if (!(/^body/i.test(dom.tagName) && me.getStyle('position') == 'static')) { + 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); - mm.dom.className = msgCls ? EXTELMASKMSG + " " + msgCls : EXTELMASKMSG; + mm.dom.className = msgCls ? EXTELMASKMSG + " " + msgCls : EXTELMASKMSG; mm.dom.firstChild.innerHTML = msg; 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; }, -
/** - * Removes a previously applied mask. + /** + * Removes a previously applied mask. */ unmask : function() { var me = this, @@ -129,37 +147,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 + /** + * Creates an iframe shim for this element to keep selects and other windowed objects from * showing through. * @return {Ext.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; @@ -167,6 +198,6 @@ Ext.Element.addMethods( } }; }() -);
+);
- \ No newline at end of file +