In ExtJs, remote data can be easily displayed in a paged grid. But for this to happen, the server side must support paging. Furthermore, local sorting and filtering in a paged grid is not useful, because it only filters the elements of the current page. In order to get consistent results, remote filtering and sorting is required. For buffered stores in infinite scrolling grids the same applies.
But this is not always the right solution. Especially when remote data retrieval takes some time, the user experience on filtering will degrade. Also we cannot use javascript functions to filter or sort.
A solution would be to have ExtJs reading all the data at once, and use that local copy of the data to filter and sort the data. We would the need a intermediate store for the whole dataset, and the main store linked to the grid to display the data. But this would require that the main proxy has the intermediate store as datasource, and as far as I understand, a proxy cannot have another store as datasource.
Does someone have an idea how to solve this issue ? I'm not sure if the sketched solution is viable, but what I need is somehow to reconcile having a remote .json datasource and using local paging, filtering and sorting.
How can I achieve this ?
While the title expresses the real concern ExtJs - paging and buffering grid based on remote data WITHOUT remote paging and filtering, but the details of the question is misleading.
In fact the working solution for this is : instead of using a buffered
store, use the Bufferedrenderer
.
BufferedRenderer
only affects the display, but does not affect the way the store works.
sync
hing the store with the server. A normal store that is displayed in a grid with BufferedRenderer has not these limitations.There is an excellent explanation of the BufferedRenderer on the Sencha Blog
Limitation: Only a infinite scrolling solution can be implemented with local sort and filter. Paging always (as far as I know) must be accomplished on the server. And remote paging also implies remote filtering and sorting.