ExtJS grid panel not showing page number

Question

I'm using a ExtJS paging grid panel with ASP.NET MVC. Everything seems to work fine except that the grid does not show the page number. It only shows in the bottom tool bar page BLANK out of 3.

This is my store:

 Ext.define('EJ.store.Locations', {
     extend: 'Ext.data.Store',
     model: 'EJ.model.Location',
     autoLoad: {
         params: {
             start: 0,
             limit: 5
         }
     },
     pageSize: 5,
     remoteSort: true,
     proxy: {
         type: 'ajax',
         url: '/location/read',
         reader: {
             type: 'json',
             root: 'locations',
             totalProperty: 'totalLocations',
             successProperty: 'success'
         }
     }
 });

and this is my view:

Ext.define('EJ.view.location.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.locationlist',
    store: 'Locations',
    title: 'All locations',
    autoScroll: true,

    columns: [{
        text: 'Location Id',
        flex: 1,
        sortable: true,
        dataIndex: 'LocationId'
    }, {
        text: 'Name',
        flex: 1,
        sortable: true,
        dataIndex: 'Name'
    }],
    bbar: Ext.create('Ext.PagingToolbar', {
        pageSize: 5,
        store: 'Locations',
        displayInfo: true,
        displayMsg: 'Displaying Locations {0} - {1} of {2}',
        emptyMsg: "No topics to display"

    }),
});

score 1 · Answer 1 · answered Jan 03 '13 at 12:20

It looks like you define a store and grid and in the bbar config you instantiate a pagingtoolbar who doesn't know about a store because it isn't created yet.

try adding it with lazy loading (can also be the bbar config):

dockedItems: [{
    xtype: 'pagingtoolbar',
    dock: 'bottom',
    pageSize: 5, 
    store: 'Locations',   
    displayInfo: true,
    displayMsg: 'Displaying Locations {0} - {1} of {2}',
    emptyMsg: "No topics to display"
}],

ExtJS grid panel not showing page number

1 Answers1