PDA

View Full Version : paging problem in extjs grid



kirankumar1231
28 Mar 2011, 3:29 AM
hello experts,

i am loading 10 recors per page
i am requesting the staart and limit params through my java code and using that i have written a sql query like this


String sql="select * from employee limit '"+limit+"' offset '"+start+"'";


but when i click on the next button next request is not hitting the server

but when i request all the records from my db next button is working fine but showing up all the records

this is the extjs code what i have written



<script type="text/javascript">

Ext.onReady(function() {
Ext.QuickTips.init();
var reader=new Ext.data.JsonReader({
},[
{name: 'empid',mapping:'empid'},
{name: 'empname'}
]
);
var store=new Ext.data.Store({
root:'employee',
remoteSort:true,
proxy : new Ext.data.HttpProxy({
url: 'get.json',
method:'GET'

}),
reader:reader
});
var colModel = new Ext.grid.ColumnModel([
{header: "empid", width: 120, sortable: true, dataIndex: "empid"},
{header: "empname", width: 90, sortable: true, dataIndex: "empname"}
]);

var paging=new Ext.PagingToolbar({
pageSize:20,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"

});
var grid = new Ext.grid.GridPanel({ height:200,
title:'employee details',
width:600,
store:store,
cm: colModel,
bbar:paging,
remoteSort:true

});
store.load({params:{start:0,limit:20}});
grid.render(document.body);
});
</script>


let me know what could be the problem
i am a new bie to this extjs

brittongr
28 Mar 2011, 6:32 PM
Uhmmm... you said you are loading 10 record per page but in your code you have setup 20 records as page size in PagingToolbar and load 20 records in first load...

kirankumar1231
28 Mar 2011, 9:26 PM
even if it is 20 recs per page i could not get the next button to work

brittongr
28 Mar 2011, 10:05 PM
what are you returning as totalCount? What is the value of tha property?

brittongr
28 Mar 2011, 10:07 PM
If you post the params of the request and the response of the first request maybe i can help you...

kirankumar1231
28 Mar 2011, 10:10 PM
i am not using total count property

kirankumar1231
28 Mar 2011, 10:13 PM
this is my simple json structure

[{"empid":1231,"empname":"kiran kumar"}]

brittongr
28 Mar 2011, 10:17 PM
This is how i setup my store:



var dsEntity = new Ext.data.JsonStore(
{
url: url,
root: 'data',
totalProperty: 'totalCount',
id: idProperty,
fields: fields,
remoteSort: true,
sortInfo:
{
field: "FullName",
direction: "ASC"
}
});
The response looks like this:



{"success":true,"totalCount":20,"data":[{"AddressCountry":null,"AddressCountryId":null}]}So if you have 100 records in your database table you should have 5 pages at your paging toolbar. But with totalCount property paging could know how much records are in total.

kirankumar1231
28 Mar 2011, 10:20 PM
so i need to restructure my json object and put a total property and let the grid know what is the total count coming from the server?

brittongr
28 Mar 2011, 10:23 PM
Yes, because you are loading remote data, check at the response object that i returning, i updated what i posted so you can look the complete structure.

kirankumar1231
28 Mar 2011, 10:25 PM
i have restructured the json object changing my java program logic and now the data structure is like this


{"data":[{"empid":1231,"empname":"kiran kumar"}]}

i am very new to this extjs

no probs if i put a total property here
will it work fine??

kirankumar1231
28 Mar 2011, 10:32 PM
i have changed my json structure now i am getting an empty grid
values are not being populated now

kirankumar1231
28 Mar 2011, 10:37 PM
now this is the re structured json data coming from the server

{"total":1,"data":[{"empid":1231,"empname":"kiran kumar"},{"empid":1232,"empname":"kiran"},{"empid":1233,"empname":"kumar"}]}

now working

brittongr
28 Mar 2011, 10:42 PM
great! but remember total is used to know how much records you have... total >= currentLoadedRecords, you have 1 >= 3

kirankumar1231
28 Mar 2011, 11:04 PM
hey sorry
manually i have set the total value to 1 just to test my json structure
now after re structring my data like this
{"total":3,"data":[{"empid":1231,"empname":"kiran kumar"},{"empid":1232,"empname":"kiran"},{"empid":1233,"empname":"kumar"}]}
i am getting an empty grid

this is the code



Ext.onReady(function() {
Ext.QuickTips.init();
var reader=new Ext.data.JsonReader({
},[
{name: 'empid',mapping:'empid'},
{name: 'empname'}
]
);
var store=new Ext.data.Store({
root:'data',
totalProperty:'total',
remoteSort:true,
proxy : new Ext.data.HttpProxy({
url: 'get.json',
method:'GET'
}),
reader:reader
});
var colModel = new Ext.grid.ColumnModel([
{header: "empid", width: 120, sortable: true, dataIndex: "empid"},
{header: "empname", width: 90, sortable: true, dataIndex: "empname"}
]);

var paging=new Ext.PagingToolbar({
pageSize:1,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
});
var grid = new Ext.grid.GridPanel({ height:200,
title:'employee details',
width:600,
store:store,
cm: colModel,
bbar:paging,
remoteSort:true,
listeners:{
keyup:function(e1){
alert("clicked me");
var a=e1.getType();
alert(a);
}
}
});
store.load({params:{start:0,limit:1}});
grid.render(document.body);

this is the piece of java code



JSONArray mainarray=new JSONArray();
JSONObject root=new JSONObject();
JSONArray rootarray=new JSONArray();
int count=0;
while(empitr.hasNext()){
JSONObject jobj=new JSONObject();
Employee empl=new Employee();
empl=empitr.next();
jobj.put("empid",empl.getEmpid());
jobj.put("empname",empl.getEmpname());
mainarray.add(jobj);
count++;
}
root.put("total",count);
root.put("data",mainarray);