PDA

View Full Version : paging with grid



Rajalakshmi_j
16 Jul 2009, 3:52 AM
HI,
am new to ext js.. i have a js with json data to be displayed in a grid.
following is my code. without pagination the code works fine. i have included json data from jsp. but when i include pagination the grid is not displayed.Please suggest me a way to get the right gird

here is my code

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:135,
bbar: new Ext.PagingToolbar ((
pageSize: 15,
store: ds,
displayInfo: true,
displayMsg: 'current show (0) - (1) record / (2) be a total of Record',
emptyMsg: "No topics to display"
))
));

grid.render ();

ds.load ((params: (start: 0, limit: 15)));
});

My jsp file

<%@ 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");
List v= new ArrayList();
v.add(p);
v.add(p1);
v.add(p2);




v.add(p3);

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>
where am i goin wrong

Stripeman
16 Jul 2009, 5:17 AM
Please edit your post and place all of it within
PHP tags