Displaying the number of rows in a grid - Extjs - list

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

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

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

Answer 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.

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