简析 Ext.Element.mask()

最新推荐文章于 2023-05-04 15:09:16 发布

最新推荐文章于 2023-05-04 15:09:16 发布 · 260 阅读

文章标签：

#EXT #IE #CSS #Blog

framework / lib 专栏收录该内容

72 篇文章

订阅专栏

本文介绍了如何使用mask方法为HTML元素添加遮罩层以禁用用户交互，并详细解释了此方法的工作原理及其限制条件，特别是在不同元素类型上的应用。

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()，下次解析。