2 * @class Ext.core.Element
4 Ext.core.Element.addMethods(
6 var VISIBILITY = "visibility",
10 XMASKED = Ext.baseCSSPrefix + "masked",
11 XMASKEDRELATIVE = Ext.baseCSSPrefix + "masked-relative",
12 data = Ext.core.Element.data;
16 * Checks whether the element is currently visible using both visibility and display properties.
17 * @param {Boolean} deep (optional) True to walk the dom and see if parent elements are hidden (defaults to false)
18 * @return {Boolean} True if the element is currently visible, else false
20 isVisible : function(deep) {
21 var vis = !this.isStyle(VISIBILITY, HIDDEN) && !this.isStyle(DISPLAY, NONE),
22 p = this.dom.parentNode;
24 if (deep !== true || !vis) {
28 while (p && !(/^body/i.test(p.tagName))) {
29 if (!Ext.fly(p, '_isVisible').isVisible()) {
38 * Returns true if display is not "none"
41 isDisplayed : function() {
42 return !this.isStyle(DISPLAY, NONE);
46 * Convenience method for setVisibilityMode(Element.DISPLAY)
47 * @param {String} display (optional) What to set display to when visible
48 * @return {Ext.core.Element} this
50 enableDisplayMode : function(display) {
51 this.setVisibilityMode(Ext.core.Element.DISPLAY);
53 if (!Ext.isEmpty(display)) {
54 data(this.dom, 'originalDisplay', display);
61 * Puts a mask over this element to disable user interaction. Requires core.css.
62 * This method can only be applied to elements which accept child nodes.
63 * @param {String} msg (optional) A message to display in the mask
64 * @param {String} msgCls (optional) A css class to apply to the msg element
65 * @return {Element} The mask element
67 mask : function(msg, msgCls) {
70 setExpression = dom.style.setExpression,
71 dh = Ext.core.DomHelper,
72 EXTELMASKMSG = Ext.baseCSSPrefix + "mask-msg",
76 if (!(/^body/i.test(dom.tagName) && me.getStyle('position') == 'static')) {
77 me.addCls(XMASKEDRELATIVE);
79 el = data(dom, 'maskMsg');
83 el = data(dom, 'mask');
88 mask = dh.append(dom, {cls : Ext.baseCSSPrefix + "mask"}, true);
89 data(dom, 'mask', mask);
92 mask.setDisplayed(true);
94 if (typeof msg == 'string') {
95 var mm = dh.append(dom, {cls : EXTELMASKMSG, cn:{tag:'div'}}, true);
96 data(dom, 'maskMsg', mm);
97 mm.dom.className = msgCls ? EXTELMASKMSG + " " + msgCls : EXTELMASKMSG;
98 mm.dom.firstChild.innerHTML = msg;
99 mm.setDisplayed(true);
102 // NOTE: CSS expressions are resource intensive and to be used only as a last resort
103 // These expressions are removed as soon as they are no longer necessary - in the unmask method.
104 // In normal use cases an element will be masked for a limited period of time.
105 // Fix for https://sencha.jira.com/browse/EXTJSIV-19.
106 // IE6 strict mode and IE6-9 quirks mode takes off left+right padding when calculating width!
107 if (!Ext.supports.IncludePaddingInWidthCalculation && setExpression) {
108 mask.dom.style.setExpression('width', 'this.parentNode.offsetWidth + "px"');
111 // Some versions and modes of IE subtract top+bottom padding when calculating height.
112 // Different versions from those which make the same error for width!
113 if (!Ext.supports.IncludePaddingInHeightCalculation && setExpression) {
114 mask.dom.style.setExpression('height', 'this.parentNode.offsetHeight + "px"');
116 // ie will not expand full height automatically
117 else if (Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && me.getStyle('height') == 'auto') {
118 mask.setSize(undefined, me.getHeight());
124 * Removes a previously applied mask.
126 unmask : function() {
129 mask = data(dom, 'mask'),
130 maskMsg = data(dom, 'maskMsg');
133 // Remove resource-intensive CSS expressions as soon as they are not required.
134 if (mask.dom.style.clearExpression) {
135 mask.dom.style.clearExpression('width');
136 mask.dom.style.clearExpression('height');
140 data(dom, 'maskMsg', undefined);
144 data(dom, 'mask', undefined);
145 me.removeCls([XMASKED, XMASKEDRELATIVE]);
149 * Returns true if this element is masked. Also re-centers any displayed message within the mask.
152 isMasked : function() {
154 mask = data(me.dom, 'mask'),
155 maskMsg = data(me.dom, 'maskMsg');
157 if (mask && mask.isVisible()) {
167 * Creates an iframe shim for this element to keep selects and other windowed objects from
169 * @return {Ext.core.Element} The new shim element
171 createShim : function() {
172 var el = document.createElement('iframe'),
175 el.frameBorder = '0';
176 el.className = Ext.baseCSSPrefix + 'shim';
177 el.src = Ext.SSL_SECURE_URL;
178 shim = Ext.get(this.dom.parentNode.insertBefore(el, this.dom));
179 shim.autoBoxAdjust = false;