3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
18 Ext.Element.addMethods(
20 var VISIBILITY = "visibility",
24 XMASKED = Ext.baseCSSPrefix + "masked",
25 XMASKEDRELATIVE = Ext.baseCSSPrefix + "masked-relative",
26 data = Ext.Element.data;
30 * Checks whether the element is currently visible using both visibility and display properties.
31 * @param {Boolean} [deep=false] True to walk the dom and see if parent elements are hidden
32 * @return {Boolean} True if the element is currently visible, else false
34 isVisible : function(deep) {
35 var vis = !this.isStyle(VISIBILITY, HIDDEN) && !this.isStyle(DISPLAY, NONE),
36 p = this.dom.parentNode;
38 if (deep !== true || !vis) {
42 while (p && !(/^body/i.test(p.tagName))) {
43 if (!Ext.fly(p, '_isVisible').isVisible()) {
52 * Returns true if display is not "none"
55 isDisplayed : function() {
56 return !this.isStyle(DISPLAY, NONE);
60 * Convenience method for setVisibilityMode(Element.DISPLAY)
61 * @param {String} display (optional) What to set display to when visible
62 * @return {Ext.Element} this
64 enableDisplayMode : function(display) {
65 this.setVisibilityMode(Ext.Element.DISPLAY);
67 if (!Ext.isEmpty(display)) {
68 data(this.dom, 'originalDisplay', display);
75 * Puts a mask over this element to disable user interaction. Requires core.css.
76 * This method can only be applied to elements which accept child nodes.
77 * @param {String} msg (optional) A message to display in the mask
78 * @param {String} msgCls (optional) A css class to apply to the msg element
79 * @return {Ext.Element} The mask element
81 mask : function(msg, msgCls) {
84 setExpression = dom.style.setExpression,
86 EXTELMASKMSG = Ext.baseCSSPrefix + "mask-msg",
90 if (!(/^body/i.test(dom.tagName) && me.getStyle('position') == 'static')) {
91 me.addCls(XMASKEDRELATIVE);
93 el = data(dom, 'maskMsg');
97 el = data(dom, 'mask');
102 mask = dh.append(dom, {cls : Ext.baseCSSPrefix + "mask"}, true);
103 data(dom, 'mask', mask);
106 mask.setDisplayed(true);
108 if (typeof msg == 'string') {
109 var mm = dh.append(dom, {cls : EXTELMASKMSG, cn:{tag:'div'}}, true);
110 data(dom, 'maskMsg', mm);
111 mm.dom.className = msgCls ? EXTELMASKMSG + " " + msgCls : EXTELMASKMSG;
112 mm.dom.firstChild.innerHTML = msg;
113 mm.setDisplayed(true);
116 // NOTE: CSS expressions are resource intensive and to be used only as a last resort
117 // These expressions are removed as soon as they are no longer necessary - in the unmask method.
118 // In normal use cases an element will be masked for a limited period of time.
119 // Fix for https://sencha.jira.com/browse/EXTJSIV-19.
120 // IE6 strict mode and IE6-9 quirks mode takes off left+right padding when calculating width!
121 if (!Ext.supports.IncludePaddingInWidthCalculation && setExpression) {
122 mask.dom.style.setExpression('width', 'this.parentNode.offsetWidth + "px"');
125 // Some versions and modes of IE subtract top+bottom padding when calculating height.
126 // Different versions from those which make the same error for width!
127 if (!Ext.supports.IncludePaddingInHeightCalculation && setExpression) {
128 mask.dom.style.setExpression('height', 'this.parentNode.offsetHeight + "px"');
130 // ie will not expand full height automatically
131 else if (Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && me.getStyle('height') == 'auto') {
132 mask.setSize(undefined, me.getHeight());
138 * Removes a previously applied mask.
140 unmask : function() {
143 mask = data(dom, 'mask'),
144 maskMsg = data(dom, 'maskMsg');
147 // Remove resource-intensive CSS expressions as soon as they are not required.
148 if (mask.dom.style.clearExpression) {
149 mask.dom.style.clearExpression('width');
150 mask.dom.style.clearExpression('height');
154 data(dom, 'maskMsg', undefined);
158 data(dom, 'mask', undefined);
159 me.removeCls([XMASKED, XMASKEDRELATIVE]);
163 * Returns true if this element is masked. Also re-centers any displayed message within the mask.
166 isMasked : function() {
168 mask = data(me.dom, 'mask'),
169 maskMsg = data(me.dom, 'maskMsg');
171 if (mask && mask.isVisible()) {
181 * Creates an iframe shim for this element to keep selects and other windowed objects from
183 * @return {Ext.Element} The new shim element
185 createShim : function() {
186 var el = document.createElement('iframe'),
189 el.frameBorder = '0';
190 el.className = Ext.baseCSSPrefix + 'shim';
191 el.src = Ext.SSL_SECURE_URL;
192 shim = Ext.get(this.dom.parentNode.insertBefore(el, this.dom));
193 shim.autoBoxAdjust = false;