Extjs 蒙板效果实现.doc

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 } });