EXT JS: the Paging Toolbar and Live Data

Let’s add the code needed for invoking and creating the PagingToolbar to the underlying page first of all. Open the gridExample.html file in your text editor and change the Ext.grid.GridPanel constructor function in the final <script> block so that it appears as follows:

//define the grid

var grid = new Ext.grid.GridPanel({

el:"productGrid",

width:700,

height:500,

title:"Products",

store:dataStore,

cm:cm,

loadMask:true,

bbar: new Ext.PagingToolbar({

store:dataStore,

displayInfo:true,

displayMessage:"Displaying Products {0} - {1} of {2}"

})

});

The bbar property of the GridPanel allows us to specify properties for a toolbar that is appended to the bottom of the grid. In this example we’re using the PagingToolbar control, but we could instead provide our own paging template or a simple row of buttons (EXT-JS Buttons of course) instead.

We’ve used only three of the many available PagingToolbar properties; the store property is mandatory and ties the toolbar to a data store, namely the JsonStore we created in part two of this tutorial. The displayInfo property enables a kind of inline status bar which gives the visitor information about the current and total records in the grid.

We can configure our own custom message to be displayed in the status bar using the displayMessage property. The string we supply to this property has built-in tokenization, which allows us to specify simple tokens ({0}, {1} etc) which represent information from the store. The following screen shot shows how the pagination bar should appear:

As you can see, the toolbar has correctly determined the number of pages required to hold all of our data, and shows the correct number of records. By default, the paging toolbar displays the data in pages of 20 records; however the grid is still displaying all 37 records from the store. This is because the PagingToolbar works directly with the backend logic rather than the local data store. In the same way that the GridPanel passes parameters to the server when remoteSorting is enabled, the PagingToolbar passes parameters to the server to only request data in specific blocks at a time.

We also need to add one more property to the configuration object for the JsonStore object so that it knows what the total number of records in the MySQL database is, as during the initial request we’re only going to be passing back a subset of the data. Change the Ext.data.JsonStore constructor so that it appears thus:

var dataStore = new Ext.data.JsonStore({

url:'productSearch_part3.php',

root:'products',

fields:['title', 'image', 'inStock', 'price', 'category', 'manufacturer'],

remoteSort:true,

totalProperty:'total'

});

The new property that we’ve configured is the totalProperty, which is mapped to the total property in our JSON object. There isn’t a total property in the JSON object yet, but don’t worry, there will be once we have adjusted the PHP(which we’re going to do next).