grid paging current page

[singh.guru]

hello guys,

i am implementing the grid paging with GroupingStore

what my objective is to get the following

when the user clicks on the next button, my code should fetch the next set of records from the server.

but i am not getting the current page,which i can pass in my query
here is the code





var store = new Ext.data.GroupingStore({
reader: reader,
//autoLoad: true,
url: 'http://localhost/ext/examples/grid/data.asp?pgno='+ parseInt(CurrentPage +1),
sortInfo:{field: 'company', direction: "ASC"},
groupField:'industry'
});

grid4 = new xg.GridPanel({
id:'button-grid',
store: store,
columns: [
sm2,
{id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 20, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney},
{header: "Industry", width: 20, sortable: true, dataIndex: 'industry'},
{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],

sm: sm2,
view: new Ext.grid.GroupingView({
forceFit:true,
startCollapsed:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: 'Displaying stones {0} - {1} of {2}',
emptyMsg: "<b>No Stones to Display</b>" ,
listeners: {
beforechange: function (paging, params) {
console.debug(paging)
console.debug(params)
CurrentPage = params.activePage;
console.debug(CurrentPage)
}
}

}),
columnLines: true,
// inline buttons
buttons: [
{text:'Add to Cart',tooltip:'Add a new row',iconCls:'add',handler: AddToCart},
{text:'Add to hold list',tooltip:'',iconCls:'option',handler: AddToHoldList}
],
buttonAlign:'left',
// inline toolbars
tbar:[
{text:'Add to Cart', tooltip:'Add a new row', iconCls:'add', handler: AddToCart},
'-',
{text:'Add to hold list', tooltip:'', iconCls:'option',handler: AddToHoldList},
'-',
{text:'Remove Selection',tooltip:'Remove the selected item',iconCls:'remove',ref: '../removeButton',handler: RemoveFromList, disabled: true}
],

width:1250,
height:450,
frame:true,
loadMask: true,
layout:'fit',
//title:'Support for standard Panel features such as framing, buttons and toolbars',
iconCls:'icon-grid',
renderTo: 'grid-Panel'
});



please advice, what i am missing

thx

[pllee]

Your going to want your store to look like this:
var store = new Ext.data.GroupingStore({
reader: reader,
//autoLoad: true,
url: 'http://localhost/ext/examples/grid/data.asp',
params :{'pgno' :1},
sortInfo:{field: 'company', direction: "ASC"},
groupField:'industry'
});

The before change function could look like this.


beforechange: function (paging, params) {
var CurrentPage = params.activePage;
this.store.load(params : {'pgno' : CurrentPage});
}

[singh.guru]

Thx for pointer...

i am able too resolve the issue, now i need to implement the data on the server.. i will let you know when i am done

here is my code



var CurrentPage =1;
var store = new Ext.data.GroupingStore({
reader: reader,
autoLoad: {params:{start: 0, limit: 25}},
url: 'http://localhost/ext/examples/grid/data.asp',
//params :{start:0, limit:20, pgno :1},
sortInfo:{field: 'company', direction: "ASC"},
groupField:'industry'
});
store.setBaseParam('pgno',CurrentPage);



my paging bar
// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
prependButtons: true,
displayInfo: true,
displayMsg: 'Displaying stones {0} - {1} of {2}',
emptyMsg: "<b>No Stones to Display</b>" ,
listeners: {
beforechange: function (paging, params) {
CurrentPage = Math.ceil((paging.cursor + paging.pageSize) / paging.pageSize);
CurrentPage = (CurrentPage+1);
this.store.setBaseParam('pgno',CurrentPage);
}
}

}),