Changing Background Colors of Grid Rows Dynamically in Extjs 4.2.2

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

EXTJS Grid row colour change dynamically with getting colour code from database

If you want to use as row background-color color from row record you will have to set background color of each row td elements after row is rendered.

You can do this in refresh event of gridView. So in grid config you should define something like this:

viewConfig: {
    listeners: {
        refresh: function(view) {      

            // get all grid view nodes
            var nodes = view.getNodes();

            for (var i = 0; i < nodes.length; i++) {

                var node = nodes[i];

                // get node record
                var record = view.getRecord(node);

                // get color from record data
                var color = record.get('color');

                // get all td elements
                var cells = Ext.get(node).query('td');  

                // set bacground color to all row td elements
                for(var j = 0; j < cells.length; j++) {
                    console.log(cells[j]);
                    Ext.fly(cells[j]).setStyle('background-color', color);
                }                                       
            }
        }      
    }
}

Fiddle with live example: https://fiddle.sencha.com/#fiddle/2m8

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.

Change the color of summary row of grid in extjs

var summaryRow = grid.getView().getFeature(0); 
styleObj = {
     'background-color': '#c5c5c5'  
 };
summaryRow.view.el.setStyle(styleObj);

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.

changing the background color of each cell in the form in extjs

I think that the property is

.value .x-form-field{
    background : red;
}

This must change the background of each field if you change the cls to value.

If you want to change separately each field you must add the fieldStyle property

fieldStyle: 'background: blue;'

In this fiddle there is an example
http://jsfiddle.net/lisssb/Ln6PT/4/

I hope this help

How to apply background color (or custom css class) to column in grid - ExtJs 4?

Add a tdCls attribute to your column header definition, with a value of the CSS class you want to use.

columns : [
   {header: 'USER', dataIndex: 'firstName', width:70, tdCls: 'red'},
   {header: 'CATEGORY', dataIndex: 'category', width:100}
]

---

Related Topics