OK, so after some frustration (don't know how I could't get this sorted earlier) my solution is as follows (for those who have a similar issue):
*<?xml version="1.0" encoding="utf-8"?>* *<s:View xmlns:fx="http://ns.adobe.com/mxml/2009 <http://ns.adobe.com/mxml/2009>"* * xmlns:s="library://ns.adobe.com/flex/spark <http://ns.adobe.com/flex/spark>" title="TimeLine Testing"* * actionBarVisible="false"* * >* * <fx:Declarations>* * </fx:Declarations>* * <fx:Script>* * <![CDATA[* * import mx.collections.ArrayCollection;* * import mx.core.FlexGlobals;* * import mx.events.FlexEvent;* * import mx.events.FlexMouseEvent;* * import mx.events.PropertyChangeEvent;* * import org.apache.flex.collections.ArrayList;* * import spark.events.IndexChangeEvent;* * import spark.events.ViewNavigatorEvent;* * import spark.transitions.SlideViewTransition;* * import spark.transitions.ViewTransitionDirection;* * private var transition:SlideViewTransition = new SlideViewTransition();* * [Bindable]* * private var myCombined:ArrayCollection = new ArrayCollection([* * {DateAD:'848 AD', DateIcon:'../images/timeImages/1.png'},* * {DateAD:'850 AD', DateIcon:'../images/timeImages/2.png'},* * {DateAD:'851 AD', DateIcon:'../images/timeImages/3.png'},* * {DateAD:'990 AD', DateIcon:'../images/timeImages/4.png'},* * {DateAD:'1064 AD', DateIcon:'../images/timeImages/5.png'},* * {DateAD:'1071 AD', DateIcon:'../images/timeImages/6.png'},* * {DateAD:'1109 AD', DateIcon:'../images/timeImages/7.png'},* * {DateAD:'1139 AD', DateIcon:'../images/timeImages/8.png'},* * {DateAD:'1162 AD', DateIcon:'../images/timeImages/9.png'},* * {DateAD:'1165 AD', DateIcon:'../images/timeImages/10.png'},* * {DateAD:'1187 AD', DateIcon:'../images/timeImages/11.png'},* * {DateAD:'1195 AD', DateIcon:'../images/timeImages/12.png'}* * ]);* * ]]>* * </fx:Script>* * <s:SpinnerListContainer id="timeLineHGroup" horizontalCenter="0" y="50">* * <s:SpinnerList id="productList1" width="400" dataProvider="{myCombined}" selectedIndex="0">* * <s:itemRenderer>* * <fx:Component>* * <s:IconItemRenderer labelField="DateAD" iconField="DateIcon"/>* * </fx:Component>* * </s:itemRenderer>* * </s:SpinnerList>* * </s:SpinnerListContainer>* *</s:View>* Phil. On Fri, Jul 25, 2014 at 3:57 PM, Philip Medlam <[email protected]> wrote: > > Hi, > I wish to add an image AND text to each part of the "wheel" in a > SpinnerList > (rather than having 2 spinnerLists, with an image on one and text on > another). > > This is really frusrating as I'm sure the solution is resonably simple, > but it eludes me:-( > > Any help with an demo of doing this would be very appreciated. > > > My basic code is as follows (the text I want to add to the spinnerList is > in the timeLineDates array) : > > TIA, Phil. > > > > *<?xml version="1.0" encoding="utf-8"?>* > *<s:View xmlns:fx="http://ns.adobe.com/mxml/2009 > <http://ns.adobe.com/mxml/2009>"* > * xmlns:s="library://ns.adobe.com/flex/spark > <http://ns.adobe.com/flex/spark>" title="TimeLine Testing"* > * actionBarVisible="false"* > * >* > > > * <fx:Declarations>* > * </fx:Declarations>* > > > > * <fx:Script>* > * <![CDATA[* > * import mx.core.FlexGlobals;* > * import mx.events.FlexEvent;* > * import mx.events.FlexMouseEvent;* > * import mx.events.PropertyChangeEvent;* > > * import org.apache.flex.collections.ArrayList;* > > * import spark.events.IndexChangeEvent;* > > * import spark.events.ViewNavigatorEvent;* > * import spark.transitions.SlideViewTransition;* > * import spark.transitions.ViewTransitionDirection;* > > > > * private var transition:SlideViewTransition = new > SlideViewTransition();* > > > * public var timeLineDates:Array = [* > * "1139 AD",* > * "1162 AD",* > * "1165 AD",* > * "1187 AD",* > * "1195 AD"* > * ];* > > * [Embed(source="../images/timeImages/1.png")]* > * [Bindable]* > * public var icon0:Class;* > * [Embed(source="../images/timeImages/2.png")]* > * [Bindable]* > * public var icon1:Class;* > * [Embed(source="../images/timeImages/3.png")]* > * [Bindable]* > * public var icon2:Class;* > * [Embed(source="../images/timeImages/4.png")]* > * [Bindable]* > * public var icon3:Class;* > * [Embed(source="../images/timeImages/5.png")]* > * [Bindable]* > * public var icon4:Class;* > > * // Return an ArrayList of icons for each spinner* > * private function getIconList():ArrayList* > * {* > * var a:ArrayList = new ArrayList();* > * a.addItem({icon:icon0});* > * a.addItem({icon:icon1});* > * a.addItem({icon:icon2});* > * a.addItem({icon:icon3});* > * a.addItem({icon:icon4});* > > * return a;* > * }* > > > > * ]]>* > * </fx:Script>* > > > * <s:SpinnerListContainer id="timeLineHGroup" horizontalCenter="0" > y="50">* > * <s:SpinnerList id="productList1" width="400" > dataProvider="{getIconList()}" selectedIndex="0" >* > * <s:itemRenderer>* > * <fx:Component>* > * <s:IconItemRenderer labelField="" iconField="icon"/>* > * </fx:Component>* > * </s:itemRenderer>* > * </s:SpinnerList>* > * </s:SpinnerListContainer>* > > > *</s:View>* > > > -- > Philip Medlam > -- Philip Medlam
