2 Replies Latest reply on Jun 20, 2010 9:13 PM by cyber0897

    need help with spark list itemRenderer state change

    cyber0897 Level 1

      hey guys... so i have a spark list, where i set the layout to tileLayout and i use item renderer to display an image and two buttons in each tile... what im trying to do is when you hover over each tile i want the buttons to fade in and out... and by default... i need the buttons to be not visible...

       

      i got the buttons to fade in and out when you hover over the item.. but the problem is that i when i initialize the application the buttons are all visible... if that makes any sence...

       

      any help is greatly appretiated!!!

       

      the following is the code i have... please tell me what modifications i need to make...

       

      <s:List id="searchResultImages" borderVisible="false" dataProvider="{searchImages}" width="100%" height="100%">
           <s:layout>
                <s:TileLayout requestedColumnCount="6" horizontalGap="30" columnWidth="100" rowHeight="85" />
           </s:layout>
           <s:itemRenderer>
                <fx:Component>
                     <s:ItemRenderer>
                          <s:states>
                               <s:State name="hovered" />
                               <s:State name="normal" />
                          </s:states>
                          <s:transitions>
                               <s:Transition fromState="normal" toState="hovered">
                                    <s:Fade id="hoveredFade" targets="{[delBtn, editBtn]}" alphaFrom="0.0" alphaTo="1.0" duration="1000" />
                               </s:Transition>
                               <s:Transition fromState="hovered" toState="normal">
                                    <s:Fade id="normalFade" targets="{[delBtn, editBtn]}" alphaFrom="1.0" alphaTo="0.0" duration="1000" />
                               </s:Transition>
                          </s:transitions>
                          <s:VGroup>
                               <mx:Image source="{data.fileLoc}" width="100" height="50" useHandCursor="true" buttonMode="true" verticalCenter="0" />
                               <s:HGroup>
                                    <mx:LinkButton id="delBtn" label="DEL" skin="{null}" color="#0184C7" rollOverColor="#333333" useHandCursor="true" 
                                                      buttonMode="true" />
                                    <mx:LinkButton id="editBtn" label="EDIT" skin="{null}" color="#0184C7" rollOverColor="#333333" useHandCursor="true" 
                                                      buttonMode="true" />
                               </s:HGroup>
                          </s:VGroup>
                     </s:ItemRenderer>
                </fx:Component>
           </s:itemRenderer>
      </s:List>