Weird display when scolling images inside List component in Flex

Question

I have a list that displays photos like them:

             <s:List id="thumnPhotosList" 
                     dataProvider="{_model.photoAlbumToCreate.photos}"
                     height="450"
                     itemRenderer="PhotoRenderer" >
                 <s:layout>
                     <s:TileLayout orientation="columns"
                                   requestedRowCount="4"
                                   requestedColumnCount="3" />
                 </s:layout>
             </s:List>

and PhotoRenderer has a code like this:

......

<mx:Image source="{_model.url + theAlbumPhoto.thumbPhotoURL}"
                          visible="{theAlbumPhoto.ready}"
                          maintainAspectRatio="true"
                          maxWidth="{Constants.DEFAULT_ALBUM_PHOTO_WIDTH}" maxHeight="{Constants.DEFAULT_ALBUM_PHOTO_HEIGHT}" />    

........

Which works fine except when the number of photos get high and the scroll bar appears it starts behaving weirdly: it start showing photos different than the ones it supposed to and if I scroll back to beginning and scroll again to new photos other ones appears sometimes the correct ones and sometime not. Not sure how to resolve this, any ideas? you can also recommend different way than using s:List if that makes it easier.

Answer 1

I had the same problem with text List, i think its padding issue, organize the pading for all components it may help.

Answer 2

As I couldn't figure out what the problem was and couldn't reproduce it on stand alone application. I came up with the following code that solved the issue:

             <s:Scroller id="photoScroller"
                         width="100%"
                         visible="{_model.photoAlbumToCreateOrUpdate.photos.length > 0}"
                         horizontalScrollPolicy="off" verticalScrollPolicy="auto"
                         skinClass="com.lal.skins.PhotoAlbumScrollerSkin"
                         top="50" bottom="0"> 

                     <s:DataGroup id="thumnPhotosList"
                                  dataProvider="{_model.photoAlbumToCreateOrUpdate.photos}"
                                  itemRenderer="AlbumPhotoThumbRenderer" >
                         <s:layout>
                             <s:TileLayout orientation="rows"
                                           requestedRowCount="4"
                                           requestedColumnCount="4" />
                         </s:layout>
                     </s:DataGroup>
             </s:Scroller>

Answer 3

I had this same issue with an Image component in a custom item renderer I was using in a TileList. I fixed it without really knowing how, but the problem was the source property of the Image component in the item renderer.

The idea with item renderers is to use the data variable to access the item feeding the renderer. What do the _model and theAlbumPhoto variables refer to in your renderer? What I ended up doing was changing the source property to something more like data.image_path, and it decided to start working.

If you're happy with your solution, hopefully this can at least be of help to someone else.