extjs 4 getRowClass изменения не видны

Question

У меня есть следующий viewconfig, примененный к панели сетки.Предполагается изменить цвет строки на основе значения данных, но эти изменения не видны в представлении.

.changed_colour {
    background-color: #FFCC00
}

viewConfig: {
    //Return CSS class to apply to rows depending upon data values
    getRowClass: function (row, index) {
        var data = row.data;
        return data.NoteType === 'PRIVATE' ? 'changed_colour' : ''; 
    }
}

Я заметил стиль, применяемый для строки в Firebug:

<tr class="x-grid-row changed_colour"> 

.x-grid-row .x-grid-cell {
    background-color: white;
    border-color: #FAFAFA #EDEDED #EDEDED;
    border-right: 0 solid #EDEDED;
    border-style: solid;
    border-width: 1px 0;
    font: 11px tahoma,arial,verdana,sans-serif;
}

Приведенный выше фрагмент стиля принадлежит Extjs.Кто-нибудь может предложить решение этой проблемы?

Спасибо

Answer 1

Это потому, что цвет задается в ячейке сетки. Вы можете увидеть это в Firebug или Chrome Developer Tools. Чтобы заставить это работать, измените свой стиль на:

.changed_colour .x-grid-cell {
    background-color: #FFCC00
}