0

我有一个列表（xtype：'list'），我使用 XTemplate 来自定义它。它看起来像这样：

itemTpl: new Ext.XTemplate('<div>', '<span style="display: inline-block; width: 100px">{itemName}</span>', '<span style="display: inline-block; width: 100px">{price}</span>','</div>')

我想根据以前的值和当前值更改 {price} 的颜色（我猜是使用 css）：

如果 [当前值] > [先前值] 将其着色为绿色。如果 [前一个值] > [当前值] 将其着色为红色。

价格值更新如下：

var itemList = Ext.getCmp('itemList');
var store = itemList.getStore();
store.getAt(i).set('price', currentPrice);

而 i 是更新的项目数（或列表中的行），而 currentPrice 是新值。此代码由每秒调用一次的函数执行。

我知道有一个选项可以在 XTemplate 中设置条件，但是我看到的所有示例都将新值与常量进行了比较。如何通过将新值与旧值进行比较来更改 {price} 的颜色？

4

1 回答 1

2

您可以在商店加载/创建或填充/创建时添加“颜色”属性来存储。

store.each(function(item, i) {
        var previousItem = store.getAt(i-1);
        if (previousItem) {
            var previousPrice = previousItem.get('price');
            var price = item.get('price');
            item.set('color', (price > previousPrice) ? 'green' : 'red');
        }
    })

然后你可以在模板中使用属性

itemTpl: new Ext.XTemplate('<div>', '<span style="display: inline-block; width: 100px; color: {color}">{itemName}</span>', '<span style="display: inline-block; width: 100px">{price}</span>','</div>')
于 2013-01-10T11:27:32.587 回答