ExtJS Tree checkchange 监听器不显示掩码

Question

我有一个带有复选框的 Ext 树，当单击任何复选框时，它将启动一个可能需要任意时间的进程。为了使用户更加友好，我想在树中添加一个加载掩码。但是，当进入侦听器函数时，UI 会锁定并且在侦听器函数完成之前不会更新。该问题出现在 ExtJs 4.2 - 7.5 经典版中。

如果我在包含处理代码的掩码后添加“setTimeout()”，或者在掩码后设置断点，则会显示掩码。问题在于 IE 似乎不支持 setTimeout() 函数。

这是一个示例代码，处理函数只是考虑一个非常大的数字来模拟处理时间 - https://fiddle.sencha.com/#view/editor&fiddle/3hl2

这是实际代码：

Ext.application({
    name: 'ExtTest',
    launch: function () {
        Ext.create('ExtTest.view.Viewport');
    }
});

Ext.define('ExtTest.view.Viewport', {
    extend: 'Ext.container.Viewport',
    initComponent: function () {
        this.items = [{
            xtype: 'treetest'
        }]
        this.callParent();
    }
});

Ext.define('ExtTest.view.TreeTest', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.treetest',
    height: '100%',
    width: '100%',

    initComponent: function () {
        console.log('Creating tree');
        var me = this;
        var store = Ext.create('Ext.data.TreeStore', {
            fields: ['text'],
            root: {
                text: 'root',
                expanded: true,
                children: me.getTreeData()
            }

        })

        Ext.applyIf(this, {
            store: store,
            columns: [{
                width: "100%",
                xtype: 'treecolumn',
                dataIndex: 'text'
            }],
            listeners: {
                checkchange: function () {
                    me.getEl().mask('loading');
                    me.factorNumber(500000000);
                    me.getEl().unmask();
                }
            }
        });

        this.callParent();
    },

    factorNumber: function (aNumber) {
        for (var i = 1; i <= aNumber; i++) {
            if (aNumber % i === 0) {
                console.log(i);
            }
        }
    },

    getTreeData: function () {
        return [{
            text: 'child 1',
            leaf: true,
            checked: false
        }, {
            text: 'child 2',
            leaf: true,
            checked: false
        }, {
            text: 'child 3',
            leaf: true,
            checked: false
        }];
    }
});

Answer 1

您的问题是，在更新 dom 之前，您的函数会占用所有资源。

解决方案是让加载掩码有时间显示，然后开始计算。

               checkchange: function () {
                    me.getEl().mask('loading');
                    Ext.defer(function() {
                        me.factorNumber(500000000);
                        me.getEl().unmask();
                    }, 50);
                }