EXTJS中使用遮罩效果LoadMask

EXTJS中使用遮罩效果LoadMask

 

在前台显示时，有时候想要在数据加载出来前对页面进行遮罩效果，防止用户在数据加载出来前点击其他引发相应事件的按钮，造成页面崩溃（当然，这在一定程度上是会影响用户体验的，但是有时候不得不时，也还是要用吧）。

 

EXTJs中使用遮罩效果，要看你怎么使用，可以在一个Ext.Ajax.request中使用，也可以在一个store中使用，在Ext.Ajax.request中使用的话，在发起请求前使用遮罩效果，在请求success时隐藏。在store中使用时，在一个store数据load前使用，load后隐藏。

 

如下，在一个store中使用遮罩效果。

 

var myMask = newExt.LoadMask(Ext.getBody(), {msg: “please wait….”});//定义一个mask var store = Ext.create('Ext.data.Store', { fields: 'name', autoLoad: true, proxy: { type: 'ajax', url: '/users.json', reader: { type: 'json', } }, listeners:{ beforeload:function(){ myMask.show(); }, load:function(){ myMask.hide(); } });

 

在Ext.Ajax.request中使用

 

myMask.show(); Ext.Ajax.request({ url: method: ‘GET’, success:function(){ myMask.hide(); }, Failure:function(){ myMask.hide(); } });