3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
10 Ext.Element.addMethods(
\r
12 var VISIBILITY = "visibility",
\r
13 DISPLAY = "display",
\r
16 XMASKED = "x-masked",
\r
17 XMASKEDRELATIVE = "x-masked-relative",
\r
18 data = Ext.Element.data;
\r
22 * Checks whether the element is currently visible using both visibility and display properties.
\r
23 * @param {Boolean} deep (optional) True to walk the dom and see if parent elements are hidden (defaults to false)
\r
24 * @return {Boolean} True if the element is currently visible, else false
\r
26 isVisible : function(deep) {
\r
27 var vis = !this.isStyle(VISIBILITY,HIDDEN) && !this.isStyle(DISPLAY,NONE),
\r
28 p = this.dom.parentNode;
\r
29 if(deep !== true || !vis){
\r
32 while(p && !/body/i.test(p.tagName)){
\r
33 if(!Ext.fly(p, '_isVisible').isVisible()){
\r
42 * Returns true if display is not "none"
\r
45 isDisplayed : function() {
\r
46 return !this.isStyle(DISPLAY, NONE);
\r
50 * Convenience method for setVisibilityMode(Element.DISPLAY)
\r
51 * @param {String} display (optional) What to set display to when visible
\r
52 * @return {Ext.Element} this
\r
54 enableDisplayMode : function(display){
\r
55 this.setVisibilityMode(Ext.Element.DISPLAY);
\r
56 if(!Ext.isEmpty(display)){
\r
57 data(this.dom, 'originalDisplay', display);
\r
63 * Puts a mask over this element to disable user interaction. Requires core.css.
\r
64 * This method can only be applied to elements which accept child nodes.
\r
65 * @param {String} msg (optional) A message to display in the mask
\r
66 * @param {String} msgCls (optional) A css class to apply to the msg element
\r
67 * @return {Element} The mask element
\r
69 mask : function(msg, msgCls){
\r
73 EXTELMASKMSG = "ext-el-mask-msg",
\r
77 if(me.getStyle("position") == "static"){
\r
78 me.addClass(XMASKEDRELATIVE);
\r
80 if((el = data(dom, 'maskMsg'))){
\r
83 if((el = data(dom, 'mask'))){
\r
87 mask = dh.append(dom, {cls : "ext-el-mask"}, true);
\r
88 data(dom, 'mask', mask);
\r
90 me.addClass(XMASKED);
\r
91 mask.setDisplayed(true);
\r
92 if(typeof msg == 'string'){
\r
93 var mm = dh.append(dom, {cls : EXTELMASKMSG, cn:{tag:'div'}}, true);
\r
94 data(dom, 'maskMsg', mm);
\r
95 mm.dom.className = msgCls ? EXTELMASKMSG + " " + msgCls : EXTELMASKMSG;
\r
96 mm.dom.firstChild.innerHTML = msg;
\r
97 mm.setDisplayed(true);
\r
100 if(Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && me.getStyle('height') == 'auto'){ // ie will not expand full height automatically
\r
101 mask.setSize(undefined, me.getHeight());
\r
107 * Removes a previously applied mask.
\r
109 unmask : function(){
\r
112 mask = data(dom, 'mask'),
\r
113 maskMsg = data(dom, 'maskMsg');
\r
117 data(dom, 'maskMsg', undefined);
\r
120 data(dom, 'mask', undefined);
\r
122 me.removeClass([XMASKED, XMASKEDRELATIVE]);
\r
126 * Returns true if this element is masked
\r
127 * @return {Boolean}
\r
129 isMasked : function(){
\r
130 var m = data(this.dom, 'mask');
\r
131 return m && m.isVisible();
\r
135 * Creates an iframe shim for this element to keep selects and other windowed objects from
\r
137 * @return {Ext.Element} The new shim element
\r
139 createShim : function(){
\r
140 var el = document.createElement('iframe'),
\r
142 el.frameBorder = '0';
\r
143 el.className = 'ext-shim';
\r
144 el.src = Ext.SSL_SECURE_URL;
\r
145 shim = Ext.get(this.dom.parentNode.insertBefore(el, this.dom));
\r
146 shim.autoBoxAdjust = false;
\r