PDA

View Full Version : memory proxy with paging not displayed properly



Rajalakshmi_j
20 Jul 2009, 12:56 AM
Hi all
am trying to do paging by loading data from memory proxy.. i have my json data loaded from jsp file.
the problem here is the grid properly gets loaded with data. but paging doesn't work properly. for example if i give the paging limit as 15 and i have 23 records, but the entire data gets loaded regardless of the limit display message in paging bar 1-23 of 23 and also when we move to the next page same data gets loaded but display message showing 21-43 of 43. but i have onli 23 records.
can somebody help me out.
here is my js file

Ext.onReady(function() {
ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(evtReportsGridData),
reader: new Ext.data.JsonReader(
{
root: 'EventLevelReportDetails'
},
[
//{name: 'documentTypeId', type: 'int',mapping: 'documentTypeId'},
//{name: 'selectedReport', type: 'bool',mapping: 'selectedReport'},
{name: 'documentTypeDesc', mapping: 'documentTypeDesc'},
{name: 'documentStatus',mapping: 'documentStatus'},
//{name: 'fileName',mapping: 'fileName'},
//{name: 'fileLocation',mapping: 'fileLocation'}

])
});

colModel = new Ext.grid.ColumnModel([
{
header: "<input type='checkbox' name='evtReport' onclick='checkAllEvtReports(this)'/>",
width: 4,
sortable: false,
resizable: false,
dataIndex: 'selectedReport',
renderer: function(data) {
if(data){
return "<input type='checkbox' name='selectedReport' "+
"onclick='updateChkBoxSelection(this)' checked /> ";
}else{
return "<input type='checkbox' name='selectedReport' "+
"onclick='updateChkBoxSelection(this)' /> ";
}
}
},
{
header: "Report Name",
width: 60,
sortable: true,
resizable: true,
dataIndex: 'documentTypeDesc'
},

{
header: "Status",
width: 30,
sortable: true,
resizable: true,
dataIndex: 'documentStatus',
renderer:function(data){

if(null!= data && ""!=data && data == 'Available') {
return "<a href='#' onclick='showReport()'>" + data + "</a>";
}
else {
return data;
}

}
}
]);

grid = new Ext.grid.GridPanel({
ds: ds,
cm: colModel,
loadMask:true,
renderTo: 'hello',
width:835,
height:300,
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store){
if(this.showPreview){
p.body = '<p>'+record.data.excerpt+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},

// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize:15,
store: ds,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', {
pressed: true,
enableToggle:true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
})
});

// render it
grid.render('hello');

// trigger the data store load
ds.load({params:{start:0, limit:15}});


});

and my jsp file is

<!-- Include Ext and app-specific scripts: -->
<script type="text/javascript" src="C:/Documents and Settings/radhika_c02/Desktop/ext-2.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="C:/Documents and Settings/radhika_c02/Desktop/ext-2.2.1/ext-all-debug.js"></script>
<script type="text/javascript" src="ExtStart.js"></script>

<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="C:/Documents and Settings/radhika_c02/Desktop/ext-2.2.1/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="ExtStart.css">
<body>
<h1>HIIIIIIII</h1>
<%
person p = new person();
p.setDocumentStatus("available");
p.setDocumentTypeDesc("doc1");
person p1 = new person();
p1.setDocumentStatus("N.A");
p1.setDocumentTypeDesc("doc2");
person p2 = new person();
p2.setDocumentStatus("available");
p2.setDocumentTypeDesc("doc3");
person p3 = new person();
p3.setDocumentStatus("available");
p3.setDocumentTypeDesc("doc4");
person p4 = new person();
p4.setDocumentStatus("N.A");
p4.setDocumentTypeDesc("doc5");
person p8 = new person();
p8.setDocumentStatus("available");
p8.setDocumentTypeDesc("doc6");
person p9 = new person();
p9.setDocumentStatus("available");
p9.setDocumentTypeDesc("doc7");
person p10 = new person();
p10.setDocumentStatus("available");
p9.setDocumentTypeDesc("doc8");
person p11 = new person();
p11.setDocumentStatus("na");
p11.setDocumentTypeDesc("doc9");
person p12= new person();
p12.setDocumentStatus("available");
p12.setDocumentTypeDesc("doc10");
person p13= new person();
p13.setDocumentStatus("na");
p13.setDocumentTypeDesc("doc11");
person p14 = new person();
p14.setDocumentStatus("available");
p14.setDocumentTypeDesc("doc12");


person p15 = new person();
p15.setDocumentStatus("N.A");
p15.setDocumentTypeDesc("doc13");
person p16 = new person();
p16.setDocumentStatus("available");
p16.setDocumentTypeDesc("doc14");
person p17 = new person();
p17.setDocumentStatus("available");
p17.setDocumentTypeDesc("doc15");
person p18 = new person();
p18.setDocumentStatus("available");
p18.setDocumentTypeDesc("doc16");
person p19 = new person();
p19 .setDocumentStatus("na");
p19 .setDocumentTypeDesc("doc17");
person p20= new person();
p20.setDocumentStatus("available");
p20.setDocumentTypeDesc("doc18");
person p21= new person();
p21.setDocumentStatus("na");
p21.setDocumentTypeDesc("doc19");
person p22 = new person();
p22.setDocumentStatus("available");
p22.setDocumentTypeDesc("doc20");
person p23 = new person();
p23.setDocumentStatus("available");
p23.setDocumentTypeDesc("doc21");
person p24 = new person();
p24.setDocumentStatus("available");
p24.setDocumentTypeDesc("doc22");
person p25 = new person();
p25.setDocumentStatus("available");
p25.setDocumentTypeDesc("doc23");




List v= new ArrayList();
v.add(p);
v.add(p1);
v.add(p2);

v.add(p3);
v.add(p4);
v.add(p8);
v.add(p9);
v.add(p10);
v.add(p11);
v.add(p12);
v.add(p13);
v.add(p14);
v.add(p15);
v.add(p16);
v.add(p17);
v.add(p18);
v.add(p19);
v.add(p20);
v.add(p21);
v.add(p22);
v.add(p23);
v.add(p24);
v.add(p25);
JSONObject eventLevelReportsGridData = new JSONObject();
JSON iEvtReportsRows = JSONSerializer.toJSON(v);

eventLevelReportsGridData.put("EventLevelReportDetails",iEvtReportsRows);

%>
<script>
<%/*Grid Data starts*/%>
var evtReportsGridData = <%=eventLevelReportsGridData%>;

<%/*Grid Data ends*/%>

</script>

<div id="hello">



</div>
</body>
</html>

i have been breaking my head for this simple paging for the past two days :((

Condor
20 Jul 2009, 1:01 AM
Use a PagingStore (http://extjs.com/forum/showthread.php?t=71532) with a data config option!

mystix
20 Jul 2009, 1:40 AM
to the OP: please learn how to post properly-formatted code in
tags:
http://extjs.com/forum/misc.php?do=bbcode#code

Rajalakshmi_j
20 Jul 2009, 8:08 PM
i replaced it like this


ds = new Ext.ux.data.JsonPagingStore({
data: evtReportsGridData,
lastOptions : {params:{start: 0,limit: 5}},
root: 'EventLevelReportDetails',
id: 'id',
// totalRecords : 5,
successProperty: 'success',
[
//{name: 'documentTypeId', type: 'int',mapping: 'documentTypeId'},
//{name: 'selectedReport', type: 'bool',mapping: 'selectedReport'},
{name: 'documentTypeDesc', mapping: 'documentTypeDesc'},
{name: 'documentStatus',mapping: 'documentStatus'},
//{name: 'fileName',mapping: 'fileName'},
//{name: 'fileLocation',mapping: 'fileLocation'}

])
//autoLoad: {params: {start: 0, limit: 10}}

});
but now the data is not at all gettin loaded..
wat am i missin here??
is this wat i have done correct??

Condor
20 Jul 2009, 9:41 PM
Aren't you missing the 'fields' config option?

ds = new Ext.ux.data.JsonPagingStore({
data: evtReportsGridData,
lastOptions : {params:{start: 0,limit: 5}},
root: 'EventLevelReportDetails',
id: 'id',
successProperty: 'success',
fields: [
{name: 'documentTypeDesc', mapping: 'documentTypeDesc'},
{name: 'documentStatus',mapping: 'documentStatus'}
]
});
(I don't know your data, but I assume you configured your reader correctly?)

Rajalakshmi_j
20 Jul 2009, 9:55 PM
I included the fields config option.. but still no data in the page. the full code of my script is

Ext.onReady(function() {
ds = new Ext.ux.data.JsonPagingStore({
data: evtReportsGridData,
lastOptions : {params:{start: 0,limit: 5}},
root: 'EventLevelReportDetails',
id: 'id',
successProperty: 'success',
fields: [
{name: 'documentTypeDesc', mapping: 'documentTypeDesc'},
{name: 'documentStatus',mapping: 'documentStatus'}
]
});

colModel = new Ext.grid.ColumnModel([
{
header: "<input type='checkbox' name='evtReport' onclick='checkAllEvtReports(this)'/>",
width: 4,
sortable: false,
resizable: false,
dataIndex: 'selectedReport',
renderer: function(data) {
if(data){
return "<input type='checkbox' name='selectedReport' "+
"onclick='updateChkBoxSelection(this)' checked /> ";
}else{
return "<input type='checkbox' name='selectedReport' "+
"onclick='updateChkBoxSelection(this)' /> ";
}
}
},
{
header: "Report Name",
width: 60,
sortable: true,
resizable: true,
dataIndex: 'documentTypeDesc'
},

{
header: "Status",
width: 30,
sortable: true,
resizable: true,
dataIndex: 'documentStatus',
renderer:function(data){

if(null!= data && ""!=data && data == 'Available') {
return "<a href='#' onclick='showReport()'>" + data + "</a>";
}
else {
return data;
}

}
}
]);

grid = new Ext.grid.GridPanel({
ds: ds,
cm: colModel,
loadMask:true,
renderTo: 'hello',
width:835,
height:300,
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store){
if(this.showPreview){
p.body = '<p>'+record.data.excerpt+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},

// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize:15,
store: ds,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', {
pressed: true,
enableToggle:true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
})
});

// render it
grid.render('hello');
ds.load();
// trigger the data store load
// ds.load({params:{start:0, limit:5}});


});and data loaded from my jsp is


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@page import="net.sf.json.JSONObject"%>
<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%@page import="net.sf.json.JSONSerializer"%>
<%@page import="sss.person"%>

<%@page import="net.sf.json.JSON"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hello</title>
</head>
<!-- Include Ext and app-specific scripts: -->
<script type="text/javascript" src="C:/Documents and Settings/radhika_c02/Desktop/ext-2.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="C:/Documents and Settings/radhika_c02/Desktop/ext-2.2.1/ext-all-debug.js"></script>
<script type="text/javascript" src="ExtStart.js"></script>

<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="C:/Documents and Settings/radhika_c02/Desktop/ext-2.2.1/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="ExtStart.css">
<body>
<h1>HIIIIIIII</h1>
<%
person p = new person();
p.setDocumentStatus("available");
p.setDocumentTypeDesc("doc1");
person p1 = new person();
p1.setDocumentStatus("N.A");
p1.setDocumentTypeDesc("doc2");
person p2 = new person();
p2.setDocumentStatus("available");
p2.setDocumentTypeDesc("doc3");
person p3 = new person();
p3.setDocumentStatus("available");
p3.setDocumentTypeDesc("doc4");
person p4 = new person();
p4.setDocumentStatus("N.A");
p4.setDocumentTypeDesc("doc5");
person p8 = new person();
p8.setDocumentStatus("available");
p8.setDocumentTypeDesc("doc6");
person p9 = new person();
p9.setDocumentStatus("available");
p9.setDocumentTypeDesc("doc7");
person p10 = new person();
p10.setDocumentStatus("available");
p9.setDocumentTypeDesc("doc8");
person p11 = new person();
p11.setDocumentStatus("na");
p11.setDocumentTypeDesc("doc9");
person p12= new person();
p12.setDocumentStatus("available");
p12.setDocumentTypeDesc("doc10");
person p13= new person();
p13.setDocumentStatus("na");
p13.setDocumentTypeDesc("doc11");
person p14 = new person();
p14.setDocumentStatus("available");
p14.setDocumentTypeDesc("doc12");


person p15 = new person();
p15.setDocumentStatus("N.A");
p15.setDocumentTypeDesc("doc13");
person p16 = new person();
p16.setDocumentStatus("available");
p16.setDocumentTypeDesc("doc14");
person p17 = new person();
p17.setDocumentStatus("available");
p17.setDocumentTypeDesc("doc15");
person p18 = new person();
p18.setDocumentStatus("available");
p18.setDocumentTypeDesc("doc16");
person p19 = new person();
p19 .setDocumentStatus("na");
p19 .setDocumentTypeDesc("doc17");
person p20= new person();
p20.setDocumentStatus("available");
p20.setDocumentTypeDesc("doc18");
person p21= new person();
p21.setDocumentStatus("na");
p21.setDocumentTypeDesc("doc19");
person p22 = new person();
p22.setDocumentStatus("available");
p22.setDocumentTypeDesc("doc20");
person p23 = new person();
p23.setDocumentStatus("available");
p23.setDocumentTypeDesc("doc21");
person p24 = new person();
p24.setDocumentStatus("available");
p24.setDocumentTypeDesc("doc22");
person p25 = new person();
p25.setDocumentStatus("available");
p25.setDocumentTypeDesc("doc23");




List v= new ArrayList();
v.add(p);
v.add(p1);
v.add(p2);

v.add(p3);
v.add(p4);
v.add(p8);
v.add(p9);
v.add(p10);
v.add(p11);
v.add(p12);
v.add(p13);
v.add(p14);
v.add(p15);
v.add(p16);
v.add(p17);
v.add(p18);
v.add(p19);
v.add(p20);
v.add(p21);
v.add(p22);
v.add(p23);
v.add(p24);
v.add(p25);
JSONObject eventLevelReportsGridData = new JSONObject();
JSON iEvtReportsRows = JSONSerializer.toJSON(v);

eventLevelReportsGridData.put("EventLevelReportDetails",iEvtReportsRows);

%>
<script>
<%/*Grid Data starts*/%>
var evtReportsGridData = <%=eventLevelReportsGridData%>;

<%/*Grid Data ends*/%>

</script>

<div id="hello">



</div>
</body>
</html>i really cant understand why it doesnot work

Condor
20 Jul 2009, 10:45 PM
I am a J2EE programmer, but I am not going to read through your .jsp and try to figure out what kind of JSON it is creating.

Why not post the actual JSON data the .jsp is creating (copy&paste using Firebug)?

Rajalakshmi_j
20 Jul 2009, 11:26 PM
here is my json data loading in jsp


person p = new person();
p.setDocumentStatus("available");
p.setDocumentTypeDesc("doc1");
List v= new ArrayList();
v.add(p);
JSONObject eventLevelReportsGridData = new JSONObject();
JSON iEvtReportsRows = JSONSerializer.toJSON(v);

eventLevelReportsGridData.put("EventLevelReportDetails",iEvtReportsRows);
<script>
<%/*Grid Data starts*/%>
var evtReportsGridData = <%=eventLevelReportsGridData%>;

<%/*Grid Data ends*/%>

</script>

Condor
20 Jul 2009, 11:29 PM
You didn't get my point: I want to know what <%=eventLevelReportsGridData%> actually returns.

Rajalakshmi_j
20 Jul 2009, 11:52 PM
when i give sysout in jsp for the eventLevelReportsGridData.toString
i get output in the console as


"EventLevelReportDetails":[{"documentTypeDesc":"doc1","documentStatus":"available"}]and when is give alert n see it returns me the following

[object,Object]

Condor
21 Jul 2009, 12:04 AM
"EventLevelReportDetails":[{"documentTypeDesc":"doc1","documentStatus":"available"}]

That's not valid JSON. Are you sure you posted the complete output (and didn't omit the {}-brackets)?

Assuming the data does have {}-brackets:
Your data doesn't have a successProperty or an id, so these config options should be removed from the reader.

What is the exact problem you are having after fixing the above issues?

Rajalakshmi_j
21 Jul 2009, 12:16 AM
sorry i missed out the braces while posting...
i had removed the id and successProperty. but i cannot still view the grid. a blank page is displayed with the grid.
do i have to give ds.load() again after the grid definition or givin it inside the reader is enough??

Condor
21 Jul 2009, 12:31 AM
Specifying 'data' in a store config will automatically load the store (that is why you need to specify the lastOptions in a PagingStore - so it won't show all records immediately).

What does store.getTotalCount() return in the load event of the store?

Rajalakshmi_j
21 Jul 2009, 8:11 PM
store.getTotalCount() returns 23 records.. am inserting 23 records onli

Condor
21 Jul 2009, 11:16 PM
Are you still loading the store:

ds.load();
(that's not required when you specify 'data')

Rajalakshmi_j
22 Jul 2009, 1:11 AM
i had removed ds.load at the end.. still grid is not displayed

Condor
22 Jul 2009, 1:46 AM
Can you post your current code (and please use [CODE] tags)?

Rajalakshmi_j
22 Jul 2009, 2:45 AM
here is my full code
JS

Ext.onReady(function() {
ds = new Ext.ux.data.JsonPagingStore({
data: evtReportsGridData,
lastOptions : {params:{start: 0,limit: 5}},
root: 'EventLevelReportDetails',

fields: [
{name: 'documentTypeDesc', mapping: 'documentTypeDesc'},
{name: 'documentStatus',mapping: 'documentStatus'}
]
});

colModel = new Ext.grid.ColumnModel([
{
header: "<input type='checkbox' name='evtReport' onclick='checkAllEvtReports(this)'/>",
width: 4,
sortable: false,
resizable: false,
dataIndex: 'selectedReport',
renderer: function(data) {
if(data){
return "<input type='checkbox' name='selectedReport' "+
"onclick='updateChkBoxSelection(this)' checked /> ";
}else{
return "<input type='checkbox' name='selectedReport' "+
"onclick='updateChkBoxSelection(this)' /> ";
}
}
},
{
header: "Report Name",
width: 60,
sortable: true,
resizable: true,
dataIndex: 'documentTypeDesc'
},

{
header: "Status",
width: 30,
sortable: true,
resizable: true,
dataIndex: 'documentStatus',
renderer:function(data){

if(null!= data && ""!=data && data == 'Available') {
return "<a href='#' onclick='showReport()'>" + data + "</a>";
}
else {
return data;
}

}
}
]);

grid = new Ext.grid.GridPanel({
ds: ds,
cm: colModel,
loadMask:true,
renderTo: 'hello',
width:835,
height:300,
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store){
if(this.showPreview){
p.body = '<p>'+record.data.excerpt+'</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},

// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize:15,
store: ds,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-', {
pressed: true,
enableToggle:true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
})
});

// render it
grid.render('hello');



});and my jsp part


JSONObject eventLevelReportsGridData = new JSONObject();
JSON iEvtReportsRows = JSONSerializer.toJSON(List<E>);

eventLevelReportsGridData.put("EventLevelReportDetails",iEvtReportsRows);
<script>
<%/*Grid Data starts*/%>
var evtReportsGridData = <%=eventLevelReportsGridData%>;


<%/*Grid Data ends*/%>

Condor
22 Jul 2009, 2:53 AM
1. Your limit (5) and pageSize (15) don't match.
2. Use either render or renderTo, but not both.
3. Did you check that evtReportsGridData has a value when you create the store?

Rajalakshmi_j
22 Jul 2009, 3:18 AM
oops a great blunder.. am using ext2.2. will the Ext.ux.data.PagingStore
work with it??

Condor
22 Jul 2009, 3:50 AM
There is a separate Ext 2.x version of PagingStore.