Sencha Touch List with ‘Load More’ plugin

In my last post, I demonstrate Sencha touch List using Spring MVC. The post was good except one thing – we display all movies in a single list at once. For that example its good because we have only 20 movie records to show and Sencha touch stores default page size it 25 but consider what will happen if you want to show more records to a list (i.e. list of all countries in world.)

To solve this issue, Sencha Touch has a Paging plug-in (Ext.plugin.ListPaging) that we can use to load a fix records at time. It adds a ‘Load More’ button at the bottom of the list. When the user presses this button, the next page of data will be loaded into the store and appended to the List.

Continue from our previous post, we just need to modify Store, List in javascript file and MovieController.java, MovieDatabase.java file.

First, add a pageSize config in your movie store.

Now edit MovieList and add Ext.plugin.ListPaging class in plugin config.

From backend java side, First we need to modify MovieDatabase class method to support paging of List.

And last create a controller method which take ‘start’, and ‘limit’ parameter from request and return a List of Movies.

Output:

When initially List load..

and when after it load all records…

Happy Coding…:-)