PDA

View Full Version : PagingToolbar won't work



hermann.s
14 Oct 2013, 4:15 AM
I've tried several ways...

The following code displays the correct number of pages, however all the rows are displayed in the first page. Going to page 2 shows the same data.


var MyTaskStore = Ext.create('Ext.data.Store', {
model: 'MyTasks',
proxy:
{
type: 'ajax',
url: 'Task/GetMyTaskData',
reader:
{
type: 'json',
root: 'data'
},
actionMethods: {read: 'POST'}
},
pageSize: 10,
autoLoad: false,
});


MyTaskStore.load({
params:{
start:0,
limit: 10
}
});


Changing autoLoad to true and removing the manual load does the same.
Changing autoLoad to { start: 0, limit: 10 }... same.

The GridPanel initialization :

new Base.GridPanel({id: '@BFE.Frontend.MyTask.GridPanel.ID',
title: '@BFE.Frontend.MyTask.GridPanel.Title',
store: MyTaskStore,
columns: @Html.Raw(Model.MyTasksModel.GetColumnModel()),
margin: '5 5 0 5',
dockedItems:
[
{ xtype: 'toolbar',
dock: 'top',
items:
[
{ xtype: 'textfield', emptyText: 'Case ID', width: 90 },
{ xtype: 'button', text: 'Refresh Case' },
{ xtype: 'button', text: 'Refresh List' }
]
},
{ xtype: 'pagingtoolbar',
dock: 'bottom',
displayMsg: '{0} - {1} of {2}',
emptyMsg: 'No data to display',
store: MyTaskStore
}
]});

Farish
14 Oct 2013, 4:27 AM
the problem is most likely in your backend. when you call load, the store sends the start and limit parameters. now its upto the server to send back only the requested records based on these parameters and not all of them.

you can simply call store.loadPage(1); to load the first page and the start and limit are calculated automatically.

hermann.s
14 Oct 2013, 4:40 AM
So, is it not possible to retrieve all of the data from the server and then have it displayed in pages?
I am confused.

Farish
14 Oct 2013, 4:42 AM
all what the paging toolbar does is to send requests with start and limit parameters and the returned records are displayed in the grid. what is returned has to be determined by the backend.

i dont know if there are already some plugins for client side paging. may be you can search to see if there is already some solution. otherwise, you can implement it yourself.

PGalvin_DataStorSystems
20 Apr 2016, 5:10 AM
I can see that this is an old question on the forum but its exactly the problem I am getting.

I understand from the answers so far that I have to code my service to handle the start and limit parameters passed each time the service is called but I have a further problem...

The trouble I am having is that my service expects other parameters - a table ID number, a start date and an end date. These form the basis of the SQL query returning data to the service which in turn is returned to the ExtJS application.
When I initially load a page (store.load(1,{params...} ) the 3 parameters are being passed to the service as expected.
However upon clicking next page etc on the pagingtoolbar these parameters are not passed through. Only the start and limit are being passed.

I need my 3 parameters to pass also. This is because the data returned is dependant on these parameters.
Once I can resolve this issue I can then amend the SQL query to apply the start and limit parameters to the query in addition to the date range and Table ID.

Just to make life a bit more stressful I am coding using Sencha architect (v 3.2.0.75).

Can anybody help??