注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

飞天心宏的博客

依稀旧梦似曾见,相逢只恨缘太迟

 
 
 

日志

 
 
关于我

出身数学,爱好文学,从事软件开发工作。一个阳光、幽默、热爱生活的男孩子,在追求理想的路上风雨无阻,勇往直前,崇尚“梦想有多远,我们就走多远”!

网易考拉推荐

Extjs 蒙板效果实现  

2010-12-22 17:14:44|  分类: Extjs |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Extjs 蒙板效果实现

在以下情况可能会用的蒙板效果:

1、在数据提交时,我们一般是不希望用户再去执行其他的操作

2、在数据加载时,提示用户正在加载

3、在处理复杂操作时,提交响应速度有点慢(超过1秒时),需要给客户提示系统正在处理,避免认为死机,反复操作

 

下面分别对GridForm,Ext.Ajax自定义蒙板三种方式介绍实现方式:

如果速度太快,还是有可能看不到效果的

 

1、grid加载数据时,显示“数据正在加载中….”的提示

 

Extjs 蒙板效果实现 - 飞天心宏 - 飞天心宏的博客

  

var grid = new Ext.grid.GridPanel(

{

    store: store,

    renderTo: 'Grid',

    sm: sm,

    tbar: toolbar,

    loadMask: true,  //grid加载数据,蒙版通过loadMask设置

    title: '选项列表',

    height: 470,

    viewConfig:

    {

        forceFit: true

    },  

//……

 

 

2、form提交时,出现“数据保存中……”的提示

 

Extjs 蒙板效果实现 - 飞天心宏 - 飞天心宏的博客

 

form.submit(

{

    url : Vars.TRUrl,

    waitMsg : '数据保存中...',  //form表单蒙版通过waitMsg设置

    params :

    {

       sign : 'ItemResultNewOrEdit',

       newOrEdit : newOrEdit

    },

    success : function(form, action)

    {

       if(action.result.success)

       {

           Vars.Grid.store.reload();

       }

       else

       {

           Ext.Msg.alert('提交失败', action.result.message);

       }

       btnCommit.enable();

       win.win.hide();

    },

    failure : function(form, action)

    {

       GS.Msg.Error(null, '提交失败,系统发生异常,异常类别为:' + action.failureType);

       btnCommit.enable();

    }

});

 

3、使用Extjs.Ajax方法异步请求

思路:借助Extjs.LoadMask对象实现自定义蒙版效果

 

Extjs 蒙板效果实现 - 飞天心宏 - 飞天心宏的博客

 

 

var waitMask = new Ext.LoadMask(Ext.getBody(), { msg: "系统正在处理数据,请稍候..." });  //定义一个

waitMask.show();//show方法显示

btnGenerate.disable();

Ext.Ajax.request(

{

    method: 'POST',

    url: Vars.Url,

    success: function(response) {

        //转成对象

        var obj = Ext.decode(response.responseText);

        if (obj.success) {

            Twi.Msg.Info(null, "原始记录单生成成功!");

        }

        else {

            Twi.Msg.Info('操作失败', obj.message);

        }

        btnGenerate.enable();

        waitMask.hide();  //hide()方法隐藏

    },

    failure: function(response, action) {

        Twi.Msg.Error(null, '提交失败,系统发生异常,异常类别为:' + action.failureType);

        btnGenerate.enable();

        waitMask.hide();//隐藏

    },

    params:

    {

        sign: 'GenerateOriginalList',

        MgscType: Vars.MgscType,

        TaskID: Vars.TaskID,

        TestItemID: Vars.TestItemID

    }

});

  评论这张
 
阅读(1662)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017