Paginate an ArrayCollection...the easy way.

Posted At : May 10, 2007 9:00 PM | Posted By : Scott Stroz
Related Categories: ColdFusion Stuff,Flex Stuff

One of the coolest...umm...features...of Flex 2 is the ability to extend any class, including any of the core, or native Flex/Flash classes. This allows developers to easily add functionality to classes, or modify existing functionality.

One thing that struck me as rather odd (I am not sure why I think its odd) was that there was no easy way to paginate data in an ArrayCollection, and there is only one control/container, <mx:Repeater>, that has native properties, startingIndex and count, which allows easy pagination of data.

I know that Flex...umm...Lifecyle Data Services (LDS), can help with this (I am not sure exactly how), but there are time when you may have a large data set that you cannot bring into your app from LDS. As a result of needing this for a project, and wanting to learn about extending Flex classes, I came up with PagableArrayCollection.

I was impressed with how easy it was to understand the documentation on how to extend classes, as well as how to add/override methods and properties of classes. PagableArrayCollection adds the following to the native ArrayCollection:

itemsPerPage:Number - [read/write] - the number of items to display per 'page'
currentPage:Number [read/write] - the currently viewed 'page'
pages:Number - [read] - The number of 'pages' based on size of dataset and itemsPerPage.
pageUp() - Goes one 'page' up in dataset.
pageDown() - Goes one page down in dataset.

Check out a demo here. Or you can download the .zip file below.

I would love any feedback, or suggestions.

Comments (11) |

Print |

Send |

Download |

del.icio.us |

Digg It! |

Linking Blogs | 5099 Views

Related Blog Entries

PagableArrayCollection Updated (February 25, 2008)

Comments

[Add Comment]

I wish Adobe had been a bit more creative with the renaming of Flex. My mind keeps hiccuping over "LDS", because well, you know that there's a large organization that is commonly known by this acronym . . .

# Posted By Lola LB | 5/11/07 7:05 AM

Nice, I think it's great idea ... works fine for me

# Posted By julien | 5/11/07 8:14 AM

you have no idea how timely this was. i had just implemented the "hacky" solution from http://labs.flexcoders.nl/?p=71. this is so much cleaner. i seriously committed my files last night at 9:03pm....then i read your post. way to go. if only you'd published it 5 hours earlier ;)

thanks again dude

# Posted By kasey mccurdy | 5/11/07 10:12 AM

Beautiful stuff Scott

# Posted By Axel | 5/11/07 11:00 AM

Wicked cool, Scott!

One thing that'd be a neat example: bind the rows per page to the displayed rows in a datagrid, so that if its height changes, the pagination follows suit.

# Posted By Joe Rinehart | 5/11/07 12:09 PM

hey man -- sorry to be the first to post a bug, but it would appear that the addItem() function doenst seem to work. were you aware of this?

# Posted By kasey | 5/11/07 12:21 PM

Kasey, would you mind putting the bug into the bug tracker at http://pagableac.riaforge.org/.

Thanx!

# Posted By Scott Sroz | 5/11/07 3:02 PM

hey there scott - have you had a chance to figure out why the addItem() function isnt working? i tried looking at it over the weekend, but i didnt make much progress. not sure what the problem could be...

# Posted By kasey mccurdy | 5/15/07 12:27 AM

Kasey - I have not had a chance to look at it yet, but it is high on my 'to do' list.

# Posted By Scott Stroz | 5/15/07 6:12 AM

Great Work!! And very clean..... but does it perform well with large sets of data, when you ever have this situation in you application?
Anybody got some sparetime to do some performance tests....?
And I always had my doubts with using filterfunction internally, because how are you going to handle it when you got multiple filterfunctions, mean when you want to use one on you PagedArrayCollection?

# Posted By Maikel Sibbald | 5/20/07 6:41 AM