+<!DOCTYPE html>
<html>
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <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.3.0
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * 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() {
- 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 {
- <div id="method-Ext.Element-isVisible"></div>/**
- * 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)
+<span id='Ext-Element-method-isVisible'> /**
+</span> * 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;
}
return true;
},
- <div id="method-Ext.Element-isDisplayed"></div>/**
- * Returns true if display is not "none"
+<span id='Ext-Element-method-isDisplayed'> /**
+</span> * Returns true if display is not "none"
* @return {Boolean}
*/
isDisplayed : function() {
return !this.isStyle(DISPLAY, NONE);
},
- <div id="method-Ext.Element-enableDisplayMode"></div>/**
- * Convenience method for setVisibilityMode(Element.DISPLAY)
+<span id='Ext-Element-method-enableDisplayMode'> /**
+</span> * 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;
},
- <div id="method-Ext.Element-mask"></div>/**
- * Puts a mask over this element to disable user interaction. Requires core.css.
+<span id='Ext-Element-method-mask'> /**
+</span> * 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;
},
- <div id="method-Ext.Element-unmask"></div>/**
- * Removes a previously applied mask.
+<span id='Ext-Element-method-unmask'> /**
+</span> * Removes a previously applied mask.
*/
unmask : function() {
var me = this,
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]);
}
},
-
- <div id="method-Ext.Element-isMasked"></div>/**
- * Returns true if this element is masked
+<span id='Ext-Element-method-isMasked'> /**
+</span> * 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;
},
- <div id="method-Ext.Element-createShim"></div>/**
- * Creates an iframe shim for this element to keep selects and other windowed objects from
+<span id='Ext-Element-method-createShim'> /**
+</span> * 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;
}
};
}()
-);</pre>
+);</pre>
</body>
-</html>
\ No newline at end of file
+</html>
git.ithinksw.org / extjs.git / blobdiff