The following examples show how you can display specific items in a Flex ArrayCollection using the getItemAt() method and the array access operator ([]).
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/10/displaying-specific-items-from-an-arraycollection-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object label="Student A" score="85" />
<mx:Object label="Student B" score="48" />
<mx:Object label="Student C" score="71" />
<mx:Object label="Student D" score="88" />
<mx:Object label="Student E" score="24" />
<mx:Object label="Student F" score="64" />
<mx:Object label="Student G" score="76" />
<mx:Object label="Student H" score="76" />
<mx:Object label="Student I" score="93" />
<mx:Object label="Student J" score="88" />
<mx:Object label="Student K" score="48" />
<mx:Object label="Student L" score="76" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:ApplicationControlBar dock="true">
<mx:HSlider id="slider"
minimum="0"
maximum="{arrColl.length-1}"
liveDragging="true"
snapInterval="1"
tickInterval="1"
dataTipPlacement="right" />
</mx:ApplicationControlBar>
<mx:Label text="{arrColl.getItemAt(slider.value).label}" />
</mx:Application>
View source is enabled in the following example.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/10/displaying-specific-items-from-an-arraycollection-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object label="Student A" score="85" />
<mx:Object label="Student B" score="48" />
<mx:Object label="Student C" score="71" />
<mx:Object label="Student D" score="88" />
<mx:Object label="Student E" score="24" />
<mx:Object label="Student F" score="64" />
<mx:Object label="Student G" score="76" />
<mx:Object label="Student H" score="76" />
<mx:Object label="Student I" score="93" />
<mx:Object label="Student J" score="88" />
<mx:Object label="Student K" score="48" />
<mx:Object label="Student L" score="76" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:ApplicationControlBar dock="true">
<mx:HSlider id="slider"
minimum="0"
maximum="{arrColl.length-1}"
liveDragging="true"
snapInterval="1"
tickInterval="1"
dataTipPlacement="right"
change="lbl.text = arrColl[event.value].label;" />
</mx:ApplicationControlBar>
<mx:Label id="lbl" />
</mx:Application>
Hey
How would I use a string variable instead of the ‘label’ … if that is dynamic?
is it possible with getItemAt?
Jon Henley,
You can try using the Array access syntax to specify the field name. Something like the following:
<mx:String id="str">score</mx:String> <mx:Label text="{arrColl.getItemAt(slider.value)[str]}" />Flex Builder may give you a warning saying “Data binding will not be able to detect changes when using square bracket operator. For Array, please use ArrayCollection.getItemAt() instead.”, but you can probably ignore that.
Peter