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 strech select?

    How to create circle, square or triangle with JavaScript in HTML?

    How do i make div go under another div making columns

    toggle css as well as show/hide jquery

    How to get the system accent color for UWP-Apps?

    How to parameterize CSS selectors? [duplicate]

    How can I use this php empty function to properly display CSS?

    How to make a Check Button? (hidden checkbox with label as a button: CSS only)

    How to get the header and navbar on top?

    how to use static folder in django for css and javascript?

    How to create 'greater than' arrow using CSS only?

    How to stop css class on textbox

    How to code certain css shapes?

    Parallax image shows at top of page on load

    How to pop a dialog box /iframe/Lightbox like one below above the webpage content [closed]

    How to fix my nav bar? Positioning is different on different screens

    How to make a div 100% of page (not screen) height?

    How do I control the wrapping of these
  • items?
  • CSS - How to make a 100% height div not overlap it's contents when window is resized

    How to add hover effect to using CKEditor?
    Here is a script to highlight columns where there is checkmarks with an orange background-color. var CKE = $( '.editor' ); CKE.ckeditor(); var columnIndex=0; $("#update").click(function(){ // Output CKEditor's result in...
    Read more

    How to set borders between children from parent in CSS?

    How to add class based on which css class name is come in jquery

    How to make this Header/Content/Footer/Menu layout using CSS?

    CSS selector for showing descendants doesn't work properly

    How to show parts of sprite with CSS keyframes to create animation?

    How to style this with css? [closed]

    how to make zurb foundation framework off canvas look flat

    How to combine html, js and css from fiddle

    How to create a Sass mixin for this CSS radial gradient?

    how can I align text/image/links within a grid
    of the twitter bootstrap css?