Paging Toolbar not displaying number of records - Ext JS

Question

So I have the following code here that displays a grid with data from my store in a separate directory:

Ext.require([
    'Ext.ux.form.ItemSelector', 
    'Ext.grid.plugin.RowExpander', 
    'Ext.grid.*', 
    'Ext.data.*',  
    'Ext.selection.CheckboxModel',
    'Ext.toolbar.Paging',
]);

Ext.define('AM.view.metadata.List' ,{
    extend: 'Ext.grid.Panel',
    alias: 'widget.metadatalist',
    title: '<center>Results</center>',
    store: 'Metadata', 
    requires: ['Ext.ux.RowExpander'],   
    initComponent: function() {
        this.columns = [
            {header: 'Technical Name',  dataIndex: 'TECH_NAME', //...
            //...
        ];
        this.callParent(arguments); //Calls the parent method of the current method in order to override 
        
    },
    dockedItems: [
        {
        xtype: 'toolbar',
        dock: 'bottom',
        items: [
            { xtype: 'tbtext',  text: 'Loading...', id: 'recordNumberItem'  },
            '-',
            { text: 'Expand All', id: 'expand' },
            '-',
            { text: 'Collapse All', id: 'collapse' },
            '->',
                    //Paging ToolBar
            { xtype: 'pagingtoolbar', dock: 'bottom', store: 'Metadata', pageSize: 3, displayInfo: true, emptyMsg: 'No items to display',  displayMsg: 'Displaying topics {0} - {1} of {2}' },
            
            '->',
            { text: 'Print', itemId: 'print' },
            '-',
            { text: 'Export', itemId: 'export' }
        ]
    }],
    plugins: [{
            ptype: 'rowexpander',
            rowBodyTpl : [
                //...
                            //...
            ]
        }]
    
});

The paging toolbar shows no problem, but it does not show that there is any data loaded into it or even allow scrolling. There are currently 14 rows in my store. (Store loads no problem). I'm not using any proxies, should I be?

Here's my store. Metadata.js

var store = Ext.define('AM.store.Metadata', {
    extend: 'Ext.data.Store',
    model: 'AM.model.Metadata',
    storeId: 'metadatastore',
    data: [
        {TECH_NAME: 'SOME_NAME_A1',    KBE_ID: 'RS142', KBE_NAME: 'GL Account', VIEW_NAME: 'SECR_ERROR', DB_SCHEMA: 'EXCEL', PRIVACY_INDICATOR: 'Secure'},
        {TECH_NAME: 'OH_HAII',    KBE_ID: 'RS103', KBE_NAME: 'MC Account', VIEW_NAME: 'SECR_ERROR', DB_SCHEMA: 'SQL', PRIVACY_INDICATOR: 'Well'},
        {TECH_NAME: 'OTHER_NAME_A2', KBE_ID: 'RS142', KBE_NAME: 'Current Number of Shares', VIEW_NAME: 'EQTY_PSTN', DB_SCHEMA: 'SQL', PRIVACY_INDICATOR: 'Alright'},
        {TECH_NAME: 'NAMES_STILL_GOING_B3', KBE_ID: 'W001', KBE_NAME: 'Amount for Unrealized Loss or Profit', VIEW_NAME: 'EQTY_PSTN', DB_SCHEMA: 'NO_SQL', PRIVACY_INDICATOR: 'Could be better'},
        {TECH_NAME: 'WILL_THEY_END_C4', KBE_ID: 'W003', KBE_NAME: 'Fund ID', VIEW_NAME: 'EQTY_DEAL', DB_SCHEMA: 'SQL', PRIVACY_INDICATOR: 'Ummm', schema: 'Schema 4'},
        {TECH_NAME: 'NOT_LIKELY-C5', KBE_ID: 'E101', KBE_NAME: 'Booking Unit', VIEW_NAME: 'EQTY_BL_SHET', DB_SCHEMA: 'ORACLE', PRIVACY_INDICATOR: 'Not secure one bit'}, 
        {TECH_NAME: 'LOOKIE_HERE-D6', KBE_ID: 'E078', KBE_NAME: 'Investment', VIEW_NAME: 'INSMNT', DB_SCHEMA: 'M_ACCESS', PRIVACY_INDICATOR: 'Please hack us'},
        {TECH_NAME: 'SOME_NAME_A1',    KBE_ID: 'RS142', KBE_NAME: 'GL Account', VIEW_NAME: 'SECR_ERROR', DB_SCHEMA: 'EXCEL', PRIVACY_INDICATOR: 'Secure'},
        {TECH_NAME: 'OH_HAII',    KBE_ID: 'RS103', KBE_NAME: 'MC Account', VIEW_NAME: 'SECR_ERROR', DB_SCHEMA: 'SQL', PRIVACY_INDICATOR: 'Well'},
        {TECH_NAME: 'OTHER_NAME_A2', KBE_ID: 'RS142', KBE_NAME: 'Current Number of Shares', VIEW_NAME: 'EQTY_PSTN', DB_SCHEMA: 'SQL', PRIVACY_INDICATOR: 'Alright'},
        {TECH_NAME: 'NAMES_STILL_GOING_B3', KBE_ID: 'W001', KBE_NAME: 'Amount for Unrealized Loss or Profit', VIEW_NAME: 'EQTY_PSTN', DB_SCHEMA: 'NO_SQL', PRIVACY_INDICATOR: 'Could be better'},
        {TECH_NAME: 'WILL_THEY_END_C4', KBE_ID: 'W003', KBE_NAME: 'Fund ID', VIEW_NAME: 'EQTY_DEAL', DB_SCHEMA: 'SQL', PRIVACY_INDICATOR: 'Ummm', schema: 'Schema 4'},
        {TECH_NAME: 'NOT_LIKELY-C5', KBE_ID: 'E101', KBE_NAME: 'Booking Unit', VIEW_NAME: 'EQTY_BL_SHET', DB_SCHEMA: 'ORACLE', PRIVACY_INDICATOR: 'Not secure one bit'}, 
        {TECH_NAME: 'LOOKIE_HERE-D6', KBE_ID: 'E078', KBE_NAME: 'Investment', VIEW_NAME: 'INSMNT', DB_SCHEMA: 'M_ACCESS', PRIVACY_INDICATOR: 'Please hack us'}
        
    ]
    
      
});

Answer 1

Assuming you are using JSON, the docs on the paging toolbar say that the format for the JSON should be something like this:

{
    total: 2000,
    results: [{'id': 1000, name: 'ted'},{id: 1001, 'name': 'ted'}]
}

That total helps configure the paging toolbar like so:

Ext.create('Ext.data.Store', {
    ...,
    pageSize: 100,
    reader: {
        type: 'json',
        root: 'results',
        totalProperty: 'total' // Tell the toolbar where the result count is
    }
});

As far as I can tell, there isn't a way to have it automatically calculate the total size of the result set.