Sencha Touch List with ‘Load More’ plugin

Sunday, December 7, 2014, 20:07
Sencha Touch
4,421 views

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.

Ext.define('TechZoo.store.Movie', {
	extend	: 'Ext.data.Store',
	storeId	: 'movieStore',
    config	: {
    	model	: 'TechZoo.model.Movie',
    	autoLoad: true,
    	pageSize: 10,
    	sorters	: 'genre',
    	grouper	: {
    		groupFn	: function(record) {
    			return record.get('genre');
    	    },
    	    sortProperty	: 'genre'
    	},
    	proxy	: {
    		type: 'ajax',
    		url	: 'movies/load.do',
    		reader	: {
    			type	: 'json',
    			totalProperty: 'totalCount',
    			rootProperty: 'moviesList'
    		}
    	}
    }
});
Ext.create('TechZoo.store.Movie');

Ext.define('TechZoo.store.Movie', {

extend : 'Ext.data.Store',

storeId : 'movieStore',

config : {

model : 'TechZoo.model.Movie',

autoLoad: true,

pageSize: 10,

sorters : 'genre',

grouper : {

groupFn : function(record) {

return record.get('genre');

sortProperty : 'genre'

proxy : {

type: 'ajax',

url : 'movies/load.do',

reader : {

type : 'json',

totalProperty: 'totalCount',

rootProperty: 'moviesList'

}

});

Ext.create('TechZoo.store.Movie');

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

Ext.define('TechZoo.view.MovieList', {
	extend	: 'Ext.dataview.List',
    alias 	: 'widget.movielist',
    config	: {
    	store 	: 'Movie',
    	plugins	: [{
            xclass	: 'Ext.plugin.ListPaging',
            autoPaging: true
    	}],
    	grouped	: true,
    	indexBar: true,
    	itemTpl : '{title}',
    	listeners : {
        	itemtap : function(me, index, target, record){
        		Ext.Msg.alert('Movie Detail', 
        			'Director: ' + record.get('director') + 
        			'<br/>Year of Release : ' + record.get('yearOfRelease'));	
        	}
        },
    	onItemDisclosure : true
    }
});

Ext.define('TechZoo.view.MovieList', {

extend : 'Ext.dataview.List',

alias : 'widget.movielist',

config : {

store : 'Movie',

plugins : [{

xclass : 'Ext.plugin.ListPaging',

autoPaging: true

}],

grouped : true,

indexBar: true,

itemTpl : '{title}',

listeners : {

itemtap : function(me, index, target, record){

Ext.Msg.alert('Movie Detail',

'Director: ' + record.get('director') +

'<br/>Year of Release : ' + record.get('yearOfRelease'));

}

onItemDisclosure : true

}

});

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

package org.techzoo.touch.vo;

import static org.techzoo.touch.vo.Movie.MovieGenre.Action;
import static org.techzoo.touch.vo.Movie.MovieGenre.Comedy;
import static org.techzoo.touch.vo.Movie.MovieGenre.Family;
import static org.techzoo.touch.vo.Movie.MovieGenre.Horror;
import static org.techzoo.touch.vo.Movie.MovieGenre.War;

import java.util.ArrayList;
import java.util.List;

public class MoviesDatabase {

	private List<Movie> movies = null;
	
	private static MoviesDatabase _instance = null;
	
	private MoviesDatabase() {
		if(null == movies){
			initializeMovies();
		}
	}
	
	public static MoviesDatabase getInstance() {
		if(null == _instance){
			return new MoviesDatabase();
		}
		return _instance;
	}
	
	public List<Movie> getMovies() {
		return movies;
	}
	
	public List<Movie> getMoviesByPage(int start, int limit) {
		List<Movie> moviesList = movies.subList(start, start+limit);
		return moviesList;
	}
	
	private void initializeMovies() {
		movies = new ArrayList<Movie>();
		
		/** Action **/
		movies.add(new Movie(1001, "Ek Tha Tiger", "Kabir Khan", 2012, Action));
		movies.add(new Movie(1002, "Khiladi", "Abbas Mastan", 1992, Action));
		movies.add(new Movie(1003, "Kick", "Sajid Nadiadwala", 2014, Action));
		movies.add(new Movie(1004, "Rowdy Rathore", "Prabhudheva", 2012, Action));
		
		/** Horror **/
		movies.add(new Movie(1005, "Bhoot", "Ram Gopal Varma", 2003, Horror));
		movies.add(new Movie(1006, "Raat", "Ram Gopal Varma", 1992, Horror));
		movies.add(new Movie(1007, "Aatma", "Deepak Ramsay", 2013, Horror));
		movies.add(new Movie(1008, "Mahal", "Kamal Amrohi", 1949, Horror));
		
		/** Comedy **/
		movies.add(new Movie(1009, "Gol Maal", "Hrishikesh Mukherjee", 1979, Comedy));
		movies.add(new Movie(1010, "Jaane bhi do Yaaro", "Kundan Shah", 1983, Comedy));
		movies.add(new Movie(1011, "Andaz apna apna", "Rajkumar Santoshi", 1994, Comedy));
		movies.add(new Movie(1012, "3 Idiots", "Rajkumar Hirani", 2009, Comedy));
		
		/** Family **/
		movies.add(new Movie(1013, "Chakde India", "Shimit Amin", 2007, Family));
		movies.add(new Movie(1014, "Khichdi", "Aatish Kapadia", 2010, Family));
		movies.add(new Movie(1015, "Vivah", "Sooraj Barjatya", 2006, Family));
		movies.add(new Movie(1016, "Beta", "Indra Kumar", 1992, Family));
		
		/** War **/
		movies.add(new Movie(1017, "Border", "JP Datta", 1997, War));
		movies.add(new Movie(1018, "LOC Kargil", "JP Datta", 2003, War));
		movies.add(new Movie(1019, "Lakshya", "Farhan Akhtar", 2004, War));
		movies.add(new Movie(1020, "Tango Cahrlie", "Mani Shankar", 2005, War));
	}
	
}

package org.techzoo.touch.vo;

import static org.techzoo.touch.vo.Movie.MovieGenre.Action;

import static org.techzoo.touch.vo.Movie.MovieGenre.Comedy;

import static org.techzoo.touch.vo.Movie.MovieGenre.Family;

import static org.techzoo.touch.vo.Movie.MovieGenre.Horror;

import static org.techzoo.touch.vo.Movie.MovieGenre.War;

import java.util.ArrayList;

import java.util.List;

public class MoviesDatabase {

private List<Movie> movies = null;

private static MoviesDatabase _instance = null;

private MoviesDatabase() {

if(null == movies){

initializeMovies();

}

public static MoviesDatabase getInstance() {

if(null == _instance){

return new MoviesDatabase();

}

return _instance;

}

public List<Movie> getMovies() {

return movies;

}

public List<Movie> getMoviesByPage(int start, int limit) {

List<Movie> moviesList = movies.subList(start, start+limit);

return moviesList;

}

private void initializeMovies() {

movies = new ArrayList<Movie>();

/** Action **/

movies.add(new Movie(1001, "Ek Tha Tiger", "Kabir Khan", 2012, Action));

movies.add(new Movie(1002, "Khiladi", "Abbas Mastan", 1992, Action));

movies.add(new Movie(1003, "Kick", "Sajid Nadiadwala", 2014, Action));

movies.add(new Movie(1004, "Rowdy Rathore", "Prabhudheva", 2012, Action));

/** Horror **/

movies.add(new Movie(1005, "Bhoot", "Ram Gopal Varma", 2003, Horror));

movies.add(new Movie(1006, "Raat", "Ram Gopal Varma", 1992, Horror));

movies.add(new Movie(1007, "Aatma", "Deepak Ramsay", 2013, Horror));

movies.add(new Movie(1008, "Mahal", "Kamal Amrohi", 1949, Horror));

/** Comedy **/

movies.add(new Movie(1009, "Gol Maal", "Hrishikesh Mukherjee", 1979, Comedy));

movies.add(new Movie(1010, "Jaane bhi do Yaaro", "Kundan Shah", 1983, Comedy));

movies.add(new Movie(1011, "Andaz apna apna", "Rajkumar Santoshi", 1994, Comedy));

movies.add(new Movie(1012, "3 Idiots", "Rajkumar Hirani", 2009, Comedy));

/** Family **/

movies.add(new Movie(1013, "Chakde India", "Shimit Amin", 2007, Family));

movies.add(new Movie(1014, "Khichdi", "Aatish Kapadia", 2010, Family));

movies.add(new Movie(1015, "Vivah", "Sooraj Barjatya", 2006, Family));

movies.add(new Movie(1016, "Beta", "Indra Kumar", 1992, Family));

/** War **/

movies.add(new Movie(1017, "Border", "JP Datta", 1997, War));

movies.add(new Movie(1018, "LOC Kargil", "JP Datta", 2003, War));

movies.add(new Movie(1019, "Lakshya", "Farhan Akhtar", 2004, War));

movies.add(new Movie(1020, "Tango Cahrlie", "Mani Shankar", 2005, War));

}

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

package org.techzoo.touch.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.validation.ObjectError;
import org.springframework.web.bind.MethodArgumentNotValidException;
import org.springframework.web.bind.ServletRequestUtils;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.techzoo.touch.vo.Movie;
import org.techzoo.touch.vo.MoviesDatabase;

@Controller
@RequestMapping("movies")
public class MovieController {

	
	@RequestMapping(value = "/index")
	public String index()
	{
		return "index";
	}
	
	@RequestMapping (value = "/load.do", method = RequestMethod.GET)
	public @ResponseBody Map<String, Object> loadMovies(HttpServletRequest request) 
	throws Exception
	{
		MoviesDatabase mdb = MoviesDatabase.getInstance();
		int start = ServletRequestUtils.getIntParameter(request, "start");
		int limit = ServletRequestUtils.getIntParameter(request, "limit");
		List<Movie> movies = mdb.getMoviesByPage(start, limit);
		Map<String, Object> resp = new HashMap<String, Object>();
		resp.put("moviesList", movies);
		resp.put("totalCount", mdb.getMovies().size());
		return resp;
	}
	
	
}

package org.techzoo.touch.controller;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;

import org.springframework.validation.ObjectError;

import org.springframework.web.bind.MethodArgumentNotValidException;

import org.springframework.web.bind.ServletRequestUtils;

import org.springframework.web.bind.annotation.ExceptionHandler;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.ResponseBody;

import org.techzoo.touch.vo.Movie;

import org.techzoo.touch.vo.MoviesDatabase;

@Controller

@RequestMapping("movies")

public class MovieController {

@RequestMapping(value = "/index")

public String index()

{

return "index";

}

@RequestMapping (value = "/load.do", method = RequestMethod.GET)

public @ResponseBody Map<String, Object> loadMovies(HttpServletRequest request)

throws Exception

{

MoviesDatabase mdb = MoviesDatabase.getInstance();

int start = ServletRequestUtils.getIntParameter(request, "start");

int limit = ServletRequestUtils.getIntParameter(request, "limit");

List<Movie> movies = mdb.getMoviesByPage(start, limit);

Map<String, Object> resp = new HashMap<String, Object>();

resp.put("moviesList", movies);

resp.put("totalCount", mdb.getMovies().size());

return resp;

}

Output:

When initially List load..

and when after it load all records…

Happy Coding…:-)

Tags: sencha touch java, sencha touch list example, sencha touch plugin, sencha touch spring, sencha touch tutorial

About the Author

Tousif Khan has written 69 posts.

I Love Coding, Analyzing, Designing and doing it the right way. I am obsessed about learn anything new daily and sharing what I have learn each Day. This Blog is journey of my Zeal, going through step by step to the mountain of desire to become prefect. Google Wanna Hire me ?

Sencha Touch List with ‘Load More’ plugin

About the Author

Recent Posts

Categories

Site Categories

Site Pages