View Full Version : Grid Paging mechanism

31 May 2012, 6:49 AM
Please correct me if I'm wrong :
we configure the grid (precisely the store) to receive exactly the number of records that will show (pageSize), for instance if we want to show 10 records, so the page size in the store will be 10. in this case the server side response should have 10 records (json for example).

But how can I tell the grid that the numbre of records is much higher ?

Tim Toady
31 May 2012, 7:47 AM
You mean the total number of records that can be paged? Just send back the totalProperty with your response.


1 Jun 2012, 7:09 AM
Thanks, your post help me

1 Jun 2012, 9:07 AM
So I may have a configuration issue, but I haven't been able to get this to work for me. I'm trying to request grid rows using a Direct Api and display them in a paging grid. I have my totalProperty set, but can't seem to get the "totalCount" attribute of my store to update. Any help would be greatly appreciated.

Setting "totalCount" manually works, i.e.:

store.on('load', function() {
console.log('in load listener');
this.totalCount = 308
}, store);

Full code below:

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'extjs/examples/ux');

Ext.onReady(function() {
/* REMOTING_API is generated by loading /api.spec with a HTTP GET */

Ext.define('Contact', {
extend: 'Ext.data.Model',
fields: [{name:'id',type:'int'}, 'name', 'address', 'state'],
idProperty: 'id'

var page_size = 50
var store = Ext.create('Ext.data.Store', {
// store configs
id: 'store',
//autoLoad: true,
autoSync: true,
//autoDestroy: true,
model: 'Contact',
remoteSort: true,
proxy: {
type: 'direct',
api: {
create: ContactsAPI.create,
read: ContactsAPI.read,
update: ContactsAPI.update,
destroy: ContactsAPI.destroy
reader: Ext.create('Ext.data.JsonReader', {
//type: 'json',
idProperty: 'id',
totalProperty: 'total',
root: 'result'
simpleSortMode: true
sorters: [{
property: 'name',
direction: 'ASC'

store.on('load', function() {
console.log('in load listener');
//this.totalCount = 308
}, store);

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false

var alphaSpaceTest = /^[-\sa-zA-Z]+$/;

Ext.apply(Ext.form.field.VTypes, {
// vtype validation function
alphaSpace: function(val, field) {
return alphaSpaceTest.test(val);
alphaSpaceText: 'Not a valid state. Must not contain numbers.',
alphaSpaceMask: /^[-\sa-zA-Z]+$/

// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
height: 450,
width: 700,
cls: 'grid',
title: 'Velociraptor Owners',
store: store,
verticalScroller: {
xtype: 'paginggridscroller'
columns: [{
dataIndex: 'id',
width: 50,
text: 'ID'
}, {
dataIndex: 'name',
flex: 1,
text: 'Name',
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false
}, {
dataIndex: 'address',
flex: 1.3,
text: 'Address',
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false
}, {
dataIndex: 'state',
flex: 0.8,
text: 'State',
allowBlank: false,
field: {
type: 'textfield',
allowBlank: false,
vtype: 'alphaSpace'
renderTo: Ext.getBody(),
plugins: [
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
'-', {
iconCls: 'add',
text: 'Add',
handler: function() {
// create a blank record from Contact
var record = Ext.create('Contact');
//insert at top
store.insert(0, record);
//edit at row 0
rowEditing.startEdit(0, 0);
}, {
iconCls: 'delete',
text: 'Delete',
handler: function() {
var sm = grid.getSelectionModel();
title:'Delete Record?',
msg: 'You are deleting a record permanently, this cannot be undone. Proceed?',
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION,
fn: function(btn){
if(btn === 'yes') {

grid.on('edit', function(e) {

// trigger the data store load



Here's an example server response:

{"action": "ContactsAPI", "result": [{"state": "IL", "address": "6928 S King Dr", "id": 1, "name": "Erica Harris"}, {"state": "IL", "address": "540 N Harding", "id": 2, "name": "Alexis Powell"}, {"state": "IL", "address": "4728 W Monroe", "id": 3, "name": "Amilee Potts"}, {"state": "IL", "address": "659 W Division 7a", "id": 4, "name": "Eugene Green"}, {"state": "IL", "address": "3944 W Ontroia", "id": 5, "name": "Andriana Meeks"}, {"state": "IL", "address": "942 N Lavergne", "id": 6, "name": "Angel Wynn"}, {"state": "IL", "address": "305 W Scott", "id": 7, "name": "Anthony Fisher"}, {"state": "IL", "address": "1306 S Central Park", "id": 8, "name": "Antoine Brewer"}, {"state": "IL", "address": "209 N Lamon", "id": 9, "name": "Ariel Watson"}, {"state": "IL", "address": "1111 N Dearborn", "id": 10, "name": "Arnez Harper"}, {"state": "IL", "address": "2717 W Hirsch", "id": 11, "name": "Barbara Jackson"}, {"state": "IL", "address": "909 N Mohawk st", "id": 12, "name": "Briana Saunders"}, {"state": "IL", "address": "637 W Elm St", "id": 13, "name": "Brianna Croom"}, {"state": "IL", "address": "520 N Iowa", "id": 14, "name": "Briniya Cooper"}, {"state": "IL", "address": "4222 W Augusta", "id": 15, "name": "Chania Davis"}, {"state": "IL", "address": "4513 S Laporte", "id": 16, "name": "Charles Patterson"}, {"state": "IL", "address": "1309 W Grenshaw", "id": 17, "name": "Checree Fitch"}, {"state": "IL", "address": "1111 N Dearborn", "id": 18, "name": "Clarissa Harper"}, {"state": "IL", "address": "4018 W Monrow", "id": 19, "name": "Darnetta Polk"}, {"state": "IL", "address": "", "id": 20, "name": "Demethrice West"}, {"state": "IL", "address": "1301 N Cleveland", "id": 21, "name": "Ikayla Gregory"}, {"state": "IL", "address": "3434 W Belden", "id": 22, "name": "Denzirah Rogers"}, {"state": "IL", "address": "826 N Cambridge", "id": 23, "name": "Deonte Mailey"}, {"state": "IL", "address": "737 S Kenneth", "id": 24, "name": "Derrick Mayfield"}, {"state": "IL", "address": "7051 W Adams", "id": 25, "name": "Desire Morgan"}, {"state": "IL", "address": "6920 S Claremont", "id": 26, "name": "Devonte Hodge"}, {"state": "IL", "address": "1006 W Ainslie", "id": 27, "name": "Devonte Daniels"}, {"state": "IL", "address": "424 W Sullivan", "id": 28, "name": "Dominique Dale"}, {"state": "IL", "address": "1311 N Halsted", "id": 29, "name": "Janae Williams"}, {"state": "IL", "address": "4836 W Race", "id": 30, "name": "Ethan Johnson"}, {"state": "IL", "address": "838 N Cleveland", "id": 31, "name": "Roneisha Harris"}, {"state": "IL", "address": "5436 S Woodlawn", "id": 32, "name": "Felipe Hincapie"}, {"state": "IL", "address": "842 N Cleveland", "id": 33, "name": "Huell Collier"}, {"state": "IL", "address": "3501 W Hirsch", "id": 34, "name": "Ishmael Thomas"}, {"state": "IL", "address": "853 N Waller", "id": 35, "name": "Jakahri Grooms"}, {"state": "IL", "address": "3832 W Filmore", "id": 36, "name": "Jameson Parker"}, {"state": "IL", "address": "1334 W VanBuren", "id": 37, "name": "Sherry Robinson"}, {"state": "IL", "address": "3448 W Fulton", "id": 38, "name": "Jarvis Buchanan"}, {"state": "IL", "address": "1646 S Harding", "id": 39, "name": "Jason Henderson"}, {"state": "IL", "address": "1311 W Halsted", "id": 40, "name": "Jawon Boclair"}, {"state": "IL", "address": "504 W Ellen", "id": 41, "name": "Jermaine Davis"}, {"state": "IL", "address": "3824 S Vincennes", "id": 42, "name": "Jerry Nesbitt"}, {"state": "IL", "address": "504 W Ellen", "id": 43, "name": "Ahki Allen"}, {"state": "IL", "address": "412 W Chicago", "id": 44, "name": "Jonthan Evans"}, {"state": "IL", "address": "3320 W Adams", "id": 45, "name": "Jordan Thompson"}, {"state": "IL", "address": "591 N Leclaire", "id": 46, "name": "Jovan Brown"}, {"state": "IL", "address": "4222 W Augusta", "id": 47, "name": "Junicia Cammon"}, {"state": "IL", "address": "4022 S Federal 1", "id": 48, "name": "Kanesha Moffett"}, {"state": "IL", "address": "1336 N Lorel", "id": 49, "name": "Kareem Prince"}, {"state": "IL", "address": "834 S Kildare", "id": 50, "name": "Andre Williams"}], "tid": 1, "total": 308, "type": "rpc", "method": "read"}