分页工具栏不显示记录数 - Ext JS

Question

所以我这里有以下代码，显示一个网格，其中包含来自我的商店的数据在单独的目录中：

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 : [
                //...
                            //...
            ]
        }]
    
});

分页工具栏显示没有问题，但不显示有任何数据加载到其中，甚至不允许滚动。我的店目前有 14 排。 （商店加载没有问题）。我没有使用任何代理，应该吗？

这是我的商店。元数据.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

假设您使用的是 JSON，分页工具栏上的文档说 JSON 的格式应该是这样的：

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

该总数有助于配置分页工具栏，如下所示：

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

据我所知，没有办法让它自动计算结果集的总大小。