Sencha Touch - 이전 값을 기준으로 목록 항목의 스타일을 변경하는 방법

Question

목록 (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>')

내가 {가격} 이전과 현재 값을 기준으로 (내 생각 CSS를 사용)의 색상 변경하려면 :

의 경우 [현재 값]>을 [이전 값] 녹색으로 표시합니다. [이전 값]> [현재 값]이면 빨간색으로 표시됩니다. 전 항목 수는 있지만

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

(또는 목록 행) 업데이트되어 있고 currentPrice 새로운 값이다

가격 값은 다음과 같이 갱신된다. 이 코드는 매초마다 한 번 호출되는 함수에 의해 실행됩니다.

나는 XTemplate 내부에 조건을 포함 할 수있는 옵션이 있음을 알고 있지만, 모든 예제는 새로운 값을 상수와 비교합니다. 새 가격과 이전 가격을 비교하여 {price}의 색상을 변경하려면 어떻게해야합니까?

Answer 1

상점이로드/생성되었거나 작성/작성 중일 때 저장소에 '색상'속성을 추가 할 수 있습니다.

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>')