I am creating an order book using Extjs. In the requirements I have to create it by building it with components from Extjs. Performance is important here because the data is often refreshed.
I need to build the structure as in the image below. I'm wondering how to approach this wisely and build a good component here, to which in the future will be added a lot of functionality, so it is important to plan it well from the beginning.
On the left are BUY orders and on the right are SELL orders. In the middle is the amount and price of the order. The next lines are, of course, other price levels. This is displayed in the middle column.
When buy and sell transactions meet during the open market, the transaction appears on the other side for a while, after which the corresponding amount will be deleted.
Can anyone help to get it right how to build such a component and add transactions accordingly ?
I would go with renderers inside a grid.
Here is an example (did not sort it nor use groupers, it all depends on the data):
renderer: function(value, gridcell, record) {
value = record.get('sell')[3];
if (value) {gridcell.tdCls = 'sell';}
else {gridcell.tdCls = '';}
return value;
}
And here is a Fiddle, which shows how it works:
https://fiddle.sencha.com/#view/editor&fiddle/3rjo
The data structure should not matter. You can change the data the way you need it, using a custom reader:
https://docs.sencha.com/extjs/7.7.0/classic/Ext.data.reader.Reader.html