DirectStore and server-side paging

[elishnevsky]

How to implement server-side paging in a GridPanel using DirectStore? start and limit parameters are not passed to the server with direct request. Am I missing something?

Here's my extension:

Ext.ux.AuthorsGrid = Ext.extend(Ext.grid.GridPanel, {

initComponent: function() {
var ds = new Ext.data.DirectStore({
directFn: Pubs.GetAuthors,
paramsAsHash: false,
root: 'authors',
idProperty: 'au_id',
totalProperty: 'total',
sortInfo: {
field: 'au_id',
direction: 'ASC'
},
fields: [
'au_id', 'au_lname', 'au_fname', 'phone', 'address', 'city', 'state', 'zip',
{name: 'contract', type: 'boolean'}
]
});

var pager = new Ext.PagingToolbar({
store: ds,
displayInfo: true,
pageSize: 10
});

var config = {
store: ds,
columns: [
{header: 'ID', dataIndex: 'au_id'},
{header: 'First Name', dataIndex: 'au_fname'},
{header: 'Last Name', dataIndex: 'au_lname'},
{header: 'Phone', dataIndex: 'phone'},
{header: 'Address', dataIndex: 'address'},
{header: 'City', dataIndex: 'city'},
{header: 'State', dataIndex: 'state'},
{header: 'Zip', dataIndex: 'zip'}
],
bbar: pager
};
Ext.apply(this, Ext.apply(this.initialConfig, config));

Ext.ux.AuthorsGrid.superclass.initComponent.apply(this, arguments);
},

afterRender: function() {
this.getStore().load();

Ext.ux.AuthorsGrid.superclass.afterRender.apply(this, arguments);
}
});

Ext.reg('authorsgrid', Ext.ux.AuthorsGrid);

[aconran]

PagingToolbar will pass the params as defined in paramNames of the PagingToolbar.

Since you have paramsAsHash set to false; you will need to specify an order of the arguments which are going to be passed to your function such as:


paramOrder: 'start|limit'


What does your server-side method signature look like? Could you post a capture of the POST for both the initial load and after you click on the paging toolbar?

[elishnevsky]

PagingToolbar will pass the params as defined in paramNames of the PagingToolbar.

Since you have paramsAsHash set to false; you will need to specify an order of the arguments which are going to be passed to your function such as:


paramOrder: 'start|limit'


What does your server-side method signature look like? Could you post a capture of the POST for both the initial load and after you click on the paging toolbar?

My server-side signature was wrong. I changed it to:

GetAuthors(int start, int limit)
and it works fine now.

And of course paramOrder need to be specified.

BTW, not having paramOrder and setting paramsAsHash to false causes a serious problem in RC2. Too much recursion. Just FYI.

I will test against SVN on the weekend.

Thanks a lot for help!

[elishnevsky]

And of course I had to change the way initial load is done:


afterRender: function() {
this.getStore().load({
params: {
start: 0,
limit: 10
}
});

Ext.ux.AuthorsGrid.superclass.afterRender.apply(this, arguments);
}

[j.bruni]

This thread helped me on this:
http://extjs.com/forum/showthread.php?p=348304

I had a hard time to pass an extra parameter to do Updates...

I found no way to add a "table" parameter when using autoSave... even using the "beforewrite" event...

DataProxy#doRequest puts the "idProperty"'s value and the modified record's data as the two parameters to the update request... ignores baseParams... and do not add any other parameter to the remote function call... it ignores paramOrder and paramsAsHash...

My workaround was to turn autoSave off (to avoid recursion) and manually add the extra parameter as a field in the record set, in the EditorGrid#afterEdit event.

This field was created only for sending the extra parameter... it is "fictional", meaning that it does not exist in the remote database.



onAfteredit: function( e ) {
var table = this.baseParams.table;
e.record.set( 'pmea_table', table );
this.save();
}


Anyway... I am happy that somehow I could send my third parameter to the remote update function! :)

Thanks!

[anishanc]

Thanks, it is working to me also
but what is the return object from server means data + total number of records ?

[chandanmahajan]

Hi All,

I have one question over here.

for paging, we need to have data in the following format.
{ "success": true, "results": 2000, "rows": [ // *Note: this must be an Array { "id": 1, "name": "Bill", "occupation": "Gardener" }, { "id": 2, "name": "Ben", "occupation": "Horticulturalist" }, ... { "id": 25, "name": "Sue", "occupation": "Botanist" } ] Can anybody please let me know how success property is handled. Can we make property to show any custom error message? Also how should we handled pagination in case of server API failure.