JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/extjs/4.0.1/resources/css/ext-all.css" />
CSS
.red .x-grid-cell{
background-color : red !important;
}
.green .x-grid-cell{
background-color: green !important;
}
.blue .x-grid-cell{
background-color: blue !important;
}
.yellow .x-grid-cell{
background-color: yellow !important;
}
.pink .x-grid-cell{
background-color: pink !important;
}
JavaScript
Ext.application({
name: 'test',
launch: function() {
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: [
{
name: 'id',
type: 'int'},
{
name: 'month',
type: 'string'},
{
name: 'color',
type: 'string'}
],
data: [
{
"id": 0,
"month": "January",
"color": "red"},
{
"id": 1,
"month": "February",
"color": "red"},
{
"id": 2,
"month": "March",
"color": "red"},
{
"id": 3,
"month": "April",
"color": "blue"},
{
"id": 4,
"month": "May",
"color": "red"},
{
"id": 5,
"month": "June",
"color": "green"},
{
"id": 6,
"month": "July",
"color": "green"},
{
"id": 7,
"month": "August",
"color": "red"},
{
"id": 8,
"month": "September",
"color": "pink"},
{
"id": 9,
"month": "October",
"color": "blue"},
{
"id": 10,
"month": "November",
"color": "yellow"},
{
"id": 11,
"month": "December",
"color": "red"}
]
});
var grid = Ext.create('Ext.grid.Panel', {
title: 'Grid',
store: store,
columns: [
{
header: 'Id',
dataIndex: 'id'},
{
...