ExtJS图文订单簿

Question

我正在使用 Extjs 创建订单簿。在需求中，我必须通过使用 Extjs 的组件构建它来创建它。性能在这里很重要，因为数据经常刷新。

我需要构建如下图所示的结构。我想知道如何明智地处理这个问题并在这里构建一个好的组件，将来会添加很多功能，因此从一开始就做好规划很重要。

左边是买入订单，右边是卖出订单。中间是订单的金额和价格。当然，下一行是其他价格水平。这显示在中间栏中。

传入数据：

{
   buy: [ (an array of transaction data objects) ]
   sell : [ (array of objects with transaction data) ]
}

当公开市场中买卖交易相遇时，该交易会在对方出现一段时间，之后相应的金额将会被删除。

任何人都可以帮助正确地构建这样的组件并相应地添加事务吗？

Answer 1

我会在网格内使用渲染器。

这是一个例子（没有排序，也没有使用石斑鱼，这完全取决于数据）：

renderer: function(value, gridcell, record) {
    value = record.get('sell')[3];

    if (value) {gridcell.tdCls = 'sell';}
    else {gridcell.tdCls = '';}

    return value;
}

这是一个小提琴，它展示了它是如何工作的：

https://fiddle.sencha.com/#view/editor&fiddle/3rjo