2

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 ?

Lorenz Meyer
  • 19,166
  • 22
  • 75
  • 121
  • Having same requirement,I tried with store's proxy type memory and 'enablePaging' flag set to true.Pagination toolbar is active as I am passing 'totalCount' from the remote.json.Issue is no. of records displayed on page are many.I mean it is not taking the pageSize. – Dev Jan 29 '14 at 06:22
  • @Damon Are you able to filter and sort with your solution ? – Lorenz Meyer Jan 29 '14 at 13:07
  • :Local sorting is working without pagination.Still stuck with the pagination issue(Total records being displayed on the first page).Not sure how sorting will behave incase of pagination. – Dev Jan 29 '14 at 13:14

6 Answers6

2

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.

Lorenz Meyer
  • 19,166
  • 22
  • 75
  • 121
1

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.

existdissolve
  • 3,104
  • 1
  • 16
  • 12
  • With Ext.Ajax you mean using the MemoryProxy, do you ? – Lorenz Meyer Jan 29 '14 at 05:22
  • Are there other benefits on a remote-aware store than the ability of update and insert ? – Lorenz Meyer Jan 29 '14 at 05:23
  • Well, the biggest benefit of using remote data is that it can be real time if there are updates/additions to the data outside of your application. If the data is retrieved once for the life of the application and stored locally, you can obviously only get updates by explicitly requesting it, or reloading the app. With a remote data store, of course, you don't have to deal with that issue since the data you retrieve is (presumably) the latest representation of the data that's available. – existdissolve Jan 29 '14 at 14:16
1

@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.

user3247727
  • 174
  • 1
  • 7
  • OK, I see what you mean. I will have a closer look at it. – Lorenz Meyer Jan 29 '14 at 14:03
  • As of ExtJs 4.2.2, this has been merged into the regular MemoryProxy, citation of the source code: 'Ext.ux.data.PagingMemoryProxy functionality has been merged into Ext.data.proxy.Memory by using the enablePaging flag.' – Lorenz Meyer Feb 06 '14 at 16:58
1

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.

user3247727
  • 174
  • 1
  • 7
1

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

Pratik Patel
  • 1,305
  • 1
  • 17
  • 44
0

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

user3247727
  • 174
  • 1
  • 7