Extjs 蒙板效果实现

Extjs 蒙板效果实现

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

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

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

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

下面分别对Grid，Form,Ext.Ajax自定义蒙板三种方式介绍实现方式：

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

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

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提交时，出现“数据保存中……”的提示

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对象实现自定义蒙版效果

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

    }

});