How to Change Extjs Grid Single Cell Background Color Depending on Value Changes

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

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.

extjs change grid cell background based on value

Try this...

renderer : function(value, meta) {
    if(parseInt(value) > 0) {
        meta.style = "background-color:green;";
    } else {
        meta.style = "background-color:red;";
    }
    return value;
}

It works for me.

How to change background color of grid's dirty cells in Extjs

Use the following CSS class name for changing some of the property of dirty cells :

.x-grid3-dirty-cell {
     background-image:none;
}

This will remove the red corner from the dirty cells.This is applicable ExtJs version>=3

If you want to change the background color of cell, you have to use x-grid3-cell-inner
you can use columnRenderer, where you can write the logic. As cell is edited, columnrenderer will be called, and there you can check if value is changed, change the color using

function columnrenderer(value, meta,records,rowIndex,colIndex,store,view){
    var column = view.getHeaderAtIndex(colIndex);
    var dataIndex = column.dataIndex;
    records.modified[dataIndex]; //Will give the original value
    value; //gives the changed value
    if(//both are not same)
         return '<div class="x-grid3-cell" style="background-color:red;"><span >(' + value + ')</span></div>';
    else
       //do nothing
}

For more information on GridCellRenderer see ExtJs Grid FAQ

ExtJs 3 : Change cell background color of a grid

I'm not that firm in using ExtJS 3.

I would try to define a rendere for your column "Drop/Pick Loc" like this:

{
    sortable : true,
    header : "Drop/Pick Loc",
    dataIndex : 'locationName',
    width : 170,
    renderer : function(value, metaData, record, rowIndex, colIndex, store) {

                   metaData.attr = 'style="color:' + record.get('tourTypeColor') + ';"';
                   return value;
               }
}

EXTJS changing Grid cell back ground color on click

This is exactly what I'm looking for. Thank InnerJL for directing me in the right direction. I needed it to work for click. Alternating between white and green. Solution is posted below

function(value, metaData, record, rowIndex, colIndex, store)
{
var test =  Ext.get(metaData.id).getStyle("background-color");
if(test == "green")
{
Ext.get(metaData.id).setStyle("background-color", "white");
}
else
{
Ext.get(metaData.id).setStyle("background-color", "green");
}
return value;
}

ExtJS 4 -grid selected cell color

You can implement using css for selected cell in CellEditing.

In this Fiddle, I have created a demo using CellEditing plugin.

Code snippet:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.data.Store', {
            storeId: 'demostore',
            fields: ['name', 'email', 'phone'],
            data: [{
                name: 'Lisa',
                email: 'lisa@simpsons.com',
                phone: '555-111-1224'
            }, {
                name: 'Bart',
                email: 'bart@simpsons.com',
                phone: '555-222-1234'
            }, {
                name: 'Homer',
                email: 'homer@simpsons.com',
                phone: '555-222-1244'
            }, {
                name: 'Marge',
                email: 'marge@simpsons.com',
                phone: '555-222-1254'
            }]
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Demo Data',
            store: 'demostore',
            cls:'my-grid',
            columns: [{
                header: 'Name',
                dataIndex: 'name',
                editor: 'textfield'
            }, {
                header: 'Email',
                dataIndex: 'email',
                flex: 1,
                editor: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            }, {
                header: 'Phone',
                dataIndex: 'phone'
            }],
            selType: 'cellmodel',
            plugins: {
                ptype: 'cellediting',
                clicksToEdit: 1
            },
            height: 200,
            renderTo: Ext.getBody()
        });
    }
});

CSS

<style>
    .my-grid .x-grid-cell-selected{
        background-color: transparent !important;
    }
</style>

---

One more way you also done using on cell editor component blur event. You need to do put this below code

var selectionModel = grid.getSelectionModel();
selectionModel.deselect(selectionModel.selection.record)

changing background colors of grid rows dynamically in extjs 4.2.2

Figured out what the Problem was.

Because I am using a theme I had to put the custom CSS File before the standard ExtJS CSS with the "!important" flag.

New css file:

.later .x-grid-cell {
        background-color: #FFB0C4 !important;
    }
.now .x-grid-cell {
        background-color: #5491BD !important;
    }

---

Related Topics