Roo/Element.js

[roojs1] / Roo / Element.js

diff --git a/Roo/Element.js b/Roo/Element.js
index d9f65c6..91fffea 100644 (file)
--- a/Roo/Element.js
+++ b/Roo/Element.js
@@ -124,6 +124,7 @@ if(opt.anim.isAnimated()){
          * @type String
          */
         defaultUnit : "px",
+        
         /**
          * Sets the element's visibility mode. When setVisible() is called it
          * will use this to determine whether to set the visibility or the display property.
@@ -2072,8 +2073,9 @@ if(opt.anim.isAnimated()){
          * @param {String} msgCls (optional) A css class to apply to the msg element
          * @return {Element} The mask  element
          */
-        mask : function(msg, msgCls){
-            if(this.getStyle("position") == "static"){
+        mask : function(msg, msgCls)
+        {
+            if(this.getStyle("position") == "static" && this.dom.tagName !== 'BODY'){
                 this.setStyle("position", "relative");
             }
             if(!this._mask){
@@ -2081,19 +2083,41 @@ if(opt.anim.isAnimated()){
             }
             this.addClass("x-masked");
             this._mask.setDisplayed(true);
+            
+            // we wander
+            var z = 0;
+            var dom = this.dom;
+            while (dom && dom.style) {
+                if (!isNaN(parseInt(dom.style.zIndex))) {
+                    z = Math.max(z, parseInt(dom.style.zIndex));
+                }
+                dom = dom.parentNode;
+            }
+            // if we are masking the body - then it hides everything..
+            if (this.dom == document.body) {
+                z = 1000000;
+                this._mask.setWidth(Roo.lib.Dom.getDocumentWidth());
+                this._mask.setHeight(Roo.lib.Dom.getDocumentHeight());
+            }
+           
             if(typeof msg == 'string'){
                 if(!this._maskMsg){
                     this._maskMsg = Roo.DomHelper.append(this.dom, {cls:"roo-el-mask-msg", cn:{tag:'div'}}, true);
                 }
                 var mm = this._maskMsg;
                 mm.dom.className = msgCls ? "roo-el-mask-msg " + msgCls : "roo-el-mask-msg";
-                mm.dom.firstChild.innerHTML = msg;
+                if (mm.dom.firstChild) { // weird IE issue?
+                    mm.dom.firstChild.innerHTML = msg;
+                }
                 mm.setDisplayed(true);
                 mm.center(this);
+                mm.setStyle('z-index', z + 102);
             }
             if(Roo.isIE && !(Roo.isIE7 && Roo.isStrict) && this.getStyle('height') == 'auto'){ // ie will not expand full height automatically
                 this._mask.setHeight(this.getHeight());
             }
+            this._mask.setStyle('z-index', z + 100);
+            
             return this._mask;
         },
 
@@ -2686,7 +2710,36 @@ if(opt.anim.isAnimated()){
         } : function(ns, name){
             var d = this.dom;
             return d.getAttributeNS(ns, name) || d.getAttribute(ns+":"+name) || d.getAttribute(name) || d[name];
+        },
+        
+        
+        /**
+         * Sets or Returns the value the dom attribute value
+         * @param {String|Object} name The attribute name (or object to set multiple attributes)
+         * @param {String} value (optional) The value to set the attribute to
+         * @return {String} The attribute value
+         */
+        attr : function(name){
+            if (arguments.length > 1) {
+                this.dom.setAttribute(name, arguments[1]);
+                return arguments[1];
+            }
+            if (typeof(name) == 'object') {
+                for(var i in name) {
+                    this.attr(i, name[i]);
+                }
+                return name;
+            }
+            
+            
+            if (!this.dom.hasAttribute(name)) {
+                return undefined;
+            }
+            return this.dom.getAttribute(name);
         }
+        
+        
+        
     };
 
     var ep = El.prototype;