PDA

View Full Version : Help! Using Paging toolbar in a grid Panel



Sapan
9 Jun 2011, 1:33 AM
Hi All,
I an new to ext JS. The scenario is I am fetching data from database in a java file then I am sending the data to .jsp file where I am writing Ext JS code. I am displaying data to a grid Panel allowing Paging toolbar facility. In the following code I have provided dummy data. Problem is I want to display 4 records per page but it is showing all records in the same Page

Here is my code-


var myData = {"totalCount":"7",
"topics":
[{"title":"A","threadid":"1","username":"x","userid":"2","dateline":"1","postid":"6","forumtitle":"E","forumid":"4","replycount":"2","lastpost":"1","lastposter":"x","excerpt":"H"},
{"title":"h?","threadid":"3","username":"i","userid":"1","dateline":"1","postid":"33","forumtitle":".x","forumid":"0","replycount":"5","lastpost":"6","lastposter":"r","excerpt":"ok."},
{"title":"S","threadid":"2","username":"D","userid":"9","dateline":"3","postid":"0","forumtitle":"gs","forumid":"41","replycount":"0","lastpost":"1305857168","lastposter":"z","excerpt":"Ext"},
{"title":"UXML","threadid":"4","username":"c","userid":"3","dateline":"4","postid":"5","forumtitle":":Help","forumid":"40","replycount":"0","lastpost":"30","lastposter":"8","excerpt":"T"},
{"title":"O.","threadid":"9","username":"r","userid":"6","dateline":"34","postid":"14","forumtitle":"n","forumid":"68","replycount":"0","lastpost":"134","lastposter":"wa0","excerpt":"W"},
{"title":"XML","threadid":"12","username":"8","userid":"7","dateline":"30","postid":"65","forumtitle":"Help","forumid":"1","replycount":"0","lastpost":"170","lastposter":"cnn", "excerpt":"T"},
{"title":"send","threadid":"0","username":"_08","userid":"23","dateline":"3","postid":"53","forumtitle":"p","forumid":"30","replycount":"0","lastpost":"70","lastposter":"cay8","excerpt":"T"} ]}

var store = new Ext.data.Store ({
remoteSort : true,
autoLoad : { params:
{start:0, limit:2}
},
reader : new Ext.data.JsonReader({
root : 'topics',
totalProperty : 'totalCount',
idProperty : 'threadid',
fields: [
'title', 'forumtitle', 'forumid', 'author',
{name: 'replycount', type: 'int'},
{name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
'lastposter', 'excerpt'
]
})
});

store.loadData(myData);

var grid = new Ext.grid.GridPanel({
renderTo : Ext.getBody(),
width : 700,
height : 500,
frame : true,
title : 'Available Sources',
trackMouseOver : false,
autoExpandColumn : 'topic',
store : store,

columns: [new Ext.grid.RowNumberer({width: 30}),{
id : 'topic',
header : "Date",
dataIndex : 'title',
width : 420,
//renderer : renderTopic,
sortable : true
},{
header : "Type",
dataIndex : 'replycount',
width : 70,
align : 'right',
sortable : true
},{
id : 'last',
header : "Description",
dataIndex : 'lastpost',
width : 150,
//renderer : renderLast,
sortable : true
}],

bbar: new Ext.PagingToolbar({
store : store,
pageSize : 2,
displayInfo : true
}),

});