EXTJS的遮罩效果

转自：http://blog.csdn.net/yiyuhanmeng/article/details/8292352

Ext.LoadMask用于在加载数据时为元素做出类似于遮罩的效果。可以直接应用在元素上，如：

var loadMarsk = new Ext.LoadMask(document.body//元素、DOM节点或id, {
msg : '正在删除数据，请稍候。。。。。。',
removeMask : true// 完成后移除
});
loadMarsk .show(); //显示

然后在处理完成的方法中loadMarsk .hide();

如：

 var mk = new Ext.LoadMask(document.body, {
 msg: '正在更新数据，请稍候！',
 removeMask: true //完成后移除
 });
 mk.show(); //显示
 Ext.Ajax.request({
 url: 'roleAction.evi', // 发送get请求.
 method: 'GET',
 success: function() {
 mk.hide(); //关闭
 },
 failure: function() { mk.hide(); }
 });

还可以和Ext.data.Store结合，可将效果与Store的加载达到同步，如：

var store1 = new Ext.data.Store({...})

var loadMarsk = new Ext.LoadMask(document.body, {
        msg : 'Loading...',
        disabled : false,
        store : store1
    });

 

panel中使用：

var panel1 = new Ext.Panel({});

var loading = new Ext.LoadMask(Ext.get(panel1.getEl()),

{
        msg : 'Loading...',
        removeMask : true// 完成后移除
    });

 

在异步加载树中可以在其listeners中使用：

var loading = null;

tree = new Ext.tree.TreePanel({

    ...

    listeners: {

        'beforeload': function(){

            loading = new Ext.LoadMask(Ext.get(this.getEl()),{

               msg : 'Loading...',

               removeMask : true// 完成后移除
            });            

            loading.show();

        },//加载前

        'load': function(){loading.hide();}   //加载完成后

    }

});

 

在form的submit方法中有waitMsg属性来达到上面的效果 ,如：

form.submit({
waitMsg : '正在提交数据...'

.....})