Displaying the number of rows in a grid - Extjs

Question

So I'm trying to display the number of rows (records) returned from a grid. Here's the code:

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' }
    ]
}],
...

I'm not sure how to use the getCount() method to return the number of rows from this grid (or store?). Any ideas?

Heres: my store:

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'}

    ]

});

Solution 1

You won't be able to do this dynamically, where it updates on its own, so you will have to use a placeholder and update the panel when the store is loaded.

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

Then:

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);
        });    
    }
}

Solution 2

You can try to add a paging toolbar and use the properties displayInfo & displayMsg. Try this code :

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

Solution 3

Assuming your store is loaded before the grid is rendered, this will probably work:

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

If the store loads dynamically, you will need to attach an event to the store's load event to update your grid, comment if the above code does not work and I can probably help you.

Solution 4

As it has already been said, you have to wait for the store to be loaded before using getCount. Except in the case you'd really use a memory store like the one in your example, but I doubt you'd want to display a dynamic number of record for that use case...

So, you have to listen for the load event of the store and update your text item then. The load event will fire each time the store is loaded, reloaded, etc., which may occur multiple times if your grid is paged or allow for filtering, etc. That means that our number of records will be kept in sync with the actual content of the store. Good.

Now, how to install that listener? One very common place for putting that kind of treatment is in the initComponent method of your component.

Here's the code. See the comments for a crash course in overriding initComponent (see another answer for a lecture on the topic).

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());
        });
    }

    // ...

});

View more solutions

Comments

[Clay Banks]

Where would I put that code? It's telling me it's undefined when I attempt to implement it.

[kevhender]

You could put it in a render listener for your grid. See my edited answer.

[Reimius]

give your store definition a "storeId" and then use it as a replacement for "Users" in my code. So if you use storeId: "cheese", you can then do Ext.data.StoreManager.lookup("cheese").getCount();

[rixo]

@kevhender I can't help but feel I've somewhat "stolen" the meat of your answer, and I'm sorry for that. But it seems to me that the OP is clearly starving for a complete code example, so I hope I've saved you a ton of edits and that, in turn, will save my karma...

[kevhender]

@rixo All is well, an answer is an answer! You were able to provide more details and that is always a good thing.