显示网格中的行数 - Extjs

Question

所以我试图显示从网格返回的行数（记录）。代码如下：

Ext.define('AM.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',
    title: '<center>Data Management</center>',
    store: 'Users',
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',

    items: [
        { xtype: 'tbtext', text: 'Number of Records\:' + ***code that will return number of records*** },
        { xtype: 'tbfill' },
        { text: 'Print' },
        { text: 'Export' }
    ]
}],
...

我不确定如何使用 getCount() 方法从该网格（或存储？）返回行数。有什么想法吗？

这里：我的商店：

Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store',
    model: 'AM.model.User',
    fields: ['field1', 'field2', 'field3'],
    data: [
        {field1: 'Data 1', field2: 'Data 2', field3: 'Data 3'},
        {field1: 'Data 1', field2: 'Data 2', field3: 'Data 3'},
        {field1: 'Data 1', field2: 'Data 2', field3: 'Data 3'}

    ]

});

Answer 1

您可以尝试添加分页工具栏并使用属性 displayInfo 和 displayMsg。 试试这个代码：

bbar : { xtype : 'pagingtoolbar', displayInfo: true, store:'your store', displayMsg : 'Total rows {2}'// defaultvalue = 'Displaying {0} - {1} of {2}' }

Answer 2

如前所述，您必须等待商店加载完毕才能使用getCount。除非您确实使用示例中的内存存储，但我怀疑您是否希望显示该用例的动态记录数...

因此，您必须监听 store 的 load 事件，然后更新您的文本项。每次加载、重新加载商店等时都会触发 load 事件，如果您的网格被分页或允许过滤等，这可能会发生多次。这意味着我们的记录数将与实际内容保持同步的商店。很好。

现在，如何安装那个监听器？进行这种处理的一个非常常见的地方是组件的 initComponent 方法。

这是代码。请参阅 cmets 了解覆盖 initComponent 的速成课程（有关该主题的讲座，请参阅 another answer）。

Ext.define('AM.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',
    title: '<center>ECRIS-MetaData Management</center>',
    store: 'Users',
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',

        items: [
            // Give an itemId to this component to make it easy to
            // reference later.
            { xtype: 'tbtext', text: 'Loading...', itemId: 'recordNumberItem' },
            { xtype: 'tbfill' },
            { text: 'Print' },
            { text: 'Export' }
        ]
    }],

    initComponent: function() {
        // We're overriding an existing method, so that's very important to call
        // the parent method, or the component will break in awful sufferings
        this.callParent(arguments);

        // I'm putting the code *after* callParent, so that the store is available

        var store = this.getStore(),
            // Using ComponentQuery to retrieve the text item
            textItem = this.down('#recordNumberItem');

        // Using `mon` instead of `on` for better memory management (the listener
        // will be removed from the store automatically when the component is
        // destroyed).
        this.mon(store, 'load', function() {

            // We're left with the easy part...
            textItem.setText("Number of records: " + store.getCount());
        });
    }

    // ...

});

Answer 3

您将无法动态执行此操作，它会自行更新，因此您必须使用占位符并在加载商店时更新面板。

{ xtype: 'tbtext', itemId: 'numRecords' }

然后：

listeners: {
    render: function(store) {
        store.on('load', function(records) {
            var count = records.length; //or store.getTotalCount(), if that's what you want
            grid.down('#numRecords').setText('Number of Records: ' + count);
        });    
    }
}

Answer 4

假设您的商店在网格渲染之前加载，这可能会起作用：

Ext.data.StoreManager.lookup("Users").getCount();

如果商店动态加载，您需要将事件附加到商店的加载事件以更新您的网格，如果上面的代码不起作用，请发表评论，我可能会帮助您。