How to apply custom css class to extjs grid column, and remove it with delay?


Tags: css,extjs,extjs4

Problem :

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?



Solution :

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

    CSS Howto..

    How to keep div on one line and append ellipses

    Speechbubble tooltip in CSS - how to move the arrow

    How to find all elements with a particular CSS style, without a JS library?

    How to display grid line on top of highchart

    How to make an image behave like in Primefaces?

    My dropdown menu isn't showing below parent

    How to float elements with different heights?

    How to call in Javascript a requestAnimationFrame loop?

    Rails 4: how to apply custom CSS to Rails form file field

    How can I completely centre the “feature” section of my layout (please see links)?

    How to evenly distribute menu items with CSS when width and quantity is not known?

    How to change background on hover for 2 elements using css

    HTML5 (php) with CSS Tooltip shows up far away from hyperlink

    How to set variables in LESS from a dynamic website?

    How to wrap div containing spans containing the text to be wrapped?

    CSS - How to center an image without class or id?

    How can i make this css star smaller?

    How To Layout a Grid in CSS

    how to indent HTML forms on modals [closed]

    Dompdf - how to display table and graph sidebyside?

    How can I push to the top an element using slideUp?

    How to make your website works on a projector?

    How to “add details” to CSS (example Box shadow)

    navigation drop-down menu in wrapper not showing second level

    Why my tabs (i.e HOME, ABOUT ME..) doesn't show the corresponding paragraph or section?

    How to change
  • to variable width on css dropdown submenu
  • How to relativize URLs in css files in Hakyll?

    How to Write an Angular directive to update CSS class based on form validation

    How to target specific img using css

    How to not send images to mobiles in a semantic manner