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

Question

In my extjs6 project I have this long running method. Starting with a loaded store, it groups by 'instrument', then creates an array with each item of that 'instrument', then creates a new store with only that data, then creates a series for a extjs chart, and adds the series to the chart.

there is a ton of data with about 100 instruments and a daily number for 2-3 years of data for each instrument. the process takes a long time and I want to update the mask window to say which instrument is being updated so the user can see what is going on.

How can I update the mask message in the middle of this long running method?

        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();

UPDATE... for every group I run this

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

Take a look at these two ways to present the progress to the user:

Here is the 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);
        }

    }
});