The following example shows how you can resize a List control in Flex using the rowCount property. By setting the rowCount property, the List control is automatically resized so that only the specified number of rows are displayed.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/28/resizing-a-flex-list-control-using-the-rowcount-property/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:XML id="mlbXML" >
<teams>
<league id="AL">
<team label="Baltimore Orioles" />
<team label="Boston Red Sox" />
<team label="Chicago White Sox" />
<team label="Cleveland Indians" />
<team label="Detroit Tigers" />
<team label="Kansas City Royals" />
<team label="Los Angeles Angels of Anaheim" />
<team label="Minnesota Twins" />
<team label="New York Yankees" />
<team label="Oakland Athletics" />
<team label="Seattle Mariners" />
<team label="Tampa Bay Devil Rays" />
<team label="Texas Rangers" />
<team label="Toronto Blue Jays" />
</league>
</teams>
</mx:XML>
<mx:XMLListCollection id="alTeams"
source="{mlbXML.league.(@id == 'AL').team}" />
<mx:ApplicationControlBar dock="true">
<mx:Form>
<mx:FormItem label="rowCount:">
<mx:HSlider id="slider"
minimum="1"
maximum="10"
snapInterval="1"
liveDragging="true"
dataTipPrecision="0"
change="list.rowCount = event.value;" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:VBox id="vBox" height="100%">
<mx:List id="list"
maxHeight="{vBox.height}"
dataProvider="{alTeams}"
labelField="@label" />
</mx:VBox>
</mx:Application>
View source is enabled in the following example.
Dan’s comment below reminded me of another neat trick. If you want all the list items to be visible at once, simply set the rowCount property to the length of the items in the List control’s data provider, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/28/resizing-a-flex-list-control-using-the-rowcount-property/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:XML id="mlbXML" >
<teams>
<league id="AL">
<team label="Baltimore Orioles" />
<team label="Boston Red Sox" />
<team label="Chicago White Sox" />
<team label="Cleveland Indians" />
<team label="Detroit Tigers" />
<team label="Kansas City Royals" />
<team label="Los Angeles Angels of Anaheim" />
<team label="Minnesota Twins" />
<team label="New York Yankees" />
<team label="Oakland Athletics" />
<team label="Seattle Mariners" />
<team label="Tampa Bay Devil Rays" />
<team label="Texas Rangers" />
<team label="Toronto Blue Jays" />
</league>
</teams>
</mx:XML>
<mx:XMLListCollection id="alTeams"
source="{mlbXML.league.(@id == 'AL').team}" />
<mx:VBox id="vBox" height="100%">
<mx:List id="list"
dataProvider="{alTeams}"
rowCount="{list.dataProvider.length}"
labelField="@label" />
</mx:VBox>
</mx:Application>
It’s interesting that when you set the row count to 1 you lose the scrollbar. That’s something that could possibly be taken advantage of. I use the rowCount property when the dataprovider is a SQL lookup. I’ll do a SQL COUNT and use the number to set my comboBox or other list’s rowCount if it’s less than a maximum rowCount I set in init().
BTW — thanks for this site. No pontification, just example after example.. just what I need.
Cheers,
Dan
Dan,
Ah, thanks for the reminder. I updated the entry below and added a second example. A nice, easy way to resize the List control to match the number of items in the data provider is to set the list’s
rowCountproperty to the same number of items in the data provider.As for your other question/comment. Yes, if you set the
rowCountto 1, you do lose the scroll bar (at least in this case). I believe this is only because the row height isn’t large enough to show both the scroll buttons and scroll thumb (not specificially because the row count is set to 1). For example , if I create a List control, set its row count to 1, and then set therowHeightproperty to 80, it will show the scroll bars.Peter
Ayup, i just tried it out. I get scroll buttons at rowHeight 32 and the thumb appears at 42. Seems to be resolution independant as well.
Thanks again for your site Peter.
Cheers,
Dan
Dan,
It would also be very specific to the skin used on the scroll bar as well. I’m sure you could make your own custom scroll bar skin that would appear at smaller sizes if you wanted. For example, something like the numeric stepper, but without a scroll track/thumb.
Come to think of it, that isn’t a half-bad (or half-good, if you prefer) idea! Create a single row List control with NumericStepper control like up/down buttons. Although at that point it may just be better/easier to just use a ComboBox control, but where is the fun in that?!
Peter
This works nice when all fields have the same size, as soon as each field in the list has a different size Flex doesn’t understand it anymore.
Easy example is to use the posted code and add wordWrap=”true” variableRowHeight=”true” to the list element.
Now it uses the height of the single line fields, and goes awry as soon as one field is bigger then just one line. Sadly Flex doesn’t calculate the height of each field in the list.
If anyone knows a solution for this I would appreciate it allot since it has been bugging me alot lately.