This is the third episode of the HTML5  productivity series, where the opensource tool Clear Data Builder generates a Web application that uses ExtJS framework, Ext Direct,  and Java. In this episode you will learn how add data pagination functionality to the ExtJS grid component.

episode_3_agenda_and_links.md

Screencast series: Productive Enterprise Web Development with ExtJS and Clear Data Builder

Episode 3 Agenda

• Extend simple CRUD ExtJS+Java application with data pagination
  • Add Ext.toolbar.Paging component
  • Bind grid and pagingtoolbar to same store
  • Use DirectOptions class to read pagination parameters

Episode 3 Links

• Ext.toolbar.Paging
• Data Pagination in Clear Toolkit

Person.java

package dto;

import com.farata.dto2extjs.annotations.JSClass;
import com.farata.dto2extjs.annotations.JSGeneratedId;

@JSClass
public class Person {
  
	@JSGeneratedId
	private Integer id;
	private String firstName;
	private String lastName;
	private String phone;
	private String ssn;
	
	@Override
	public String toString() {
		StringBuilder builder = new StringBuilder();
		builder.append("Person [id=");
		builder.append(id);
		builder.append(", firstName=");
		builder.append(firstName);
		builder.append(", lastName=");
		builder.append(lastName);
		builder.append(", phone=");
		builder.append(phone);
		builder.append(", ssn=");
		builder.append(ssn);
		builder.append("]");
		return builder.toString();
	}
	public Person(Integer id, String firstName, String lastName, String phone,
			String ssn) {
		super();
		this.id = id;
		this.firstName = firstName;
		this.lastName = lastName;
		this.phone = phone;
		this.ssn = ssn;
	}
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getFirstName() {
		return firstName;
	}
	public void setFirstName(String firstName) {
		this.firstName = firstName;
	}
	public String getLastName() {
		return lastName;
	}
	public void setLastName(String lastName) {
		this.lastName = lastName;
	}
	public String getPhone() {
		return phone;
	}
	public void setPhone(String phone) {
		this.phone = phone;
	}
	public String getSsn() {
		return ssn;
	}
	public void setSsn(String ssn) {
		this.ssn = ssn;
	}
	

}

PersonService.java

package service;

import java.util.List;

import clear.cdb.extjs.annotations.JSFillMethod;
import clear.cdb.extjs.annotations.JSGenerateSample;
import clear.cdb.extjs.annotations.JSGenerateStore;
import clear.cdb.extjs.annotations.JSService;

import dto.Person;

@JSService
public interface PersonService {
  
	@JSGenerateStore
	@JSFillMethod
	@JSGenerateSample
	List<Person> getPersons();

}

PersonServiceImpl.java

package service;
import java.util.ArrayList;
import java.util.List;

import clear.djn.DirectOptions;

import dto.Person;
import service.generated.*;

public class PersonServiceImpl extends _PersonServiceImpl {

  @Override
	public List<Person> getPersons() {
		List<Person> result = new ArrayList<>();
		for (int i=0; i<1000; i++){
			result.add(new Person(i, "Joe", "Doe", "555-55-55", "1111-11-1111"));
		}
		int start = ((Double)DirectOptions.getOption("start")).intValue();
		int limit = ((Double)DirectOptions.getOption("limit")).intValue();
		limit = Math.min(start+limit, result.size() );
		DirectOptions.setOption("total", result.size());
		result = result.subList(start, limit);
		

		return result;
	}
	
}

sampleApp.js

Ext.Loader.setConfig({
	disableCaching : false,
	enabled : true,
	paths : {
		episode_3_pagination : 'app',
		Clear : 'clear'
	}
});

Ext.syncRequire('episode_3_pagination.init.InitDirect');
// Define GridPanel
var myStore = Ext.create('episode_3_pagination.store.dto.PersonStore',{});
Ext.define('episode_3_pagination.view.SampleGridPanel', {
	extend : 'Ext.grid.Panel',
	store : myStore,
	alias : 'widget.samplegridpanel',
	autoscroll : true,
	plugins : [{
		ptype : 'cellediting'
	}],
	dockedItems: [
	{
		xtype: 'pagingtoolbar',
		displayInfo: true,
		dock: 'top',
		store: myStore
	}
	],
	columns : [{
		header : 'firstName',
		dataIndex : 'firstName',
		editor : {
			xtype : 'textfield'
		},
		flex : 1
	}, {
		header : 'id',
		dataIndex : 'id',
		flex : 1
	}, {
		header : 'lastName',
		dataIndex : 'lastName',
		editor : {
			xtype : 'textfield'
		},
		flex : 1
	}, {
		header : 'phone',
		dataIndex : 'phone',
		editor : {
			xtype : 'textfield'
		},
		flex : 1
	}, {
		header : 'ssn',
		dataIndex : 'ssn',
		editor : {
			xtype : 'textfield'
		},
		flex : 1
	}],
	tbar : [{
		text : 'Load',
		action : 'load'
	}, {
		text : 'Add',
		action : 'add'
	}, {
		text : 'Remove',
		action : 'remove'
	}, {
		text : 'Sync',
		action : 'sync'
	}]
});
// Launch the application
Ext.application({
	name : 'episode_3_pagination',
	requires : ['Clear.override.ExtJSOverrider'],
	controllers : ['SampleController'],
	launch : function() {
		Ext.create('Ext.container.Viewport', {
			items : [{
				xtype : 'samplegridpanel'
			}]
		});
	}
});