List Paging "Load More" Text not appearing on first showing of list

I have implemented list paging in my app and everything is working except that the "load more" text does not appear when I first display the list. If I navigate away from the list and then back into it, with the same data, the load more text appears.

Here is my list

Code:

xtype: 'list',
flex: 2,
id: 'cashReceiptsList',
itemId: 'mylist1',
disableSelection: true,
itemTpl: [
    '<div class="screenColumns">',
    '    <div class="screenColumns-column">',
    '        <div class="list-item-narrative">{date}</div>',
    '        <div class="list-item-title"><b>{debtorName}</b></div>',
    '        <div class="list-item-narrative">{reference}</div>        ',
    '    </div>',
    '    <div class="screenColumns-column" style="white-space:nowrap;">',
    '        <div class="list-item-title" style="text-align:right;">{amount} {currency}</div>        ',
    '    </div>    ',
    '</div>',
    ''
],
pressedDelay: 0,
store: 'CashReceiptsStore',
itemHeight: 35,
variableHeights: true,
listeners: [
    {
        fn: function(component, eOpts) {
            /* Set any static literals in the user's language */
            this.setEmptyText(Aries.globals.messages.noCashReceipts);
        },
        event: 'initialize'
    }
],
plugins: [
    {
        autoPaging: true,
        type: 'listpaging',
        listeners: [
            {
                fn: function(component, eOpts) {
                    /* Set any static literals in the user's language */
                    this.setNoMoreRecordsText(Aries.globals.messages.noMoreRecords);
                },
                event: 'initialize'
            }
        ]
    }
]

And this is my store

Code:

Ext.define('Aries.store.CashReceiptsStore', {
    extend: 'Ext.data.Store',

    requires: [
        'Aries.model.CashReceiptsModel',
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Json'
    ],

    config: {
        model: 'Aries.model.CashReceiptsModel',
        pageSize: 5,
        storeId: 'CashReceiptsStore',
        proxy: {
            type: 'ajax',
            url: 'data/cashReceipts.json',
            reader: {
                type: 'json',
                rootProperty: 'cashReceiptItems'
            }
        }
    }
});

I am also providing a total record count in my JSONP data call (totalProperty in JSON reader), so the list paging plugin should know there are more records available.

I did a code inspection on the list and I can see the load more text DIV is there in the list, but it's initially hidden on first display:

Code:

<div class="x-unsized x-list-paging x-item-hidden" id="ext-component-69" style="display: none !important;">
<div class="x-innerhtml" id="ext-element-155">
<div class="x-loading-spinner" style="font-size: 180%; margin: 10px auto;">

<span class="x-loading-top"></span>
<span class="x-loading-right"></span>
<span class="x-loading-bottom"></span>
<span class="x-loading-left"></span>

</div>

<div class="x-list-paging-msg">Load More...</div>
</div>
 </div>

Anyone have any ideas?