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

}

});