rss
twitter
    Find out what I'm doing, Follow Me :)

Paginate an ArrayCollection...the easy way.

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.

Related Blog Entries

13 comments

(Comment Moderation is enabled. Your comment will not appear until approved.)
Lola LB said...
I wish Adobe had been a bit more creative with the renaming of Flex. My mind keeps hiccuping over &quot;LDS&quot;, because well, you know that there's a large organization that is commonly known by this acronym . . .
julien said...
Nice, I think it's great idea ... works fine for me
kasey mccurdy said...
you have no idea how timely this was. i had just implemented the &quot;hacky&quot; 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
Axel said...
Beautiful stuff Scott
Joe Rinehart said...
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.
kasey said...
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?
Scott Sroz said...
Kasey, would you mind putting the bug into the bug tracker at http://pagableac.riaforge.org/.

Thanx!
kasey mccurdy said...
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...
Scott Stroz said...
Kasey - I have not had a chance to look at it yet, but it is high on my 'to do' list.
Maikel Sibbald said...
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?
Boris said...
Hi Scott,
great work - but if you could delete the addItem-Bug this thing will be terrfic cool. Is there any chance to do this
Asdrubal said...
Excellent !!!!!
Poornima said...
If we use this pagableArrayCollection sorting is not working good. Can you suggest me how to achieve sorting functionality with pagableArrayCollection