Ich habe eine Anforderung, dass jede Zelle im Raster basierend auf bestimmten Kriterien eine beliebige Farbe aus 8 verfügbaren Farben auswählen kann. Danach muss ich eine Farblegende dieser 8 Farben und ihre Tag-Namen unter dem Rasterfeld anzeigen. Kann mir jemand vorschlagen, ob ExtJS4 eine solche Funktion für Grids hat oder eine Idee, wie ich dieses Problem angehen kann.

/ ** Beispiel für CSS * /

.r1 .x-grid-cell-inner {
background-color: #f0f6ff;
color: #09d6ff;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}


.r2 .x-grid-cell-inner {
background-color: rgba(255, 183, 189, 0.22);
color: #900;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}


.r3 .x-grid-cell-inner {
background-color: #e2ffe2;
color: #090;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}


.r4 .x-grid-cell-inner {
background-color: rgba(255, 233, 228, 0.12);
color: #99890e;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}


.r5 .x-grid-cell-inner {
background-color: rgba(186, 242, 250, 0.10);
color: #1a4f99;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}


.r6 .x-grid-cell-inner {
background-color: rgba(255, 242, 239, 0.23);
color: #ff7f00;
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}


.r7 .x-grid-cell-inner {
background-color: rgba(228, 224, 255, 0.7);
color: rgba(29, 7, 255, 0.60);
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}


.r8 .x-grid-cell-inner {
background-color: rgba(255, 233, 228, 0.32);
color: rgba(255, 22, 12, 0.65);
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}


.n1 .x-grid-cell-inner {
background-color: rgb(255, 255, 255);
color: rgb(255, 127, 0);
border-left: 1px dotted rgba(2, 3, 3, 0.27);
border-right: 1px dotted rgba(2, 3, 3, 0.27);
}