代码之家 › 专栏 › 技术社区 › solarissf

extjs6 update mask消息在长时间运行的方法中未更新,其中图表正在用新系列更新

mask extjs

solarissf · 技术社区 · 6 年前

有大量的数据,大约有100台仪器,每台仪器每天有2-3年的数据。这个过程需要很长的时间,我想更新遮罩窗口来说明哪个仪器正在更新,这样用户就可以看到发生了什么。

如何在这个长时间运行的方法中更新掩码消息?

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

}

1 回复 | 直到 6 年前

Fabio Barros 6 年前

请看下面两种向用户展示进度的方法:

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

    }
});