This blog post talks about setting up ExtJS grid panel for remote sorting and pagination at server side. For our example below we are using JEE technologies like Hibernate for server side sorting and pagination. We are using Jersey to serve RESTful web services and Spring as IOC container and for bean management. The data will be converted from Data Object to JSON and vice versa using JAXB and raw JSON objects.
Let us take a look at what we are trying to build. It is an ExtJS grid panel that lists all companies. Please note the docked pagination toolbar at the bottom of the snapshot. Also, the results are sorted by Company name in ascending order. The pagination and sorting is being done remotely at server side using Hibernate as we will learn below.
Let us start by defining ExtJS Store. We will set up a REST based proxy which will load the list in JSON format. Set ‘remoteSort’ config parameter to ‘true’, this will defer sorting operation to server. Its default value is false which means that the sorting is done locally at client side. We can specify the collection of sorters to be applied to this store using the ‘sorters’ property. Also, let us specify ‘pageSize’ config parameter to 5. ‘pageSize’ is the number of records to be shown on a page. autoLoad: {start: 0, limit: 5} means the store will be loaded automatically after creation. It will get records from the starting index at 0 and limit number of records to 5.
Ext.define('Crm.store.Companies', {
extend: 'Ext.data.Store',
requires: 'Crm.model.Company',
model: 'Crm.model.Company',
autoLoad: {start: 0, limit: 5},
pageSize: 5,
remoteSort: true,
sorters: [{
property : 'name',
direction: 'asc'
}],
proxy: {
type: 'rest',
url : 'service/companyList/json',
reader: {
type: 'json',
root: 'companyList',
totalProperty: 'total'
}
}
});
Let us now look at CompanyList view. It is an ExtJS grid panel and will be placed at the center of our viewport (border layout). Notice the docked paging toolbar at the end. It points to the same store as does our ExtJS view.
Ext.define('Crm.view.CompanyList', {
extend: 'Ext.grid.Panel',
alias: 'widget.companyList',
store : 'Companies',
title : 'Company List',
initComponent: function(){
this.columns = [ {
text : 'Name',
width : 150,
dataIndex : 'name'
}, {
text : 'Status',
width : 150,
sortable : false,
hideable : false,
dataIndex : 'status.name'
}, {
text : 'Employee Strength',
width : 150,
sortable : false,
hideable : false,
dataIndex : 'companyDetail.employeeStrength'
}, {
text : 'Notes',
flex : 1,
sortable : false,
hideable : false,
dataIndex : 'companyDetail.notes'
} ];
this.dockedItems = [ {
xtype : 'pagingtoolbar',
store : 'Companies',
dock : 'bottom',
displayInfo : true
} ];
this.callParent();
}
});
What you see on the ExtJS grid snapshot above is page 2 of 5. Our autoLoad config settings will load page 1 by default. Clicking on next page button in the docked toolbar will take you to page 2. Here is how the request parameters are sent by browser to the server when we request page 2.
limit 5
page 2
sort [{"property":"name","direction":"asc"}]
start 5
Clicking on name property will sort companies in descending order. The modified sort parameter in request looks like this:
sort [{"property":"name","direction":"desc"}]
Let us now look at the Hibernate method that performs the actual sorting and pagination. The input parameters are ‘start’ and ‘limit’ for pagination. It also uses sort properties for sorting the results.
public List list(int start, int limit, String sortProperty, String sortDirection) {
List list = sessionFactory.getCurrentSession()
.createQuery("from Company order by " + sortProperty + " " + sortDirection)
.setFirstResult(start).setMaxResults(limit).list();
return list;
}
Let us now look at the RESTful Web Service method implemented using Jersey and JAXB to produce the results for ExtJS grid in JSON format. We have used raw JSON objects to parse ‘sort’ request parameter which is also in JSON format. This Jersey based web service method calls service layer which in turn calls DAO layer which contains the Hibernate code listed above.
@GET
@Produces("application/json")
@Path("companyList/json")
public CompanyList getJSON(@QueryParam("start") int start,
@QueryParam("limit") int limit, @QueryParam("sort") String sort) {
JSONArray array = new JSONArray(sort);
JSONObject obj = array.getJSONObject(0);
String sortProperty = (String) obj.get("property");
String sortDirection = (String) obj.get("direction");
CompanyList list = new CompanyList(companyService.listCompanies(start,
limit, sortProperty, sortDirection));
list.setTotal(companyService.countCompanies().intValue());
return list;
}
The focus of this blog post is ExtJS grid panel and how to set it up for remote sorting and pagination using Hibernate. You can learn more about server side code in our Annotations tutorial.
We will be happy to resolve any queries you may have. Please leave us a reply or comment below.
