I have created an order book in Extjs but because I used this solution I don’t really know how to upload another thing here.
I would like to add in the background quarters with a different color and border. I would also like to have a different color space and border in the middle part. I depict it in the pictures below.
Unfortunately, by choosing to build on the table and cells, I don’t have much possibility to manipulate it in such a way through CSS. I was thinking of adding such a template here in the background, but I can’t manipulate the height and width when adding new tiles.
current view of the component
background that I want to add here
I add the code, of course, and ask for questions if there is not enough information.
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' || '') +
'<br />' +
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 })}<br />${quantity}`
},
},
...Array.from({ length: 4 }, (_, index) => ({
renderer: function (value, gridcell, record) {
value = record.get('buy')[index]
if (value) {
gridcell.tdCls = 'buy'
return (
('Example'|| '') +
'<br />' +
value.quantity
)
} else {
gridcell.tdCls = ''
}
},
})),
],
},
],