Question

我有一个包含数据的extjs网格，我有一个按钮可以过滤商店中某些类型的数据，这个过滤器我还有一个加载掩码，应该在你按下按钮后和过滤器后出现函数已经完成，loadmask应该消失，但是在按下按钮之前它甚至都没有显示。

以下是按钮的代码

Ext.getCmp('overviewGrid').setLoading(true, this.el);
var allRecords = Ext.getCmp('overviewGrid').store.data;
Date.prototype.yyyymmdd = function() {
    var yyyy = this.getFullYear().toString();
    var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
    var dd  = this.getDate().toString();
    return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-'  + (dd[1]?dd:"0"+dd[0]); // padding
};
var today = new Date();
var todays = today.yyyymmdd();
allRecords.each( function(record){
    var store = Ext.getStore('LicenseAllStore');
    store.filter({
        filterFn: function (record) {
            return (record.data.expiry_date <= todays);
        }
    });
});
var complete = Ext.getCmp('complete').setDisabled(true);
var incomplete = Ext.getCmp('incomplete').setDisabled(true);

Ext.getCmp('overviewGrid').setLoading(false, this.el);

我不知道为什么它不起作用，不应该在之前显示loadmask，因为它是第一行要执行的。这是为了向用户显示他们按下按钮时发生的事情。

任何帮助表示感谢。

Answer 1

您可能知道，JavaScript在单个线程上运行。如果您在SO或您选择的搜索引擎上搜索javascript single thread，则会有很多阅读材料。但是，您希望在过滤网格的同一函数（和线程）中显示加载掩码。那不行。即使布局引擎有时间实际显示加载掩码，它也不会被动画化，因为线程会被过滤阻塞。过滤完成后，加载掩码将再次隐藏。

如果您要进行服务器端过滤，您将看到动画加载掩码，因为布局引擎将有足够的时间显示加载掩码，并且线程未被过滤阻止。

Here是类似的讨论，其中包含使用超时的解决方法。

Answer 2

我找到了答案，我只需要推迟我喜欢的功能

Ext.getCmp('overviewGrid').mask('Loading');

Ext.defer(function() {
            var allRecords = Ext.getCmp('overviewGrid').store.data;
Date.prototype.yyyymmdd = function() {
    var yyyy = this.getFullYear().toString();
    var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based
    var dd  = this.getDate().toString();
    return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-'  + (dd[1]?dd:"0"+dd[0]); // padding
};
var today = new Date();
var todays = today.yyyymmdd();
allRecords.each( function(record){
    var store = Ext.getStore('LicenseAllStore');
    store.filter({
        filterFn: function (record) {
            return (record.data.expiry_date <= todays);
        }
    });
});
var complete = Ext.getCmp('complete').setDisabled(true);
var incomplete = Ext.getCmp('incomplete').setDisabled(true);
            Ext.getCmp('overviewGrid').unmask();
}, 10);

//

在网格过滤期间，网格加载掩模不起作用

2 个答案: