I'm using ExtJS 6.2, MemoryStore with Paging and trying to retrieve data from a remote source. The reason I'm using MemoryStore is that I'm using WebSocket for getting data out of the remote source. Let's say that I have 1000 records to show and I want to visualize 10 items per page. Things work when I want to visualize the first page with this callback from the WebSocket:
function (message) {
received_data = JSON.parse(message.data);
me.store.getProxy().setData(received_data.data);
me.store.loadPage(received_data.data.page);
To get it to work I had to set the data in the proxy instead of directly loading it into the store. When received_data.data.page is 1 everything is fine. received_data.data contains a JSON that looks like:
{limit: 10, page: 1, start: 0, total: 1000, items: Array(10)}
Problems arise when I switch to page 2. The received_data.data is now:
{limit: 20, page: 2, start: 10, total: 1000, items: Array(10)}
But the grid doesn't display anything. The paging toolbar show the 'No data to display' message and the store looks weird. What I mean is that it has no data.
store.getData() and store.getCount() returns no items and 0.
The workaround is to get from the server all the data till the last one I want to visualize and the show the last page. In case of page 2 I can get from the server the JSON:
{limit: 20, page: 2, start: 10, total: 1000, items: Array(20)}
That would work as expect but of course is not a viable solution since I wouldn't be taking advantage of the paging to just retrieve a small chunk of data instead of the whole dataset.
The thing is, I suspect it is related to how the Proxy is working. I.e., it calculates the actual data to put into the store using the page, start and limit parameters. Since I don't know enough about how it works under the hood I'm having hard time trying to have it to behave the way I want. So the question is: how do I force the Proxy to get the correct paged dataset to the Store?
I struggled for weeks. 10 minutes after I posted the question I found the solution myself, pffffff. The problem is essentially due to the start parameters. It always has to be 0 so I have to add extra parameters to the loadPage method when I want to reaload the store.
me.store.loadPage(received_data.data.page, {start: 0});
This does the trick for me.