View Full Version : Unable to Implement EXT JS GridPanel Paging

22 Jan 2013, 5:06 AM
So my GridPanels Scrollbars are not working properly, They work properly during the initial load, Later when the grid is reloaded with new search filters the scrolling fails.

So I have decided to implement Paging for the grids. Here is my code.

DataStore Code

function loadByCriteria(criteria){
limit: config.pageSize,
json : Ext.JSON.encode(criteria)

Ext.define('tz.model.Invoice', {
extend: 'Ext.data.Model',
fields : [ {name: 'id', type: 'int'},'fullName','vendorName','projectName','status','comments','invoiceNo','projectCode',
{name: 'billingFrom', type: 'date', dateFormat: 'Y-m-d H:i:s.u'},
{name: 'billingTo', type: 'date', dateFormat: 'Y-m-d H:i:s.u'},
{name: 'created', type: 'date', dateFormat: 'Y-m-d H:i:s.u'}, ........

Ext.define('tz.store.InvoiceStore', {
extend : 'Ext.data.Store',
model: 'tz.model.Invoice',
buffered: true,
pageSize: 15,
proxy: {
type: 'ajax',
url: '/timeSheetz/remote/invoice/search?',
reader: {
type: 'json',
root: 'rows',
totalProperty: 'size'
simpleSortMode: true
loadByCriteria: loadByCriteria

I have a search Panel based on which the Grid is updated. Here is the code for Searchpanel.js

search : function() {
var values = app.invoiceSearchPanel.getValues();
var params = new Array();
params.push(['name','like', values.name]);
params.push(['vendorName','like', values.vendorName]);
params.push(['status','like', values.status]);
params.push(['invoiceNo','like', values.invoiceNo]);
var filter = getFilter(params);

Added the below code to my GridPanel

xtype: 'pagingtoolbar',
store: me.store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true

Here comes the JAVA code.

@RequestMapping(value = "/search", method = {RequestMethod.POST,RequestMethod.GET })
public String list(@RequestParam("json") String json, Map<String, Object> map) throws JSONException {
SearchFilter filter = ParamParser.parse(json);
List<Invoice> invs = billingService.findByCriteria(filter);
return returnJson(map, toJSON(invs).toString());

public List<Invoice> findByCriteria(SearchFilter filter) {
String invQuery = " select * from Invoice as e where 1=1"
String paramQuery = "";
Map<String, Param> map = filter.getParamMap();
if (map.get("name") != null) {
paramQuery += " and (u.firstName like '%" + map.get("name").getStrValue()+ "%'";
paramQuery += " or u.lastName like '%" + map.get("name").getStrValue()+ "%'";
paramQuery += " or concat(u.firstName,' ',u.lastName) like '%" + map.get("name").getStrValue()+ "%' )";
if (map.get("vendorName") != null) {
paramQuery += " and v.name like '%" + map.get("vendorName").getStrValue()+ "%'";
if (map.get("status") != null) {
paramQuery += " and i.status like '%" + map.get("status").getStrValue()+ "%'";
if (map.get("invoiceNo") != null) {
paramQuery += " and i.invoiceNo like '%" +map.get("invoiceNo").getStrValue()+ "%'";
if (map.get("invoiceAmountFrom") != null) {
paramQuery += " and i.invoiceAmount >= " +map.get("invoiceAmountFrom").getStrValue();
if (map.get("invoiceAmountTo") != null) {
paramQuery += " and i.invoiceAmount <=" +map.get("invoiceAmountTo").getStrValue();

return list;
} else {
query = invQuery + paramQuery;
// Changing the code to display Paging in GridPanel
List<Invoice> list = sessionFactory.getCurrentSession().createQuery(query).setFirstResult(0).setMaxResults(filter.getPageSize()).list();
return list;

Even After implementing Grid Paging, I can see all the records of a give pageSize are displaying on single page itself.
Suppose I give PageSize of 15, I see only 15 records in the grid and no more next button enabled.

I am confused how the grid shows the count of all the records in dispayInfo and renders 15 records per page.

Can anyone help me fix this.

22 Jan 2013, 7:20 AM
You need to handle start and limit on the server side also, in your query.

SELECT * FROM table_name LIMIT 0, 15

22 Jan 2013, 8:38 AM
If you see the code I have line


I should pass start parameter to .setFirstResult(start),
but the problem is nothing is returning to JAVA when I press next button.

Based on the given pagesize , No of records are loading in the grid.
Suppose if there are a total of 120 records and my pagesize is defined as 20, then
only 20 records are getting displayed and next button is disabled.

I couldn't figure out how I can link both js and Java for paging.
When i searched I found a tutorial here (http://blog.techferry.com/2012/01/25/extjs-grid-panel-with-remote-sorting-and-pagination-using-hibernate/). But my implementation is similar to
the tutorial in the above link, not sure what I am missing.