Flex - Repeater Component with Grid Layout

Question

I have a randomly-sized array of items. I'd like to display one label for each item in a Repeater component. I want them to display in a grid layout with 5 columns and as many rows as needed. How do I do that in Flex / ActionScript?

Maybe there's another way to do it that I haven't seen yet, so any suggestion are appreciated. Thanks!

Answer 1

I would use a tile list instead of a repeater. Here is an example:

http://blog.flexexamples.com/2007/09/28/using-the-flex-tilelist-classs-new-datachangeeffect-style-in-flex-3/

Answer 2

a month too late but I've been in the same situation where I needed certain functionality that a tilelist couldn't give me. see my question here

---

So my repeater grid is 900 pixels wide. Each column is 300px wide and each row is 31 pixels high with 1 pixel whitespace in between. 3 columns in total.

the code:

<mx:Repeater id="rptCities" dataProvider="{citiesArr}">
<mx:Canvas label="{rptCities.currentItem.city}" x="{rptCities.currentIndex%3 * 300}" y="{int(rptCities.currentIndex/3) * 32}" width="300" height="31">
<mx:Label text="{rptCities.currentItem.city}"/>
</mx:Canvas>
</mx:Repeater>

so how do you read this code:

the mayor part is handled in the canvas within the repeater. As you can see each canvas is 300px wide (width of each column) and 31px high. By playing with the modulo you can define the x-position of the element.

let's say there are 6 items in the dataprovider:

x="{rptCities.currentIndex%3 * 300}"

first item: 0%3 == x-position: 0*300

second item: 1%3 == x-position: 1*300

third item: 2%3 == x-position: 2*300

forth item: 3%3 == x-position: 0*300

That takes care of the x-position of the elements. The y-position of the elements I've defined 32 as a constant value because i want 1px space in between. By converting the number to an integer you get rounded values (values in italic are number values, normal fonttype is the integer flex takes into account)

y="{int(rptCities.currentIndex/3) * 32}"

first item: 0/3 == y-position: 0*32

second item: 1/3 == y-position: 0*32 (0.33)

third item: 2/3 == y-position: 0*32 (0.66)

forth item: 3/3 == y-position: 1*32

when the repeater is at the forth item the x- and y-position= x: 0 and y: 32 which is on the second 'row'

---

Sorry for the rather large answer.