extjs6 更新掩码消息未在 long 运行方法中更新，其中图表正在使用新系列更新

Question

在我的 extjs6 项目中，我有这么长的运行ning 方法。从加载的商店开始，它按 'instrument' 分组，然后用 'instrument' 中的每一项创建一个数组，然后只用该数据创建一个新商店，然后为 extjs 图表创建一个系列，然后将系列添加到图表中。

有大约 100 台仪器的大量数据，每台仪器每天都有 2-3 年的数据。这个过程需要很长时间，我想更新掩码 window 以说明正在更新哪个仪器，以便用户可以看到发生了什么。

如何在这个长运行ning 方法中间更新掩码消息？

        var me = this;

    var myMask = Ext.get(me.windowCumulative.getEl()).mask('hello');

    var task = new Ext.util.DelayedTask(function () {

        //fadeout section
        myMask.fadeOut({
            duration: 500,
            remove: true
        });

        //convert sql date to date datatype
        myStoreTab1.each(function (record) {
            record.set('filedate', new Date(record.get('filedate')));
        });

        myStoreTab1.sort('filedate');
        myStoreTab1.group('instrument');
        myStoreTab1.getGroups().each(function (group, i) {

            var groupName = group._groupKey;

            var targetStore = Ext.create('Ext.data.Store', {
                model: 'xxx.model.HistoricalInstrumentProfitModel'
            });

            var records = [];

            group.each(function (record) {

                records.push(record.copy());

            });

            targetStore.add(records);

            var series = {
                type: 'line',
                axis: 'left',
                xField: 'filedate',
                yField: 'cumulativePl',
                store: targetStore,
                title: groupName,
                tooltip: {
                    trackMouse: true,
                    renderer: 'onSeriesTooltipRender'
                }
            };
            me.chartTab1.addSeries(series);
            //me.chartTab1.redraw();

            //me.windowCumulative.setLoading(false);

            console.log('added series: ' + groupName);

        });

    });
    task.delay(500);

    //debugger;
    //me.chartTab1.redraw();

更新... 对于每个组我运行这个

function DoMask(step, panel, countGroups, group, chart) {

setTimeout(function () {

    var groupName = group._groupKey;

    var targetStore = Ext.create('Ext.data.Store', {
        model: 'xxx.model.HistoricalInstrumentProfitModel'
    });

    var records = [];

    group.each(function (record) {
        records.push(record.copy());
    });

    targetStore.suspendEvents();
    targetStore.add(records);

    var series = {
        type: 'line',
        axis: 'left',
        xField: 'filedate',
        yField: 'cumulativePl',
        store: targetStore,
        title: groupName,
        tooltip: {
            trackMouse: true,
            renderer: 'onSeriesTooltipRender'
        }
    };
    chart.addSeries(series);

    console.log('added series: ' + groupName);
    console.log(count);

    panel.mask('step : ' + count);

    if (count == countGroups) {

        chart.resumeEvents();
        chart.resumeLayouts();
        chart.resumeChartLayout();

        chart.redraw();
        panel.unmask();
    }

    count = count + 1;

}, 500);

}

Answer 1

看看这两种向用户展示进度的方式：

这里是FIDDLE

Ext.application({
    name: 'Fiddle',

    launch: function () {

        var count;

        var p = Ext.create('Ext.ProgressBar', {
            width: 300,
            textTpl:  'my Progress {value*100}%'
        });

        var window = Ext.create('Ext.window.Window', {
            title: 'Progress',
            modal:true,
            hidden:true,
            closable:false,
            items:[
                p
            ]
        });

        var panel = Ext.create('Ext.panel.Panel', {
            title: 'teste',
            height: 400,
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'button',
                text: 'START LONG PROCESS MASK',
                handler: function () {
                    count = 0;
                    this.up('panel').mask('Start');
                    DoMask(count);
                }
            }, {
                xtype: 'button',
                text: 'START LONG PROGRESS BAR',
                handler: function () {
                    count = 0;
                    window.show();
                    DoProgress(count);
                }
            }]

        });

        function DoMask(step) {
            setTimeout(function () {
                panel.mask('step : ' + step);
                count++;
                if (count <= 10) {
                    DoMask(count);
                } else {
                    panel.unmask();
                }
            }, 500);
        }

        function DoProgress(step) {
            setTimeout(function () {
                p.setValue(step/10);

                count++;
                if (count <= 10) {
                    DoProgress(count);
                } else {
                    window.hide();
                }
            }, 500);
        }

    }
});

extjs6 更新掩码​​消息未在 long 运行 方法中更新，其中图表正在使用新系列更新

extjs6 update mask message not updating in long running method where chart is being updated with new series

extjs

mask

extjs6 更新掩码消息未在 long 运行方法中更新，其中图表正在使用新系列更新