Question

The goal is to apply one cls to column, which I did with getRowClass and then remove it after 1-2 sec. The websync is pushing new data every 5 seconds, so when this changes to cell appear, it should be like a blink of a changed column(cell), that goes back to “white”(default) before new data refresh? The value assigned to compare new records with is 0, but in a real case is last value that is being compared!
Here is my code:

Ext.create('Ext.grid.Panel', {
    columns: [
    // ...
    {
        header: 'Change',
        dataIndex: 'change',
        tdCls: 'x-change-cell'
    }
    // ...
    ],

    viewConfig: {
        getRowClass: function (record, index) {
            var c = record.get('change');
            if (c < 0) {
                return 'price-fall';
                //   I tried setTimeout("remove-css()",1000); and
                //    Ext.Function.defer(remove-css, 1000);
                //     but no luck!!
            } else if (c > 0) {
                return 'price-rise';
            }
        }
    }
    // ...
});    

CSS:

.price-fall .x-change-cell {
    background-color: #FFB0C4;
    color:red;
}
.price-rise .x-change-cell {
    background-color: #B0FFC5;
    color:green;
}

Any ideas?

Answer 1

Try something like that:

store.on('add', function() {
    var els = Ext.select('.price-fall', this.getEl());
    els.each(function(el) {
        el.removeCls('price-fall');
    });
    els = Ext.select('.price-rise', this.getEl());
    els.each(function(el) {
        el.removeCls('price-rise');
    });
}, grid, { delay: 2000 });

Here the add event is fired with 2sek delay.

And I’ve found another solution:

getRowClass: function(rec, index) {
    if (rec.get('rendered') === undefined) {
        Ext.Function.defer(function() {
            this.removeRowCls(index, 'price-fall');
            this.removeRowCls(index, 'price-rise');
            rec.set('rendered', true); // mark row, in case there repaint occur
        }, 2000, this);

        if (rec.get('change') < 0) {
            return 'price-fall';
        } else {
            return 'price-rise';
        }
    }
}