ExtJs — добавление шаблона на уровень ниже таблицы ⇐ CSS

[Anonymous]

Я создал книгу заказов в Extjs, но, поскольку я использовал это решение, я не знаю, как загрузить сюда еще что-нибудь.
Я хотел бы добавить фоновые кварталы с другим цветом и границей. Еще хотелось бы иметь другое цветовое пространство и границу в средней части. Я изобразил это на рисунках ниже.
К сожалению, выбрав использование таблицы и ячеек, у меня не так уж много возможностей манипулировать ими таким образом с помощью CSS. Я думал добавить такой шаблон здесь, в фоновом режиме, но не могу управлять высотой и шириной при добавлении новых плиток.
текущий вид компонента


фон, который я хочу добавить сюда


Конечно, добавляю код и задаю вопросы, если информации недостаточно.

Код: Выделить всё

items: [
{
xtype: 'grid',
cls: 'order-book',

viewConfig: {
getRowClass: function (record) {
if (record.get('sell').length > 0) {
return 'sell-row'
} else if (record.get('buy').length > 0) {
return 'buy-row'
}
return ''
},
},

columns: [
...Array.from({ length: 4 }, (_, index) => ({
renderer: function (value, gridcell, record) {
value = record.get('sell')[3 - index]
if (value) {
gridcell.tdCls = 'sell'
return (
('Example' || '') +
'
' +
value.quantity
)
} else {
gridcell.tdCls = ''
}
},
})),
{
dataIndex: 'price',
renderer: function (value, gridcell, record) {
let quantity = 0
record
.get('sell')
.forEach((num) => (quantity += Number(num.quantity)))
record
.get('buy')
.forEach((num) => (quantity += Number(num.quantity)))
gridcell.tdCls = 'amount'
return `${Common.Formatter.moneyFormat({ price: value })}
${quantity}`
},
},
...Array.from({ length: 4 }, (_, index) => ({
renderer: function (value, gridcell, record) {
value = record.get('buy')[index]
if (value) {
gridcell.tdCls = 'buy'
return (
('Example'|| '') +
'
' +
value.quantity
)
} else {
gridcell.tdCls = ''
}
},
})),
],
},
],

Подробнее здесь: https://stackoverflow.com/questions/787 ... -the-table