Requirement to add Image AND Text to a single SpinnerList componente

[Philip Medlam]

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