ExtJs - paging and buffering grid based on remote data WITHOUT remote paging and filtering

Question

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 ?

Answer 1

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.

• Local sorting and ordering While a buffered store does not allow for local sorting and ordering, this solution does not put a limit on local sorting and ordering.
• Editing: Buffered store do not support insert rows or synching 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.

Answer 2

If you don't need any subsequent integration with the server (e.g., adding records, editing records, etc), you could always load the store with data retrieved from a regular Ext.Ajax.request(). Once you've loaded up your store with the retrieved data, then the local filtering/sorting would definitely work.

However, I would suggest not abandoning the server-side so quickly. Have you looked into any caching solutions or other options that might optimize performance? While the handoff-data approach you've outlined will work, it does so at the expense of the other benefits that a remote-aware store and proxy can bring in the way of data management.

Answer 3

@Lorenz: use http://docs.sencha.com/extjs/4.2.0/source/PagingMemoryProxy.html#Ext-ux-data-PagingMemoryProxy and set your remote data in the proxy eg. store.getProxy.data = //json data and load store using store.load, ext-4.2.1.883\examples\locale\multi-lang might serve a good example.

Answer 4

http://www.sencha.com/forum/showthread.php?262388-Ext.ux.data.PagingStore-updated-for-Ext-JS-4&p=1026287

This thread has helped me a lot for having an implementation for local sorting, filtering along with pagination.

you can make it cofigurable to load data from server whenever required. by deleting lastOptions before store load.

Answer 5

The question is not quite clear. But I think you want to load all the data from remote server and you want local filtering and paging. This should be possible with the extension pagingMemoryProxy. http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.ux.data.PagingMemoryProxy

Check this example for the same.

Demo http://demo.mysamplecode.com/ExtJs/pages/memoryPaging.jsp code http://www.mysamplecode.com/2011/12/extjs-pagingmemoryproxy-ajax-json-data.html

Answer 6

With Ext.Ajax and memory proxy pagination doesn't seems to working in 4.2.1 when you load store using loadRawData