Question

我有一个面板，其中我还有两个面板。单击panel1时，将加载panel2中的信息。由于信息非常庞大，因此加载时会有一些延迟。在这个过渡期间，我希望添加一个加载掩码，用于暗示用户已加载它。

同样我也这样做了：

var myMask = new Ext.LoadMask(Ext.getCmp('eventsPanel'), {
        msg:"Please wait..."
});
myMask.show(); 
// eventsPanel is the main panel under which panel1 and panel2 lie.
// This code is in the selectionchange listener of panel1 whose code
// is inside the main eventsPanel code.

但是，屏幕上没有显示任何内容。它仍然是相同的，即，在一段时间内屏幕冻结，然后在2-3秒的延迟之后加载信息。你能告诉我哪里出错吗？

Answer 1

我建议你首先按照你的方式展示你的掩饰：

var myMask = new Ext.LoadMask(Ext.getCmp('eventsPanel'), {
        msg:"Please wait..."
});
myMask.show();

然后延迟task

var task = new Ext.util.DelayedTask(function(){
    //your loading panel2 with heavy data goes here
    myMask.hide();
});
//start the task after 500 miliseconds
task.delay(500);

这可以解决您的问题。

Answer 2

我按如下方式制作自定义面具：

var componentToMasK = Ext.ComponentQuery.query('#myChildComponent')[0];
var customMask = Ext.get(componentToMasK.getEl()).mask('My mask text...');

var task = new Ext.util.DelayedTask(function() {

    customMask.fadeOut({
        duration : 500,
        remove:true
    });

});

task.delay(1000);

通常，当在第一个组件中触发事件时，例如，在第二个组件中加载网格时，掩码会出现在两个组件中，以便通过单击第一个组件作为第二个组件来避免用户错误组件正在加载网格或正在加载掩码。

在这种情况下：

var componentToMasK = Ext.ComponentQuery.query('#myParentComponent')[0]; //HBox, BBox layout, tab, etc. with the two child components

希望这有帮助！

编辑：10-06-2015

＆＃39;持续时间：500＆＃39;和延迟（1000）＆＃39;只是为了说明。您可以根据应用蒙版的每个组件的需要调整这些值。

如果突然移除面具，用户甚至看不到加载邮件，这就是我使用fadeOut的原因。

因此，当您动态添加字段时，您可以在几乎任何组件（例如字段集）上应用蒙版。

任务 - ＆gt; http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.util.DelayedTask

Ex.get - ＆gt; http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext-method-get

fadeOut - ＆gt; http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.dom.Element-method-fadeOut

您还可以执行以下操作：

var task = new Ext.util.DelayedTask(function() {
   Ext.getBody().unmask();
});
task.delay(1000);

你可以在书中阅读更多关于这种技术的内容：掌握Ext JS - 第二版（Loiane Groner）

编辑：10-06-2015

还有一个细节：如果我们在Hbox布局上应用一个蒙版，包含一个子网格，我们有两个蒙版：HBOX蒙版和网格蒙版。在这些情况下，我动态关闭网格掩码：

var grid =  Ext.ComponentQuery.query('#griditemId')[0];
if(grid){
     grid.getView().setLoading(false);
}

希望这有帮助。

加载延迟extjs

2 个答案: