True to my promise over the years, anytime it takes me significant mental and time resources to discover how to accomplish a development task that I think others might find useful, I will share the process.

I’ve got an app in which users need access to a dataset that is larger than 10k records. Pagination to the rescue (plus a search feature which I covered in my Replacing data in Sencha ExtJS grid store article).  I’m giving the users the option of paging through the results 100 at a time if they so wish.

It ended up being simple to accomplish after scouring through the documentation and looking at related articles throughout the Web.

First you need to have a script that returns sets of 100 results. In my case, I have a ColdFusion Component that does a CFQUERY on the table. I simply pass in the number from which I want to start my resultset and it returns the next 100 rows. Convert your query to a JSON string using serializeJSON() in ColdFusion, or any method you wish.

Next, I created a ColdFusion page that accepts a start parameter – which is sent from the PagingBar object in ExtJS – and passes that along to the CFC. The resulting JSON string simply gets output.

<cfsetting enablecfoutputonly="true">

<cfparam default="" name="start">

<cfscript>
providers = application.widget.framework.getBean('Insurance').listInsurance(startRecord=start);
writeOutput(insurers);
</cfscript>

<cfsetting enablecfoutputonly="false">

Next, create a Store object with this page as its proxy, and a JsonReader to parse the results.

var Insurer = Ext.data.Record.create([
       {name: 'col1', type: 'int'},
       {name: 'col2', type: 'string'},
       {name: 'col3', type: 'string'},
       {name: 'col4', type: 'int'}
]);

var InsurerStore = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({url: 'liveQueries/insurance.cfm'}),
    reader: new Ext.data.JsonReader({ root: 'data', totalProperty:'totalRecords' }, Insurer)
});

Now you can create your PagingBar object with the Store object you created as its datastore.

var PagingBar = new Ext.PagingToolbar({
    pageSize: 100,
    store: InsurerStore,
    displayInfo: true,
    displayMsg: 'Displaying topics {0} - {1} of {2}',
    emptyMsg: 'No insurers to display'
});

Lastly, attach your PagingBar to a DataGrid object with the bbar property. You also have the option of performing an initial search to show the first 100 record to the user by default. To do this, just call the load() event on your Store (shown below).

var InsurerGrid = new Ext.grid.GridPanel({
   store             : InsurerStore,
   sm                : new Ext.grid.RowSelectionModel({singleSelect:true}),
   cm                : InsurerColumnModel,
   renderTo          : 'insurer-grid',
   frame             : true,
   bbar              : PagingBar
});

InsurerStore.load({params:{start:0, limit:100}});