Showing The Record Count in a Sencha ExtJS Grid Made Simple

I use Sencha’s ExtJS for lot’s of data maintenance type applications.  One such application is an email response manager where it’s convenient to know how many different URL’s got clicked.  Basically, how many rows in the gridview.  Certainly, counting is an option but showing it in the title makes a lot more sense.

The tip here is that often you have to call store.load() on the store associated with a grid so with just a couple extra lines you can put the count in the title of that grid.  Those extra lines are basically just a callback to the store.load that then grabs a reference to the gridview.  In my case, I have a button on my toolbar (just above the gridview), and in the button’s handler I execute the store.load which passes the parameters to the store as well as sets the title on completion.

Here is the very simple code.

{
    xtype: 'button',
    text: 'Fetch Emails',
    handler: function(button) {
        var readEmailsChecked = button.up().down('[name=checkBoxReadOnly]').checked;
        var readEmailsNotChecked = button.up().down('[name=checkBoxNotReadOnly]').checked;
        var emailDetailStore = button.up().up().getStore();
        console.log(readEmailsChecked + ' ' + readEmailsNotChecked);
        emailDetailStore.load({
            params: {
                emailReadCountNonZero: readEmailsChecked,
                emailReadCountZero: readEmailsNotChecked
            },
            callback: function(records, operation, success) {
                button.up().up().setTitle('People ' + records.length);
            }
        })
    }
}

HTH’s