PagingToolbar & Local Data

[Cliff]

// Portion of Ext.onReady() ---->>>>
var storeMorphProfile = new Ext.data.JsonStore({
id: 'storeLexAnalMorphID',
autoLoad: false,
fields: ['person', 'first', 'second', 'third']
});

var pgTBar = new Ext.PagingToolbar({
id: 'pgTBarLexAnalMorphID',
pageSize: 4,
store: storeMorphProfile
});

var colLexAnalMorph = new Ext.grid.ColumnModel({
defaults: {
align:'left',
editable: false,
menuDisabled: true,
resizable: true,
sortable: false
},
columns: [
{dataIndex:'person', id:'person', header:"Person"},
{dataIndex:'first', id:'first', header:"1st"},
{dataIndex:'second', id:'second', header:"2nd"},
{dataIndex:'third', id:'third', header:"3rd"}
]
});

var gridLexAnalMorph = new Ext.grid.GridPanel({
id: 'gridLexAnalMorphID',
autoHeight: true,
autoWidth: true,
autoScroll: false,
bbar: pgTBar,
border: false,
colModel: colLexAnalMorph,
columnLines: true,
enableColumnMove: false,
enableColumnResize: true,
layout: 'fit',
store: storeMorphProfile,
stripeRows: true,
viewConfig: {
scrollOffset:0,
forceFit:true
}
});

This is a simple paging requirement, but I can't figure out how to use the PagingToolbar to implement it. The catch is that all the data is contained locally. I keep this local data in an array of POJSOs which I build dynamically. Each array element will render in one grid row. The full array will contain 4-24 elements, so there's not much data. The data will always be displayed in blocks of 4 rows. These objects display just fine when I pass the array to store.load(), but they ALL display. We want 4 at a time, not all.

The PagingToolbar renders properly as configured above. However, an attempt to click the Next button results in the following JS error in FireBug: "this.proxy is undefined".

I want to call my own handler and not some URL or proxy. My handler will need only to know the start param. A filter on the store, passing a subset of array elements to the store.load() call, etc. That won't be the hard part.

How do I redirect the Ext handlers on the paging buttons? If I were to use Ext.override(pgTBar, {myFN() here}), which function(s) should I override? Do I implement a specific event listener for this? What is this PagingMemoryProxy that I see referenced by my Google searches? Is there a best way to handle this? Any suggestions?

[Cliff]

The problem here was to page through data which is contained in local memory space, as opposed to getting each new page from a server. It took too long, but I solved this requirement primarily by writing a beforechange handler.

// The following occurs in onReady()-type processing ------------>>>
/**
* Handler for the beforechange event on the PagingToolbar. This replaces the default behavior of PagingToolbar
* by calling an internal function to load the grid page, and then reset the visual controls and variables.
* @param thisPTBar Reference to the PagingToolbar which this supports.
* @param o Contains two params:
* start: Starting array index of the array of all data from which to get data
* to display for the new paging action.
* limit: Number of rows per page.
* @return This must always return false to avert the default call to load() (in Ext) on the store.
*/
var onPgTBarBeforeChange = function(thisPTBar, o){
// My own function which calls store.loadData() with the data set that I set up ...
currentLexAnalPages.doMorphProfileGridPageLoad(o.start);

// The following mimics the onLoad() function in Ext.PagingToolbar ...
var status = thisPTBar.getPageData();
var newPage = (o.start == 0)?1:((o.start / thisPTBar.pageSize)+1);
this.cursor = (newPage == 1)?0:o.start;
this.inputItem.setValue(newPage);
this.first.setDisabled(newPage == 1);
this.prev.setDisabled(newPage == 1);
this.next.setDisabled(newPage == status.pages);
this.last.setDisabled(newPage == status.pages);
// Always return false to prevent the store.load() call in the Ext code ...
return false;
};

var storeMorphProfile = new Ext.data.JsonStore({
id: 'storeLexAnalMorphID',
autoLoad: false,
fields: ['person', 'first', 'second', 'third'],
root: 'currentMorphProfilePage',
successProperty: 'success',
totalProperty: 'allRowCount'
});

var pgTBar = new Ext.PagingToolbar({
id: 'pgTBarLexAnalMorphID',
pageSize: morphProfileRowForms.length, // This array length is always 4
items: [txtLexAnalMorph],
listeners:{
render: onPgTBarRender,
beforechange: onPgTBarBeforeChange
},
store: storeMorphProfile
});

The JSON object structure prepared for the store.loadData() call is in the code-block below. The full set of data is stored in objects {whose fields are ['person', 'first', 'second', 'third']} that get set into allMorphProfileRows[]. The four elements per page from this array are then copied into currentMorphProfilePage[] right before the call to store.loadData(). This occurs in doMorphProfileGridPageLoad() (not included here), as called from the beforechange handler defined above. This mimics paging from local data.


// Build the object for the JSON reader ...
var morphProfileJson = {
success:true,
allRowCount:(morphProfileCount * this.morphProfileRowForms.length),
currentMorphProfilePage: [],
allMorphProfileRows: [],
stem: []
};

[Condor]

For local paging I recommend my PagingStore user extension (with an patch PagingToolbar that also support local filtering and insert/update/deletes).