Paging applications in Extjs4 combine with the front and back ends

Front desk:

 
Ext.define('GS.system.role.store.RoleGridStore',{ 
extend:'Ext.data.Store', 
model:'GS.system.role.model.RoleGridModel', 
id:'roleStoreId', 
pageSize:4,//Page size
proxy:{ 
type:'ajax', 
url:'/gs_erp/roleAction!getRoleList', 
reader: { 
type: 'json', 
root: 'rows', 
totalProperty: 'total' 
} 
}, 
sorters: [{ 
property: 'id', //Sort field
direction: 'asc'//The default ASC
}], 
autoLoad:{start: 0, limit: 4}//Start starts with the number of bars and limit is the number of bars per page
}); 

Store. LoadPage (1); // load the first page
Background:

 
private int limit;//Number of bars per page
private int start;//Which data to start with
private int total;//The total number of article
 
public void getRoleList() 
{ 

List<Role> roleList=new ArrayList<Role>(); 
StringBuffer toJson=new StringBuffer();//To put json data
System.out.println(start+","+limit+","+total); 
try 
{ 
roleList=(List<Role>) pageServiceImpl.commonPagination(Role.class, "", start, limit); 
total=pageServiceImpl.getTotalNum(Role.class, ""); 
toJson.append("{total:").append(""+total+"").append(",success:true,").append("start:") 
.append(""+start+"").append(","); 
toJson.append("rows:["); 
for(int i=0;i<roleList.size();i++) 
{ 
toJson.append("{id:").append("'").append(""+roleList.get(i).getId()+"").append("'") 
.append(",name:").append("'").append(""+roleList.get(i).getName()+"") 
.append("'").append(",desc:").append("'").append(""+roleList.get(i).getDesc()+"") 
.append("'").append("}"); 
if(i<roleList.size()-1) 
{ 
toJson.append(","); 
} 
} 
toJson.append("]}"); 
} catch (Exception e1) 
{ 
// TODO Auto-generated catch block 
e1.printStackTrace(); 
} 
try 
{ 
response.setHeader("Cache-Control", "no-cache"); 
response.setContentType("text/json;charset=utf-8"); 
response.getWriter().print(toJson); 
System.out.println(toJson); 
} catch (IOException e) 
{ 
// TODO Auto-generated catch block 
e.printStackTrace(); 
} 
}