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

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