2

I have have successfully set up a list that pulls users from a database and displays them in a list. I'm currently customising the list with an itemrenderer and it's going well. I can pull a user's profile picture, then to the right of it I'll display their name and underneath is their age. The problem is that I can only fit 4 results into the list and I can see the top of the 5th, but there's no scroll bar. I would show a print screen but I populated my database with real info about my friends and their facebook details, so i'd rather not.

In my main mxml programme I have the following code:

<s:List id="resultList" includeIn="loggedin" x="120" y="246"
      width="100%" itemRenderer="userList">   
    <s:layout>  
        <s:VerticalLayout useVirtualLayout="true" requestedMinRowCount="1"/>  
    </s:layout>  
    <s:AsyncListView list="{getUserResult.lastResult}"/>  
</s:List>

In userList.mxml I have the following code:

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                autoDrawBackground="true">  
    <s:Image id="fbImg" source="http://graph.facebook.com/{data.facebookid}/picture?type=normal" x="0" y="0"/>  
    <s:Label id="usernameLbl" x="120" y="0" fontFamily="Calibri" fontSize="25" fontWeight="bold" text="{data.firstname} {data.lastname}"/>  
    <s:Label id="ageLbl" text="{data.dob}" x="120" y="40" />  
</s:ItemRenderer>

Does anybody know why I cannot scroll all of my results? I'm sure it's something very simple that I do not know about.
EDIT: I'm so sorry for the horrible formatting. I can't seem to get my code to display nicely.

Sam DeHaan
  • 10,246
  • 2
  • 40
  • 48
user1077544
  • 73
  • 8
  • In order to get code to format nicely, you need to indent it. Four spaces/one tab makes a code block. Alternatively, there's a button to make a code block on top of the editor pane. – Sam DeHaan May 08 '12 at 19:39
  • Is this mobile development, or desktop development, or browser based development? – JeffryHouser May 08 '12 at 19:42
  • It's browser development for the moment. I may modify it for a mobile too, but I just want it all to work on my browser first. – user1077544 May 08 '12 at 20:07
  • Once you're going to adapt your code to be mobile ready, make sure you set the `useVirtualLayout` property to false (default) again. You'd lose the virtualization feature of the list which decreases performance significantly if you have large datasets. – AlBirdie May 09 '12 at 07:50

2 Answers2

2

Assign a height to your list and all will be right in the world. If you don't, it assumes it can extend past the bottom of your page to show all the data even if you cant see it.

<s:List id="resultList" includeIn="loggedin" x="120" y="246"
  width="100%" height="100%" itemRenderer="userList">   
<s:layout>  
    <s:VerticalLayout useVirtualLayout="true" requestedMinRowCount="1"/>  
</s:layout>  
<s:AsyncListView list="{getUserResult.lastResult}"/>

P.S. Great question with lots of detail and perfect amount of code.

Dom
  • 2,569
  • 1
  • 18
  • 28
  • Thankyou for the compliment and the correct answer. I had a feeling it would be something very simple, but it's saved me a lot of time searching. Also thankyou to whoever seems to have made my code look more presentable. – user1077544 May 08 '12 at 22:53
1

I had a problem with List seeing the percent height (height="100%"). So, I had to set it using something like height="{myContainer.height}" and it worked.

Patrick
  • 21
  • 3