Статьи

Spring MVC: сенсорный список Sencha с плагином «Загрузить еще»

Декабрь 21, 2017

 В своем последнем посте я продемонстрировал сенсорный список Sencha с помощью Spring MVC . Пост был хорош, за исключением одной вещи — мы показываем все фильмы в одном списке одновременно. Для этого примера это хорошо, потому что у нас есть только 20 записей фильмов, и Sencha touch сохраняет размер страницы по умолчанию — 25, но подумайте, что произойдет, если вы захотите показать больше записей в списке (то есть в списке всех стран мира).

Чтобы решить эту проблему, Sencha Touch имеет плагин Paging ( Ext.plugin.ListPaging), который мы можем использовать для одновременной загрузки записей исправлений. Он добавляет кнопку «Загрузить еще» внизу списка. Когда пользователь нажимает эту кнопку, следующая страница данных будет загружена в хранилище и добавлена ​​в список.

Продолжите с нашего предыдущего поста, нам просто нужно изменить Store, List в javascript файле и MovieController.java, MovieDatabase.javafile.

Сначала добавьте конфигурацию pageSize в свой магазин фильмов.

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');

Теперь отредактируйте MovieListи добавьте Ext.plugin.ListPagingкласс в конфигурации плагина.

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
    }
});

Что касается серверной части Java, сначала нам нужно изменить MovieDatabaseметод класса для поддержки подкачки 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));
	}
	
}

И, наконец, создайте метод контроллера, который берет параметр ‘start’ и ‘limit’ из запроса и возвращает список фильмов.

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;
	}
	
	
}

Выход:

Когда изначально список загружается ..

и когда после него загрузятся все записи…

Надеюсь, вам понравится этот пост. Удачного кодирования …

29
Share: