Sencha Touch - How to change the style of a list item based on its previous value - sencha-touch

Question

I have a list (xtype: 'list') and I use an XTemplate to customize it. It looks like this:
itemTpl: new Ext.XTemplate('<div>',
'<span style="display: inline-block; width: 100px">{itemName}</span>',
'<span style="display: inline-block; width: 100px">{price}</span>','</div>')
I would like to change the color of {price} (using css I guess) based on the previous and current value:
If [current value] > [previous value] color it green.
If [previous value] > [current value] color it red.
The price value is updated like this:
var itemList = Ext.getCmp('itemList');
var store = itemList.getStore();
store.getAt(i).set('price', currentPrice);
While i is the number of item (or row in the list) that is updated and currentPrice is the new value. This code is executed by a function that is called once every second.
I know there is an option to have conditions inside an XTemplate, but all the examples I saw compare the new value with a constant. How can I change the color of {price} by comparing the new value to the old one?

Answer 1

You may add 'color' property to store when the store has loaded/created or while it is filling/creating.
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');
}
})
Then you can use property in template
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>')