Working with GXT(Ext GWT) Grid : Add Local Pagination Functionality

In my previous blog i have described how to create a simple Grid of GXT.  I have a plan to write a series of blog about other useful functionalities which can be added to the Grid. Here i write down the way of adding local pagination functionality with the Grid.

Create a new project named GxtPagingExample and add GXT library in the project. To create a grid at first you need a base model class and have to generate data for that model. In this tutorial i have used the same Employee model and TestData class for generating data which i used in my previous blog. You will find the code of these classes there.

Now go to the onModuleLoad method of GxtPagingExample class. Remove all the auto generated code of this method. First create an instance of PagingModelMemoryProxy which is a specialized DataProxy that supports paging when the entire data set is in the memory.

PagingModelMemoryProxy proxy = new PagingModelMemoryProxy(TestData.getEmployees());
   PagingLoader loader = new BasePagingLoader(proxy);
   loader.setRemoteSort(true);
   ListStore<Employee> employeeList = new ListStore<Employee>(loader);  

BasePagingLoader is an implementation of the PagingLoader interface which loads data using the proxy.If remote sort is enable then it will allow you to sort between the whole data set otherwise the sorting will be done only between the viewable data set. Then create a ListStore of Employee type.

Now create a PagingToolBar widget then bind it with the loader. It takes the page size in the constructor.

final PagingToolBar toolBar = new PagingToolBar(5);
   toolBar.bind(loader);
   loader.load(0, 5);

The arguments of the load method of PagingLoader are the begin index and page size.

Create a list of ColumnConfig and define each column. Then create a grid and add the grid and the PagingToolBar in a panel.

List<Columnconfig> configs = new ArrayList<Columnconfig>();

ColumnConfig column = new ColumnConfig();  
column.setId("name");  
column.setHeader("Employee Name");  
column.setWidth(200);  
configs.add(column);

column = new ColumnConfig("department", "Department", 150);  
column.setAlignment(HorizontalAlignment.LEFT);  
configs.add(column);

column = new ColumnConfig("designation", "Designation", 150);  
column.setAlignment(HorizontalAlignment.LEFT);  
configs.add(column);

column = new ColumnConfig("salary", "Slary", 100);  
column.setAlignment(HorizontalAlignment.RIGHT);  
final NumberFormat number = NumberFormat.getFormat("0.00");  
GridCellRenderer<Employee> checkSalary = new GridCellRenderer<Employee>() {  
public String render(Employee model, String property, ColumnData config, int rowIndex,  
int colIndex, ListStore<Employee> employeeList, Grid<Employee> grid) {  
double val = (Double) model.get(property);  
String style = val < 70000 ? "red" : "green";  
return "<span style='color:" + style + "'>" + number.format(val) + "</span>"; 
}  
};  
column.setRenderer(checkSalary);  
configs.add(column);

column = new ColumnConfig("joiningdate", "Joining Date", 100);  
column.setAlignment(HorizontalAlignment.RIGHT);  
column.setDateTimeFormat(DateTimeFormat.getShortDateFormat());  
configs.add(column);

ColumnModel cm = new ColumnModel(configs);
Grid<Employee> grid = new Grid<Employee>(employeeList, cm); 
grid.setStyleAttribute("borderTop", "none"); 
grid.setAutoExpandColumn("name"); 
grid.setBorders(true); 
grid.setStripeRows(true);

ContentPanel cp = new ContentPanel();  
cp.setBodyBorder(false);  
cp.setHeading("Employee List");  
cp.setButtonAlign(HorizontalAlignment.CENTER);  
cp.setLayout(new FitLayout());  
cp.setSize(700, 300); 
cp.add(grid);  
cp.setBottomComponent(toolBar);
RootPanel.get().add(cp);

Explanation of the above code is written here.
That's all. Run the application and test the pagination functionality. To view the live demo of this tutorial Click here.