Ext 的mask

http://yiminghe.iteye.com/blog/357294

 

mask : function () {}

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.

 

只有该元素能够添加子元素时，才能够调用mask成功 ，也就是说，一般只有块状元素才能有遮罩层。

 

Js代码  

1. mask: function (msg, msgCls) {  
2.     //如果当前元素没有定位 则要定位 ,因为灰色mask层要相对当前元素绝对定位 0，0  
3.     if (this.getStyle("position") == "static") {  
4.         this.addClass("x-masked-relative");  
5.     }  
6.     //mask 文字信息  
7.     if (this._maskMsg) {  
8.         this._maskMsg.remove();  
9.     }  
10.     //mask 层  
11.     if (this._mask) {  
12.         this._mask.remove();  
13.     }、  
14.     //创建mask层  
15.     this._mask = Ext.DomHelper.append(this.dom, {  
16.         cls: "ext-el-mask"  
17.     },  
18.     true);  
19.     /* 
20.  
21.           绝对定位  
22.           absolute 
23.            top 0 left 0 
24.             z-index:9999 
25.           目的是要遮住当前元素 
26.         */  
27.     this.addClass("x-masked");  
28.     this._mask.setDisplayed(true);  
29.     /* 
30.             同理设置遮蔽文字  并调用center相对当前元素中 ,center() TODO 简析 
31.        */  
32.     if (typeof msg == 'string') {  
33.         this._maskMsg = Ext.DomHelper.append(this.dom, {  
34.             cls: "ext-el-mask-msg",  
35.             cn: {  
36.                 tag: 'div'  
37.             }  
38.         },  
39.         true);  
40.         var mm = this._maskMsg;  
41.         mm.dom.className = msgCls ? "ext-el-mask-msg " + msgCls : "ext-el-mask-msg";  
42.         mm.dom.firstChild.innerHTML = msg;  
43.         mm.setDisplayed(true);  
44.         mm.center(this);  
45.     }  
46.     //设置 mask层 大小 刚好覆盖住 当前元素 ，在当前元素之上  
47.     if (Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && this.getStyle('height') == 'auto') { // ie will not expand full height automatically  
48.         this._mask.setSize(this.getWidth(), this.getHeight());  
49.     }  
50.     return this._mask;  
51. },  

 

     这是对一般元素的 mask ，但是遇到要 mask的是 body 时就会有问题了 ，所以ext里没 Ext.getBody().mask()，而是单独处理了，参见 Ext.window.show()， 下次解析。