`
langgufu
  • 浏览: 2307123 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJs LoadMask相关的遮罩效果

EXT 
阅读更多
Ext.onReady(function() {

     var a = Ext.MessageBox.wait('content', 'title');  

    (function() {

      a.hide() 

  }).defer(3000); //隐藏延迟,可简化为 a.hide.defer(3000,a);

  var mask = new Ext.LoadMask(Ext.getBody(), {                         

msg : 'please waiting ... ',                          

removeMask : true

});

mask.show();//使用 mask 需手动调用show() 方法下                            

(function() {

mask.hide();

}).defer(4000);

}); 

---------------------------------------------

var t=0;  
function progress(){  
    t=0;  
    var msgbox=Ext.Msg.progress("请稍候","保存数据","正在保存数据, 请稍候。。。。。。");//显示等待对话框  
    updateProgress();  
}  
function updateProgress(){  //更新进度条  
    t+=0.2;  
    Ext.Msg.updateProgress(t);  
    if(t>1)  
        Ext.Msg.hide();  
    else 
        updateProgress.defer(700);  
}  
progress();

------------------------------------------------------

var mask = new Ext.LoadMask("ID", {
     msg : '正在加载...'
     });
     mask.show();
    borrowhistory_store.load({
                params : {
                    webname : "all",
                    start : 0,
                    limit : borrowhistory_pageTool.pageSize
                }
            });
     borrowhistory_store.on("load", function() {
     mask.hide();
     })




Ext.LoadMask用于在加载数据时为元素做出类似于遮罩的效果。可以直接应用在元素上,如:

var loadMarsk = new Ext.LoadMask(document.body//元素、DOM节点或id, {
     msg : '正在删除数据,请稍候。。。。。。',
     removeMask : true// 完成后移除
});
loadMarsk .show(); //显示

然后在处理完成的方法中loadMarsk .hide();

还可以和Ext.data.Store结合,可将效果与Store的加载达到同步,如:

var loadMarsk = new Ext.LoadMask(document.body, {
    msg : '数据处理中!',
    disabled : false,
    store : store
});

在form的submit方法中有waitMsg属性来达到上面的效果 ,如:

form.submit({
     waitMsg : '正在提交数据...'

分享到:
评论

相关推荐

    extjs mask load

    标题“extjs mask load”指的是ExtJS框架中的一个特定功能,即在数据加载或处理过程中显示遮罩(mask)来指示用户操作正在进行中。在Web应用程序中,这通常用于提升用户体验,防止用户在数据更新期间进行其他交互,...

    Extjs的loading效果

    在ExtJS中,我们可以使用`Ext.LoadMask`类来创建一个全局或者局部的加载遮罩。加载遮罩会在指定元素上覆盖一层半透明的背景,并显示一个加载图标或文字。例如,我们可以为整个页面设置加载遮罩: ```javascript ...

    ExtJs的Ext.Ajax.request实现waitMsg等待提示效果

    在使用ExtJs开发Web应用程序时,实现用户在进行耗时的Ajax请求时的等待提示效果是一个常见的需求。ExtJs提供了Ext.Ajax.request方法来进行Ajax请求,但默认情况下,该方法不支持waitMsg属性,不像fp.form.submit方法...

    jquery loading(遮罩)插件

    jQuery Loading插件用于当DOM元素加载或变化期间,对其进行遮挡阻止用户操作并告知有些后台任务还在进行。实现“正在加载中…”的效果。整个插件只有1kb左右。效果跟extjs遮罩(锁屏)效果基本一样。

    ExtJs表格点击超链接获取行的值

    - `loadMask`: 是否显示加载遮罩。 ### 结论 在ExtJs中,通过合理利用`renderer`和选择模型,我们可以轻松地在表格中添加超链接,并在点击时获取行数据。同时,丰富的配置选项使得我们能够高度定制表格的功能和...

    extjs tree

    如果需要异步加载,还需设置`loadMask`(加载遮罩)和`async`(异步加载标志)。 4. 自定义节点模板:通过`viewConfig`配置项,可以自定义节点的样式和行为,例如使用`tpl`和`indent`来控制节点的显示。 5. 绑定...

    extjs ajax tree(js动态树,无需递归)

    - `loadMask`:是否显示加载遮罩。 - `async`:是否启用异步加载。 3. **配置TreeStore**:创建一个`Ext.data.TreeStore`实例,设置其`model`属性为树节点的数据模型,并配置`proxy`来指定如何通过AJAX获取数据。...

    Extjs的tree

    通过配置`loadMask`可以在数据加载时显示遮罩,提高用户体验。 10. **扩展和插件** ExtJS Tree支持各种插件,如`checkboxmodel`(复选框模型)和`gridviewdragdrop`(拖放插件),可以轻松地为TreePanel添加新功能...

    Extjs Grid 操作大全

    loadMask: true, // 加载遮罩 tbar: ['->', { text: 'Double Click Test', handler: function() { alert('Double click test button clicked.'); } }], listeners: { celldblclick: function(grid, ...

    动态加载extjs tree

    7. **配置项**: 在配置Tree和TreeStore时,还需要注意一些与动态加载相关的配置项,如`rootVisible`(是否显示根节点)、`loadMask`(加载时是否显示遮罩)、`async`(启用异步加载)等。 通过以上介绍,我们可以...

    EXTJS窗口示例

    在"EXTJS窗口示例"中,我们将会探讨EXTJS如何实现窗口(Window)组件,以及与之相关的进度条(ProgressBar)和等待指示器(WaitIndicator)功能。 EXTJS的窗口组件提供了一种弹出式的界面元素,可以用来展示独立于...

    Ext2 核心 API 中文详解 ExtJS2.0实用简明教程 ExtJS2.0教程 ExtJS2.0实用简明教程(easyjf) ext中文API+ sample

    8. **Ext.LoadMask**: 载入遮罩,用于在执行耗时操作时显示等待提示。 **三、ExtJS 2.0教程内容** 1. **基础篇**: 介绍ExtJS的基本架构和使用环境,讲解如何创建第一个ExtJS应用。 2. **组件篇**: 详述各组件的...

    Ext3_MaskLayer:Ext遮罩层

    在ExtJS中,遮罩层主要通过`Ext.LoadMask`类来实现,它可以覆盖整个窗口或特定的组件,显示一个等待图标和可选的消息文本。`Ext.LoadMask`提供了以下关键功能: 1. **创建遮罩层**:你可以为任何Ext组件,如`Ext....

    ExtJs TreePanel应用

    9. **loadMask**: 是否在加载数据时显示遮罩层,提供更好的用户体验。 TreePanel还支持多种事件,例如`itemclick`, `itemcontextmenu`, `beforeitemexpand`等,这些事件可以绑定回调函数以处理用户的交互行为。例如...

    JavaScript的ExtJS框架中表格的编写教程

    通过上述讲解,我们可以了解到ExtJS框架中表格组件的编写过程和相关知识点。ExtJS的表格通过一系列丰富的API和配置项,为开发人员提供了强大的自定义能力,可以创建出功能完备且视觉效果良好的表格界面。无论是简单...

    ExtJs设置GridPanel表格文本垂直居中示例

    在提供的代码片段中,`GridPanel`的配置对象包含了多个属性,如`xtype`, `id`, `frame`, `region`, `title`, `columnLines`, `loadMask`, `store`, `viewConfig`, `selModel`, `columns`, `bbar`, 和 `tbar`。...

    ExtJS Grid使用SimpleStore、多选框的方法

    在这个实例中,我们设置了几个属性:renderTo指定了Grid渲染的位置,cm是列模型,sm是选择模型,store是之前创建的数据存储,loadMask设置为true表示加载数据时显示遮罩层。这里,"grid"是页面上已经存在的一个DOM...

    基于ExtJs在页面上window再调用Window的事件处理方法

    在gridpanel的配置中,除了列定义(columns)和store以外,还设置了加载遮罩(loadMask)以提示用户数据正在加载中。同时,通过设置window的各种属性,如id、title、modal、closeAction、constrain、autoScroll等,...

    汇总Extjs中GridPanel的各个属性与方法.doc.pdf

    9. **loadMask**: 数据加载时是否显示遮罩层,提供用户体验。 10. **view**: 指定表格的视图类型,通常为Ext.grid.GridView。 11. **viewConfig**: 视图的配置对象,可以调整视图的行为和样式。 12. **...

    Extjs4 GridPanel的主要配置参数详细介绍

    loadMask参数则决定在数据加载过程中是否显示遮罩层;view和viewConfig则提供了更多自定义表格视图的选项,比如设置最大高度、最小列宽和是否隐藏表头等。 对于GridPanel的方法,诸如getColumnModel、...

Global site tag (gtag.js) - Google Analytics