ExtJS 4 网格和掩码的一些问题答案

【问题标题】：ExtJS 4 grid and some problems with maskExtJS 4 网格和掩码的一些问题
【发布时间】：2015-07-24 09:49:50
【问题描述】：

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

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

[writing data loops]

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

我也尝试使用网格对象代替 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 更改，直到它完成。因为您在方法结束时关闭了遮罩，所以它可能根本不显示。解决方案很简单 - 延迟一段时间后调用存储重建。*

【问题讨论】：

如果操作很简单，不需要太长时间，你不会看到任何面具。

标签： javascript extjs

【解决方案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();
        }
    });
}

加载数据后，您的掩码将消失。

【讨论】：

【解决方案2】：

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

【讨论】：