Как использовать ExtJS stripeRows с плагином RowExpander в IE8

Question

Я использую ExtJS 4.2.1 и имею сетку, используя stripeRows, поэтому строки чередуются серым и белым. Я также использую плагин RowExpander. В Chrome и IE9 + все выглядит великолепно. Однако в IE8 расширенный цвет фона строки является белым для всех строк. Это делает чередование ужасным.

Я попытался добавить пользовательский CSS для создания расширенного фона ячейки, но сетка динамически заполняется, и я не знаю, сколько строк будет в ней, а IE8 не поддерживает: nth-child css, поэтому я смог установить цвет фона для ВСЕХ расширенных ячеек, а не для всех остальных.

Кто-нибудь понял, как это осуществить? Спасибо!

Я также не могу включить jQuery в это приложение, поэтому любое решение jQuery для замены nth-child не будет вариантом.

Answer 1

Есть! Поскольку Ext генерирует каждую строку сетки в виде таблицы, разметка для каждой полосатой строки в сетке выглядит следующим образом:

<tbody> 
    <tr class="x-grid-row-alt"> //normal striped row 
    <tr class="x-grid-row-body-hidden"> //expanded row (collapsed) 
</tbody> 

Вы можете использовать селектор CSS соседнему ребенка в IE8, чтобы стиль цвета фона строки описания полосатых рядов с:

.x-grid-row-alt + tr { 
    background-color: #f00; 
}