Цветовая легенда для панели сетки в ExtJS4

Question

У меня есть требование, чтобы каждая ячейка в сетке могла принимать любой цвет из доступных 8 цветов на основе некоторых критериев. После этого мне нужно показать цветовую легенду этих 8 цветов и имена их тегов под панелью сетки. Может кто-нибудь подскажет мне, есть ли у ExtJS4 какая-либо функция для гридов или какая-либо идея о том, как я могу подойти к этой проблеме.

/** Пример 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); 
} 

Answer 1

Мне нужно было сделать что-то подобное.

Я применил класс «цвет» к ячейке на основе значения, используя конфигурацию renderer в столбце.

В моем случае значение определяет цвет ячейки.

Вот рендер:

// ... other column configs 
renderer: function(value, meta, record) { 
    switch(value) { 

     case 1 : 
      meta.tdCls = 'orange-cell'; 
      break; 

     case 2 : 
      meta.tdCls = 'light-orange-cell'; 
      break; 

     case 3 : 
      meta.tdCls = 'green-cell'; 
      break; 
    } 

    // I only had a color in my cell without any kind of value 
    // so didn't include the following return statement. I added it here 
    // just so you would know that you can have it also. 
    return value; 
} 

Классы CSS выглядит следующим образом:

.orange-cell { 
    background-color: #ffbb22 !important; 
} 
.light-orange-cell { 
    background-color: #33cc55 !important; 
} 
.green-cell { 
    background-color: #ffeecc !important; 
} 

Это работает отлично с ExtJS 4.1.0

Answer 2

Добавить что-то подобное, чтобы ваше определение сетки:

viewConfig: { 
    getRowClass: function(record, rowIndex, rowParams, store){ 
    return record.get("valid") ? "row-valid" : "row-error"; 
    } 
} 

См http://docs.sencha.com/ext-js/4-0/#!/api/Ext.view.Table-method-getRowClass для более подробной информации.

Примечание: Это будет работать для отдельных строк. Вам действительно нужна клеточная окраска?