ExtJS Tree checkchange侦听器不显示掩码

dldeef67  于 2022-11-04  发布在  其他
关注(0)|答案(1)|浏览(137)

我有一个带有复选框的Ext树,当点击任何复选框时,它将启动一个可能需要任意时间的进程。为了更方便用户,我想在树中添加一个负载掩码。但是,当进入侦听器函数时,UI锁定,直到侦听器函数完成才更新。这个问题发生在ExtJs 4.2 - 7.5 classic中。
如果我在包含处理代码的掩码后添加一个“setTimeout()”,或者在掩码后设置一个断点,掩码就会显示出来。问题是IE似乎不支持setTimeout()函数。
下面是一个简单的示例代码,processing函数只是分解了一个非常大的数字,以便模拟处理时间-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
        }];
    }
});
pengsaosao

pengsaosao1#

你的问题是,你的函数在dom更新之前就消耗了所有的资源。
解决方案是给予加载掩码时间显示,然后开始计算。

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

相关问题