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

一笑奈何 提交于 2019-12-11 02:56:43

问题


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 ?


回答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.




回答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.




回答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.




回答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.




回答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




回答6:


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



来源:https://stackoverflow.com/questions/21422041/extjs-paging-and-buffering-grid-based-on-remote-data-without-remote-paging-and

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!