PDA

View Full Version : Grid paging problem



nickweavers
22 Feb 2010, 2:31 PM
I have a form that contains a 'selector' grid that can populate form fields in a fieldsets on the form with values from a databse, and which also loads data into a number of larger grids shown in tabs in a tabPanel at the bottom of the form. I am having trouble figuring out how to get the paging toolbar for those grids to page and refresh properly though.

The code can be seen here with line numbers: http://gist.github.com/311558

The layout can be seen in the attached image.

The bottom grids load from a json store which needs to pass a filter whose value is held in form field 'id_event' that is only known when a selection is made in the selector grid (top left in image). The initial loading isn't a problem since I can use the rowselect event from the selector grid to trigger it and this can be done after everything is initialised tight at the end (line 360) .

How do I get the paging to work though? I foolishly tried to get the form field value when configuring the timesheetStore on line 171 using

id_event: worksheetForm.getForm().findField('id_event').getValue() (not sure if that is even the right way to do the query) but of course worksheetForm doesn't exist until later in the script.

Any help appreciated,
TIA Nick.

tobiu
22 Feb 2010, 3:39 PM
hi nickweavers,

though the tutorial is quite old (1.x), it has some points which way to go:

http://www.extjs.com/learn/Tutorial:Basics_of_Paging_With_the_Grid_Component

the paging toolbar uses the params start and limit.

sorry, no time to look into your code atm.


kind regards,
tobiu

nickweavers
23 Feb 2010, 2:03 AM
Many thanks tobiu. The link you pointed looked like a good clue and seems to be showing how you could create the paging toolbar object separately from the grid after the main form panel is defined, then dynamically glue the paging toolbar to the grid, using references to fields in the form to supply filters to the remote store at run time.

Is that correct?

I tried to code it, but I can't make it work yet.

Yes I'm sorry the code posted was so large and agree it was enough to deter anyone from helping. I'll make a note to avoid doing that again :)

Regards,
Nick

tobiu
23 Feb 2010, 2:35 AM
hi nickweavers,

no problem, i am just a bit short in time. the tutorial is ok for getting ideas how it works, for an implementation the example is better:

http://www.extjs.com/deploy/dev/examples/grid/paging.html (demo)
http://www.extjs.com/deploy/dev/examples/grid/paging.js (code)



var store = new Ext.data.JsonStore({...});

var grid = new Ext.grid.GridPanel({
store : store
...
// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store
})
});

store.load({params:{start:0, limit:25}});


so, you can put it directly in the toolbar of the grid.


kind regards,
tobiu

nickweavers
23 Feb 2010, 3:32 AM
tobiu,

Thanks again.

I am okay with the explicit myStore.load({params:{start:0, limit:5}}); part. What I need to be able to do is control the way the pagingToolbar does the built-in events that take care of nextpage, prevpage, pagen and refresh, since I need to dynamically add a parm to the stores baseParm's which is only known at runtime and not during the store's config.

Any idea's ?

tobiu
23 Feb 2010, 3:37 AM
since the pagingToolbar only gets a reference to the store of the grid, it is no problem to add further params to the store (grid-filtering + paging is a good example). the paging-bar only sends start and limit to the server.


kind regards,
tobiu

nickweavers
23 Feb 2010, 1:30 PM
tobiu, the ExtJS API for the setBaseParam() store method says:

baseParams : Object
An object containing properties which are to be sent as parameters for every HTTP request.
Parameters are encoded as standard HTTP parameters using Ext.urlEncode.

This seems to work:


var timesheetStore = new Ext.data.JsonStore({
url: 'index.php',
baseParams: {
option: 'com_opsuk-backoffice',
view: 'worksheets',
layout: 'timesheetRecords',
format: 'raw'
},
totalProperty:'totalCount',
root: 'rows',
remoteSort: true,
fields: timesheetFields
});
... code for grid and formPanel snipped ...
timesheetStore.on('beforeLoad', function(store, records, options) {
var id_event = worksheetForm.getForm().findField('id_event').getValue();
this.setBaseParam('id_event',worksheetForm.getForm().findField('id_event').getValue());
});

Thanks for your help,
Nick.