How to change extjs grid single cell background color depending on value changes?


Tags: css,extjs,grid,extjs4,row

Problem :

To change whole row background color we can use getRowClass, but how to do the same logic only for one cell, and particular column....any ideas?

//EXTJS
viewConfig: {
    getRowClass: function(record, index) {
        var c = record.get('change');
        if (c < 0) {
            return 'price-fall';
        } else if (c > 0) {
            return 'price-rise';
        }
    }
}

//CSS
.price-fall { 
        background-color: #FFB0C4;
}
.price-rise {
        background-color: #B0FFC5;
}

EDIT:

There is a way of doing this with:

 function change(val){
    if(val > 0){
        return '<div class="x-grid3-cell-inner" style="background-color:#B0FFC5;"><span style="color:green;">' + val + '</span></div>';
    }else if(val < 0){
        return '<div class="x-grid3-cell-inner" style="background-color:#FFB0C4;"><span style="color:red;">' + val + '</span></div>';
    }
    return val || 0;
}

and then just:

...
{header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change', align: 'center'}
...

but this way grid gets deformed on changes from white to colored background... ???

any other ideas?

EDIT
After custom css is applyed to the column, how to remove the same in a short period of time, so it appears to blink once when the value has changed? Something like setTimeout("remove-css()",1000); or with Ext.Function.defer(remove-css, 1000);
Any ideas?



Solution :

I suggest using getRowClass with applying extra cls to needed columns:

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

Here is demo.


    CSS Howto..

    How to create a two vertically stacked buttons next to a text input

    How do I use CSS with a ruby on rails application?

    How are table cell widths calculated in html?

    How can I center two images side-by-side with Bootstrap 3?

    How to CSS sandbox/reset an entire DIV area in the current page?

    How can I change the image folder name in css files dynamically?

    How to stop web content from being displayed before css/jquery is prepared?

    How to make header in css but im using opacity?

    How to add a media attribute to the CSS LINK html tag for the ASP.NET WebResource.axd Http Handler

    How can I rotate a font icon 45 degrees?

    How to vertically align and stretch content using CSS flexbox

    How to use CSS to change icon color

    How can I base one CSS setting on another?

    jQuery show multiple image thumbnail before upload

    how to inherit classes in css

    CSS Select element, how to disappear the arrow?

    How to create cube with only HTML and CSS?

    How can I resize an image, added via ajax, to fit within specific dimensions while maintaining aspect ratio using JQuery/CSS?

    how to use pseudo-classes (like after, before) inline in CSS

    How to prevent css keyframe animation on page load?

    How to remove hover function from top row in table

    how to hover after calling jquery animate()

    How to Programatically Toggle a Zurb Foundation Switch Control, in Chrome?

    How to make this table's height equal to the middle td's height

    How can I push the first row of images down?

    How to cancel bootstrap CSS left?

    how to align div horizontally using CSS?

    How to use css to display an avatar pic with details next to it?

    how to: dynamically switch css page

    How to display a line between the items of an unorderer list that have random number of li every time