Question

我有一个不太大的网格（30x20），单元格中有数字。我必须显示所有，以不同的方式计算它们（按列，行，某些单元格等）并将值写入某些单元格。此数据也是从db表字段中写入和读取的。一切正常，不包括简单（理论上）的掩模工具。在例如将数据写入表中的字段我尝试启动掩码并在完成时关闭它。我经常使用这样的“面具”，但只有在这种情况下我才有问题，无法解决。我按照以下方式准备这个面具：

msk = new Ext.LoadMask(Ext.getBody(), { msg: "data loading ..." });
msk.show();

[writing data loops]

msk.hide();
msk.destroy();

我也尝试使用grid obiect代替Ext.getBody（），但没有结果。我还发现程序以一种特殊的方式运行 - 我用来将数据写入表字段的循环被这个掩码“省略”，看起来循环在后台工作（异步）。

你会这么善意吗？

不，不，不，对不起，但我的描述不是很精确。将数据加载或写入数据库不是问题。假设商店在内存中，但我的问题是计算一些内容并写入网格。只是为了在屏幕上看到这个值。让我再次使用我的例子：

msk = new Ext.LoadMask(Ext.getBody(), { msg: "data loading ..." });
msk.show();

Ext.each(dataX.getRange(), function (X)  {
    Ext.each(dataY.getRange(), function (Y)  {
        …
        X.set('aaa', 10);
    …
}

msk.hide();
msk.destroy();

在这种情况下，这个面具不可见或太快看不到它。

与此同时，我发现（我认为）对我的问题有一个很好的描述，但仍无法为我找到解决方案。当我使用例如alert（）函数我看到这个掩码，当我使用延迟时，掩码太快了。解释如下：

原因很简单 - JS是单线程的。如果修改DOM（例如通过打开掩码），则在当前执行路径完成后立即进行实际更改。因为在一些耗时的任务开始时打开掩码，浏览器会等待DOM更改，直到完成为止。因为在方法结束时关闭了掩码，所以它可能根本不显示。解决方案很简单 - 在延迟一段时间后调用存储重建。*

Answer 1

我不知道你的代码看起来如何，但这是你可以实际使用的一些提示。

首先，加载操作是异步的，因此您需要显示该掩码，然后在加载数据时以某种方式销毁。

首先检查您的store配置中是否有autoLoad: false 如果是，那么我们可以进行下一步：

由于Extjs强烈关注MVC设计模式，您应该在项目的某个位置拥有controller。

我认为您在afterrender或按钮click事件上加载了数据，因此我们可以这样做：

在功能中，例如loadImportantData

loadImportantData: function(){
    var controller = this;
    var store = controller.getStore('YourStore'); //or Ext.getStore('YourStore'); depends on your configuration in controller
    var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
    myMask.show();
    store.load({
        callback: function (records, operation, success) {
            //this callback is fired when your store load all data.
            //then hide mask.
            myMask.hide();
        }
    });
}

加载数据后，面具将消失。

Answer 2

如果你有对网格的引用，你可以随时调用grid.setLoading(true)在网格上显示加载掩码。

ExtJS 4网格和掩码

2 个答案: