简析 Ext.Element.mask()

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成功 ，也就是说，一般只有块状元素才能有遮罩层。

 

mask: function (msg, msgCls) {
    //如果当前元素没有定位 则要定位 ,因为灰色mask层要相对当前元素绝对定位 0，0
    if (this.getStyle("position") == "static") {
        this.addClass("x-masked-relative");
    }
    //mask 文字信息
    if (this._maskMsg) {
        this._maskMsg.remove();
    }
    //mask 层
    if (this._mask) {
        this._mask.remove();
    }、
    //创建mask层
    this._mask = Ext.DomHelper.append(this.dom, {
        cls: "ext-el-mask"
    },
    true);
    /*

          绝对定位 
          absolute
           top 0 left 0
            z-index:9999
          目的是要遮住当前元素
        */
    this.addClass("x-masked");
    this._mask.setDisplayed(true);
    /*
            同理设置遮蔽文字  并调用center相对当前元素中 ,center() TODO 简析
       */
    if (typeof msg == 'string') {
        this._maskMsg = Ext.DomHelper.append(this.dom, {
            cls: "ext-el-mask-msg",
            cn: {
                tag: 'div'
            }
        },
        true);
        var mm = this._maskMsg;
        mm.dom.className = msgCls ? "ext-el-mask-msg " + msgCls : "ext-el-mask-msg";
        mm.dom.firstChild.innerHTML = msg;
        mm.setDisplayed(true);
        mm.center(this);
    }
    //设置 mask层 大小 刚好覆盖住 当前元素 ，在当前元素之上
    if (Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && this.getStyle('height') == 'auto') { // ie will not expand full height automatically
        this._mask.setSize(this.getWidth(), this.getHeight());
    }
    return this._mask;
},

 

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

评论

2 楼 yiminghe 2009-06-26  

我是指 body mask 不太好，可能你想要的效果是 整个屏幕窗口mask

body 和 屏幕窗口还是有差距的

参见：http://yiminghe.iteye.com/blog/413116

1 楼 qixiaopeng 2009-06-26  

我在代码中使用过ExtJS的Ext.getBody().mask()，版本是2.2。所以对最后一行的描述产生怀疑