PDA

View Full Version : Paging in grid



sathishkumar4
22 Jun 2009, 6:11 PM
Hi,
I'm trying to do paging in Gridpanel,It's displaying all the values in the same page,page size is growing but all the values were displayed in the firstpage,Please suggest me how to do it.


Ext.onReady(function() {
var myPageSize = 5;
var startRow;
var endRow;
var names = Ext.data.Record.create([
{
name: 'firstName'
},
{
name: 'lastName'
}]);
var myReader = new Ext.data.JsonReader({
totalProperty: "results",
root: "rows",
},
names);
var JsonStore = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: 'AjaxResponse.jsp',
reader: myReader,
root: 'rows',
totalProperty: 'results',
id: 'id',
fields: ['firstName', 'lastName'],
// view: new Ext.grid.GroupingView()
}),
});
// JsonStore.load();
// render it
// grid.render();
// trigger the data store load
// JsonStore.load({params:{start:0, limit:5}});
var pagingBar = new Ext.PagingToolbar({
pageSize: 5,
store: JsonStore,
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();
}
}] */
});
// create the Grid
var grid = new Ext.grid.GridPanel({
store: JsonStore,
columns: [
//{id:'id'},
{
header: "FirstName",
width: 75
},
{
header: "LastName",
width: 75
}
],
viewConfig: {
forceFit: true,
enableRowBody: true,
showPreview: true,
/* getRowClass : function(record, rowIndex, p, JsonStore){
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: pagingBar,
height: 250,
width: 350,
});
var combo = new Ext.form.ComboBox({
store: JsonStore,
displayField: 'firstName',
fieldLabel: 'Names',
typeAhead: true,
mode: 'remote',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select...',
selectOnFocus: true,
width: 150,
});
var userform = new Ext.form.FormPanel({
renderTo: document.body,
frame: true,
title: 'UserRegistration',
width: 450,
items: [{
xtype: 'textfield',
id: 'firstName',
fieldLabel: 'firstName',
name: 'firstName',
allowBlank: false,
width: 150,
},
{
xtype: 'textfield',
id: 'lastName',
fieldLabel: 'lastName',
name: 'lastName',
allowBlank: false,
width: 150,
},
combo, grid,
],
buttons: [{
text: 'submit',
handler: callAjax
},
{
text: 'cancel',
handler: callAjax
}]
});
// render it
grid.render();
// trigger the data store load
JsonStore.load({
params: {
start: 0,
limit: 5
}
});
//JsonStore.loadData(0,5);
});
callAjax = function() {
var firstName = Ext.fly("firstName").getValue();
var lastName = Ext.fly("lastName").getValue();
Ext.Ajax.request({
url: 'AjaxResponse.jsp',
params: {
firstName: firstName,
lastName: lastName,
myPageSize: 5,
},
success: function(res, request) {
// JsonStore.load();
Ext.MessageBox.alert('Success', res.responseText);
},
failure: function(res, request) {
Ext.MessageBox.alert('Failure', res.responseText);
},
});
}

evant
22 Jun 2009, 7:44 PM
Please search the forum before posting, this question has been asked so many times.

umarkashmiri
22 Jun 2009, 11:08 PM
Hi,
I'm trying to do paging in Gridpanel,It's displaying all the values in the same page,page size is growing but all the values were displayed in the firstpage,Please suggest me how to do it.


Ext.onReady(function() {
var myPageSize = 5;
var startRow;
var endRow;
var names = Ext.data.Record.create([
{
name: 'firstName'
},
{
name: 'lastName'
}]);
var myReader = new Ext.data.JsonReader({
totalProperty: "results",
root: "rows",
},
names);
var JsonStore = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: 'AjaxResponse.jsp',
reader: myReader,
root: 'rows',
totalProperty: 'results',
id: 'id',
fields: ['firstName', 'lastName'],
// view: new Ext.grid.GroupingView()
}),
});
// JsonStore.load();
// render it
// grid.render();
// trigger the data store load
// JsonStore.load({params:{start:0, limit:5}});
var pagingBar = new Ext.PagingToolbar({
pageSize: 5,
store: JsonStore,
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();
}
}] */
});
// create the Grid
var grid = new Ext.grid.GridPanel({
store: JsonStore,
columns: [
//{id:'id'},
{
header: "FirstName",
width: 75
},
{
header: "LastName",
width: 75
}
],
viewConfig: {
forceFit: true,
enableRowBody: true,
showPreview: true,
/* getRowClass : function(record, rowIndex, p, JsonStore){
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: pagingBar,
height: 250,
width: 350,
});
var combo = new Ext.form.ComboBox({
store: JsonStore,
displayField: 'firstName',
fieldLabel: 'Names',
typeAhead: true,
mode: 'remote',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select...',
selectOnFocus: true,
width: 150,
});
var userform = new Ext.form.FormPanel({
renderTo: document.body,
frame: true,
title: 'UserRegistration',
width: 450,
items: [{
xtype: 'textfield',
id: 'firstName',
fieldLabel: 'firstName',
name: 'firstName',
allowBlank: false,
width: 150,
},
{
xtype: 'textfield',
id: 'lastName',
fieldLabel: 'lastName',
name: 'lastName',
allowBlank: false,
width: 150,
},
combo, grid,
],
buttons: [{
text: 'submit',
handler: callAjax
},
{
text: 'cancel',
handler: callAjax
}]
});
// render it
grid.render();
// trigger the data store load
JsonStore.load({
params: {
start: 0,
limit: 5
}
});
//JsonStore.loadData(0,5);
});
callAjax = function() {
var firstName = Ext.fly("firstName").getValue();
var lastName = Ext.fly("lastName").getValue();
Ext.Ajax.request({
url: 'AjaxResponse.jsp',
params: {
firstName: firstName,
lastName: lastName,
myPageSize: 5,
},
success: function(res, request) {
// JsonStore.load();
Ext.MessageBox.alert('Success', res.responseText);
},
failure: function(res, request) {
Ext.MessageBox.alert('Failure', res.responseText);
},
});
}


Yes Evant is right

see you have hard coded limit. get it from pagging tool bar...

Condor
23 Jun 2009, 3:24 AM
Is your server even processing the start and limit parameters or is it just returning all records?

ps. If you don't want server paging you could consider local paging (see PagingStore).