Grid paging via HTTPProxy does not work with Prototype Adapter

[extuser4711]

I tried to build a paged EditorGrid and took the examples for a start.
However I used the Prototype adapter instead of the YUI one.
I also used the HttpProxy store to receive data from the server.

The problem is, that the POST request to the server contains to parameters, which is why paging will never work.

Just by switching back to the YUI adapter everything now is working fine.
But still, something seems to be defect here.

[gkassyou]

I'm having the same issue. Can't get paging to work.

The paging params to the server when you click the next page button only sends the start and limit and not the rest of the params.

[damien]

I have the same problem. The pagingtoolbar displays the correct data. But the grid loads the complete datastore and not the number defined at the Pagesize parameter. I think that if you take the paging example from Jack and change de proxy into a Httpproxy the paging doesnt work anymore to. But in the comments frmo Jack it says the httpproxy is better in the example if the php file is on the same server.

[jack.slocum]

Can you post some code. Thanks.

[damien]

Hello Jack,
Here is the code that creates my grid.

var GridUI = function() {
var ds; //hold our data
var grid; //component
var columnModel; // definition of the columns


function setupDataSource() {
ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:/get_dealers.php'}),
reader: new Ext.data.JsonReader(
{root: 'records',totalProperty: '281', id: 'sleutel'},
[
{name: 'sleutel'},
{name: 'dealernr'},
{name: 'DA'},
{name: 'rayon'},
{name: 'b_naam'},
{name: 'b_adres'},
{name: 'b_postcode'}
]
)
}
);
}

function getColumnModel() {
if(!columnModel) {
columnModel = new Ext.grid.ColumnModel(
[{
header: "Dealer nr",
dataIndex: 'dealernr',
sortable: true,
width: 40
},{
header: "DA",
sortable: true,
dataIndex: 'DA',
width: 20
},{
header: "Rayon",
sortable: true,
dataIndex: 'rayon',
width: 20
},{
header: "Naam bedrijf",
sortable: true,
dataIndex: 'b_naam',
width: 150
},{
header: "Adres bedrijf",
sortable: true,
dataIndex: 'b_adres',
width: 150
},{
header: "Postcode bedrijf",
sortable: true,
dataIndex: 'b_postcode',
width: 150
}]
);
}
return columnModel;
}

function buildGrid() {
var grid = new Ext.grid.Grid(
'topic-grid',
{
ds: ds,
cm: getColumnModel(),
autoSizeColumns: false,
loadMask: true
}
);

innerLayout.add('center', new Ext.GridPanel(grid, {title: 'Dealers',autoScroll:false}));

grid.on("rowdblclick", function(grid) {
alert(grid.getSelectionModel().getSelected().data. b_naam);
});

grid.render();

var gridFoot = grid.getView().getFooterPanel(true);
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
});

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

return {
init : function() {
setupDataSource();
buildGrid();
}
}
}();
Ext.onReady(GridUI.init, GridUI, true);


Here is a part of the result from my php file. It gives json output:
{"records":[{"sleutel":"1","dealernr":"107800","DA":"D","rayon":"1","b_naam":"NEFKENS UTRECHT BV","b_adres":"ATOOMWEG 79","b_postcode":"3542AA"},{"sleutel":"2","dealernr":"107801","DA":"SV","rayon":"0","b_naam":"NEFKENS UTRECHT BV","b_adres":"ST. LAURENSDREEF 26","b_postcode":"3565AK"},{"sleutel":"3","dealernr":"107803","DA":"SV","rayon":"0","b_naam":"NEFKENS NIEUWEGEIN BV","b_adres":"AMBACHTSWEG 6","b_postcode":"3433PR"}]}

The result off this is a nice grid (i like ext).
My problem:
The grid displays all the 281 records from the datastore. The pagingtoolbar displays the correct data. It says page 1 of 12 ect. In the attachment screenshot from pagingtoolbar. I am new to ext, i hope i didnt make a mistake in my part off the code. Thank you for looking at my problem.

[Animal]

Here's part of your prob:


{root: 'records',totalProperty: '281', id: 'sleutel'},


What, you know there will always be 281 records?!

http://www.extjs.com/deploy/ext/docs/output/Ext.data.JsonReader.html#config-totalProperty

The reason why it gets the paging toolbar right is that your PHP script is ignoring the start and limit parameters and sending all 281 records out in one go.

In the absence of a valid totalProperty indicator, the Store uses the number of Records returned as its size. That is 281. But it also knows that you set the limit at 25, and so thinks there are more pages.

[damien]

Thank you for your reply. I solved the problem. I was thinking that the 'start' and 'limit' param from the datastore.load always had the same value start:0 and limit:25. I didnt understand that the ext was changing the values when i clicked on the next page button in the pagingtoolbar. Thank you for your time.