PDA

View Full Version : Local Grid Paging



tlegault
25 Nov 2013, 6:30 AM
I am trying to enable paging in a Grid that uses a store that loads all data in a single server side request.

How can this be done?

My server side call is very fast, but I do not want all the data rendered in a single page in the browser.

Is there a way to wrap a store into a paging store?

scottmartin
25 Nov 2013, 1:44 PM
Paging is handled by remote data by sending only the records that you want to see on that page. It does not filter the data to show only the desired records for that page. If you want to send all of the data, then you would have to use a arrayStore and then set the pageSize and the proxy as follows:



var store = Ext.create('Ext.data.ArrayStore', {
fields: ['field', ... ],
data: [] // your data
pageSize: 10,
proxy: {
type: 'memory',
enablePaging: true, // replaces PagingMemoryProxy functionality
reader: {
type: 'json',
root: 'items'
}
}
});

tlegault
26 Nov 2013, 6:02 AM
Actually, I have found how to achieve what I want without relying on the remote server for paging.

Essentially, when the first request is sent out to the store, I cache the parsed model objects. For subsequent releases, I clone the result set from the cached one, then re-apply all the filters, paging, etc in the getSubResultSet method.

For the above store Rest proxy to work, you need to make sure this property is set on the store remoteSort : true. So the framework thinks its hitting the server for each page, but in reality this paging proxy uses the cached response to load subsequent pages.


Ext.define( 'Thomas.utils.LDPERestProxy', {
extend : 'Ext.data.proxy.Rest',


loaded : false,


fullResultSet : null,


buildRequest : function( operation )
{
var request = this.callParent( arguments );

return request;
},


doRequest : function( operation, callback, scope )
{
// Check if data already loaded
if ( this.loaded )
{
this.getSubResultSet( operation, callback, scope );
return;
}


this.callParent( arguments );
},


processResponse : function( success, operation, request, response, callback, scope )
{
var reader, result;


if ( success === true )
{
reader = this.getReader( );


// Apply defaults to incoming data only for read operations.
// For create and update, there will already be a client-side record
// to match with which will contain any defaulted in values.
reader.applyDefaults = operation.action === 'read';


result = reader.read( this.extractResponseData( response ) );


if ( result.success !== false )
{
// see comment in buildRequest for why we include the response
// object here
Ext.apply( operation,
{
response : response,
resultSet : result
} );


operation.commitRecords( result.records );
operation.setCompleted( );
operation.setSuccessful( );
this.fullResultSet = this.cloneResultSet( operation.resultSet );
this.loaded = true;
}
else
{
operation.setException( result.message );
this.fireEvent( 'exception', this, response, operation );
}
}
else
{
this.setException( operation, response );
this.fireEvent( 'exception', this, response, operation );
}


// this callback is the one that was passed to the 'read' or 'write'
// function above
/*
* if (typeof callback == 'function') { callback.call(scope || me,
* operation); }
*/
this.getSubResultSet( operation, callback, scope );


this.afterRequest( request, success );
},


read : function( operation, callback, scope )
{
if ( this.loaded )
{
this.getSubResultSet( operation, callback, scope );
return;
}
this.callParent( arguments );
},


getSubResultSet : function( operation, callback, scope )
{
//alert( "get sub " + operation.limit );
var resultSet = this.cloneResultSet( this.fullResultSet );
operation.resultSet = resultSet;
var records = resultSet.records;
var sorters = operation.sorters;
var groupers = operation.groupers;
var filters = operation.filters;


operation.setCompleted( );


// Apply filters, sorters, and start/limit options
if ( resultSet.success )
{


// Filter the resulting array of records
if ( filters && filters.length )
{
records = resultSet.records = Ext.Array.filter( records, Ext.util.Filter.createFilterFn( filters ) );
resultSet.total = records.length;
}


// Remotely, groupers just mean top priority sorters
if ( groupers && groupers.length )
{
// Must concat so as not to mutate passed sorters array which
// could be the items property of the sorters collection
sorters = sorters ? sorters.concat( groupers ) : sorters;
}


// Sort by the specified groupers and sorters
if ( sorters && sorters.length )
{
resultSet.records = Ext.Array.sort( records, Ext.util.Sortable.createComparator( sorters ) );
}


// Reader reads the whole passed data object.
// If successful and we were given a start and limit, slice the
// result.
if ( operation.start !== undefined && operation.limit !== undefined )
{
// Attempt to read past end of memory dataset - convert to
// failure
if ( operation.start >= resultSet.total )
{
resultSet.success = false;
resultSet.count = 0;
resultSet.records =
[];
}
// Range is valid, slice it up.
else
{
resultSet.records = Ext.Array.slice( resultSet.records, operation.start, operation.start + operation.limit );
resultSet.count = resultSet.records.length;
}
}
}


if ( resultSet.success )
{
operation.setSuccessful( );
}
else
{
this.fireEvent( 'exception', me, null, operation );
}
Ext.callback( callback, scope || me,
[
operation
] );
},


cloneResultSet : function( resultSet )
{
var config =
{
records : Ext.Array.clone( resultSet.records ),
count : resultSet.count,
loaded : resultSet.loaded,
success : resultSet.success,
total : resultSet.total
};


return new Ext.data.ResultSet( config );
}
} );

aasshishpatil
10 Mar 2016, 4:07 AM
@Scott Martin when i am applying enablePaging: true, this property paging is working fine but when i am applying filtes to columns paging toolbar is not updating according to filtered data Look on this URL https://fiddle.sencha.com/#fiddle/16v1

spoonfedw3b
13 Jul 2016, 11:47 AM
When trying to implement this, I'm receiving "Uncaught TypeError: operation.commitRecords is not a function". Any ideas?

narasam
24 Aug 2016, 12:59 AM
Hi tlegault (https://www.sencha.com/forum/member.php?646471-tlegault) ,
I have the requirement of pagination at client side and used your code posted above,but not able to bind with my store so records are not gettimg populated to web page and getting error as below
Uncaught TypeError: undefined is not a function

please help
give details about the store component and binding with above file named LDPERestProxy

narasam
24 Aug 2016, 1:08 AM
hey did you get any solution for this problem as am facing the same thing and no idea what needs to be done