I have a list (using ListView) where I want to display two "bars" and let their length (i.e. "width" property) depend on their value. I use a ListView with a Template today - as I think this is the most performant way of doing things. However, the list is not going to be very long - so other constructs may work as well.
Can this be done? If yes, then how? If not, then what would be the best way to implement this?
<ItemTemplate name="templateCatch" class="row"> <View id="catchRow" bindId="row"> <View id="rowInfo"> <View id="line1"> <Label class="label_species"/> <Label bindId="species" class="rowSpecies"/> </View> <View id="line2"> <Label class="label_me"/> <View id="meBarTimes" class="meBar"> <Label bindId="me" class="barText"/> </View> </View> <View id="line3"> <Label class="label_all"/> <View id="allBarTimes" class="allBar"> <Label bindId="all" class="barText"/> </View> </View> </View> </View> </ItemTemplate>the "meBarTimes" and "allBarTimes" are used to show two different coloured bars - depending on the value that I put in the labels "me" and "all". The TSS looks like this:
".meBar": { backgroundColor:'#99cc33', height:25 } ".allBar": { backgroundColor:'#33cc99', height:25 }Here is a snippet of how I fill the list.
var times = { template: 'templateCatch', species : { text: record.speciesName }, me : { text: record.meFishPerHour }, all : { text: record.allFishPerHour } }; list.push(times); : : $.catchList.sections[0].items = list;Basically I would like to adjust the width of ".meBar" and ".allBar" based on their values.
Things I have tried.... as part of filling in the "times" value I can set e.g. background color by using a condition. Something like this works:
properties : { backgroundColor : (record.meFishPerHour < 0.4 ? 'red' : 'yellow') }However, I have found no way to set a specific id/class within the template (e.g. the "meBar" class) - otherwise, I would be done :-)
Any ideas/suggestions would be much appreciated.
_Platform:_
Mac, OS X 10.10.3
Titanium Studio 3.4.1 and Titanium SDK 3.5.1GA
/John