In this document and accompanying video we will discuss an important feature of the List Control on the UX Component, especially in regard to mobile applications.
In our example we have a list inside a UX Component. The list is displaying data from a database that has a list of movies and movie images. We see the list is only displaying three rows of data, and we are displaying it in Firefox so that we can see the Ajax callbacks that are taking place in Firebug:
When we scroll the list and get to row five, an Ajax callback fired off:
Click on that callback to see that we will be appending some rows of data to the list. The odd looking collection of characters are the Base64 encoded images that are being returned from the server:
As we continue to scroll we see that every so often a callback is made, going to get more data from the server. The list is configured so that is has AutoFetchMore scrolling turned on, so that as we scroll down the list continues to load automatically:
Let's take a look at how the list was defined. Click on the Design tab, then List properties:
When the List Builder window opens we see that the list is based on a SQL query, going against a MySQL database:
Scroll down to see that we have turned on Paginate data, and our Page size is 10. We must specify our Pagination method. Choose from FetchMore, where a button appears at the end of the list and we must click the button to fetch more records; or AutoFetchMore, where the new records get fetched automatically as soon as we get close to the end of the list:
By setting the initial Page size to 10, only a small amount of data has to be loaded when the page is initially loaded so the page comes up quickly. As we scroll, each callback is only fetching a relatively small amount of data so it appears as though we have continuous scrolling. Using AutoFetchMore allows us to give the illusion that we have loaded the entire list into memory when in fact we are only loading a small number of rows of data at a time:
