Question

我有一个面板，点击一个按钮我正在调用Ajax。在firefox上我可以在面板上看到loadmask但是在chrome上它无法正常工作。即使我在Ajax调用之前创建了一个单独的mask对象，但它只在Ajax调用完成后显示。我可以使用浏览器javascript控制台显示/隐藏掩码，但是当Ajax调用运行我的Ajax调用同步时，它不能正常工作。并仅限铬问题。

jsfiddle.net/naveen_ramawat/6d7pyohL/2 /

Answer 1

为全身使用面膜

Ext.getBody().mask('your message');

在ajax调用和使用之前

，

Ext.getBody().unmask();

内部ajax成功

更新了jsfiddle- http://jsfiddle.net/yq8e7na8/3/

（在asynchronos ajax调用之前设置超时）

Answer 2

请尝试使用此代码：

panel = Ext.getCmp('panel');
var myMask = new Ext.LoadMask(panel , {msg:"Loading..."});
myMask.show();

然后你可以隐藏在成功的回调函数中：

myMask.hide();

Answer 3

这就是事情：

我的Ajax调用是同步的。并仅限铬问题

已弃用同步AJAX，Chrome实际上已~~does not process it anymore~~，在控制台中显示此警告：

主线程上的同步XMLHttpRequest因不推荐使用它对最终用户的体验产生不利影响。如需更多帮助，检查http://xhr.spec.whatwg.org/。

使用异步AJAX。

更新：

Chrome实际上似乎处理了同步AJAX请求，但显示负载掩码失败。看起来，与Firefox不同，Chrome在移动到下一段JavaScript代码之前不会等待接口实际呈现掩码。而且因为下一位是同步AJAX调用，冻结所有内容，然后是myMask.hide() - 我们永远不会看到掩码。

要在Chrome中查看遮罩，您可以在myMask.show();之后稍微延迟（在我的机器上足够1毫秒）：

handler(){
                var myMask = new Ext.LoadMask(mypanel , {msg:"Loading..."});
                myMask.show();
                setTimeout(function(){
                    Ext.Ajax.request({
                        url: '/echo/js/?delay=5&js=',
                        method: 'GET',          
                        async: false
                    });
                    console.log('hiding mask');
                    myMask.hide();            
                }, 1);
            }

在延迟期间，在浏览器冻结进行同步AJAX调用之前渲染掩码。工作小提琴：http://jsfiddle.net/6d7pyohL/4/

Answer 4

var myMask = new Ext.LoadMask(Ext.getBody(),{msg:"please wait..."});
$(document).ajaxStart(function(){
    myMask.show();
});
$(document).ajaxComplete(function(){
    myMask.hide();
});

jQuery.ajax({
    url:"abc.php",
    async:true,
    type:"POST",
    success:function(data){

    }
});

而不是async：false，请使用 async：true

Extjs面板加载掩码不在chrome上工作

4 个答案: