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は新しい値です。このコードは、1秒に1回呼び出される関数によって実行されます。

XTemplate内に条件を設定するオプションがあることは知っていますが、私が見たすべての例では、新しい値を定数と比較しています。新しい値を古い値と比較して{price}の色を変更するにはどうすればよいですか？

4

1 に答える 1

2

ストアがロード/作成されたとき、またはストアがいっぱい/作成されているときに、ストアに「color」プロパティを追加できます。

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 に答える