`
zhouchaofei2010
  • 浏览: 1102892 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Ext 的mask

    博客分类:
  • ext
 
阅读更多

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

分享到:
评论

相关推荐

    Ext3_MaskLayer:Ext遮罩层

    默认情况下,遮罩层是半透明的黑色,但你可以通过修改`.x-mask`和`.x-mask-msg`类来改变其外观。 4. **事件处理**:可以监听遮罩层的`beforeshow`和`afterhide`事件,以便在显示和隐藏时执行额外的操作。 5. **与...

    chinese_wwm_ext_pytorch.zip

    标题 "chinese_wwm_ext_pytorch.zip" 提供了一个关于预训练模型的特定版本,即哈工大(哈尔滨工业大学)发布的BERT模型的WWM-EXT版本,且该模型是用PyTorch实现的。这一模型是自然语言处理领域的重要资源,特别针对...

    Mask RCNN环境部署

    运行`python setup.py build_ext --inplace`和`python setup.py build_ext install`命令进行编译和安装。如果在过程中遇到`No module named 'Cython'`的错误,可以通过`pip install Cython --install-option="--no-...

    chinese_wwm_ext_pytorch.rar

    在原始的BERT中,掩码操作是随机选择15%的输入词汇,然后将其中10%的词汇替换为[MASK]标记。然而,对于中文来说,由于词的边界不明显,简单地对每个字符进行掩码可能会破坏词的整体性。因此,Chinese_wwm_ext采用了...

    extjs mask load

    var mask = new Ext.LoadMask(Ext.getBody(), {msg:"请稍候..."}); // 在需要时显示遮罩 mask.show(); // 数据加载完成后隐藏遮罩 mask.hide(); ``` 至于“工具”,这可能是指开发者使用的一些辅助工具,比如调试器...

    Extjs的loading效果

    var mask = new Ext.LoadMask(Ext.getBody(), {msg:"正在加载..."}); mask.show(); // 数据加载完成后 mask.hide(); ``` 2. **自定义CSS样式** 默认的加载效果可能无法满足所有设计需求,因此我们可以通过CSS...

    CryEngine_ext文件解析

    在CryEngine中,`.ext`文件是用于配置着色器和扩展Sandbox材质编辑器功能的关键文件。这些文件定义了着色器类型的技术细节,允许开发者自定义渲染效果,并控制编辑器中的参数选项。 首先,`.ext`文件的用途主要分为...

    岳维功 ortp-realease.pdf

    mask pos inc ssrc candidate inc same ssrc count Iw recv pL cha on pay load tyre changed Telep on network error signa events allocator tp Sessiorlisu lticast ttl multicast loopback data Lng current tev...

    ext-core 3.0 09.11.02版

    ext-core最新版,从svn上check下来的,如果需要自己也可以check下来,打包一个出来。 自己整理的,里面有源代码,包含构建的js.里面加入了cookie、css、mask等常用js,中文手册,雅虎js压缩工具,所以稍微比官方大...

    facemask-plugin-staging.rar

    "facemask-plugin-staging.rar"这个压缩包文件,显然与一个专用于在OBS(Open Broadcaster Software)中实现面部遮罩功能的OpenGL插件有关。OBS是一款流行的开源直播软件,常被用于游戏直播、在线教育、视频制作等...

    解决EXT.NET在IE9下中文太小Default.css

    1. `.ext-el-mask-msg div`:这是EXT.NET弹出提示框的样式,将字体大小设置为12像素。 2. `.loading-indicator`:加载指示器的字体大小也调整为12像素,确保加载提示文本清晰可见。 3. `.x-tab-strip span.x-tab-...

    对初学者有帮助的Ext笔记

    这篇文档是针对初学者的Ext学习笔记,涵盖了JavaScript、CSS、数据库权限管理、JSP编码问题以及Flex/MXML等多个IT领域的基础知识。以下是这些知识点的详细解释: 1. JavaScript中的`replaceAll`方法:在JavaScript...

    detectron测试demo需要的权重R-101.pkl

    detectron测试demo需要的权重R-101.pkl,独立下载模型的测试代码是 python2 tools/infer_simple.py \ ...--image-ext jpg \ --wts model/MaskRCNN/e2e_mask_rcnn_R-101-FPN_2x_model_final.pkl \ Demo

    typo3插件

    EXT:mask是另一个表单构建器,提供模板化的表单设计,支持多语言、字段验证和表单提交后的操作,如邮件通知或数据库存储。 10. **EXT:mediamanager** 这个插件改进了TYPO3的媒体管理,使上传、组织和展示多媒体...

    cobaltstrike_release-20210907.7z

    + 修复了“listener_create_ext”攻击函数中缺少的主机轮换“策略”选项文档 ———————————————— 版权声明:本文为CSDN博主「a19770310」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处...

    easyui+增强窗体 demo_ext为实例文件

    4、增加mask(遮罩)扩展。 2013-8-26 更新 1、tree增加支持类标准数据格式加载,具体看demo或jquery.easyui.tree.extend.js文件开头说明。 2、修复datagrid在rowediting编辑风格时点击“确定”按钮无法提交问题。 ...

    EXTJS窗口示例

    myWindow.mask('请稍候...'); // 在一段时间后取消遮罩 Ext.Function.defer(function() { myWindow.unmask(); }, 3000); // 3秒后移除 // 或者对某个元素应用 var someElement = Ext.get('someElementId'); some...

    extjs实例教程附带源码

    <div id="loading-mask" style=""> ;padding-top:26%"> <img src="./scripts/ext/docs/resources/extanim32.gif" width="32" height="32" style="margin-right:8px;" align="middle"/>Loading... <!-- ...

Global site tag (gtag.js) - Google Analytics