加载延迟extjs

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

希望对您有所帮助！

编辑：2015 年 6 月 10 日

中的'duration:500'和'delay(1000)'只是为了说明。您可以根据应用掩码的每个组件的需要调整这些值。

如果你突然摘下面具，用户甚至都看不到加载消息，这就是我使用 fadeOut 的原因。

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

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

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

淡出->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）

编辑：2015 年 6 月 10 日

再详细一点：如果我们在 Hbox 布局上应用一个掩码，包含一个网格作为子元素之一，我们有两个掩码：HBOX 掩码和网格掩码。在这些情况下，我动态关闭网格遮罩：

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

希望这对您有所帮助。

加载延迟extjs

Loading delay extjs

javascript

extjs

panel

loading

mask