infinite scroll not rendering

Question

I'm trying to use ExtJS4.1 infinite scroll feature.
The ajax calls are being made, the data returned, but only the first page loads.
What am I doing wrong? When I scroll down nothing happens.

My code:
Store:

Ext.define('BM.store.Tests', {
    extend: 'Ext.data.Store',
    model: 'BM.model.Test',

    storeId: 'Tests',
    buffered: true,
    leadingBufferZone: 50,
    pageSize: 25,
    purgePageCount: 0,
    autoLoad: true
});

The proxy is in the model:

proxy: {
    type: 'ajax',
    api: {
        create: '../webapp/tests/create',
        read: '../webapp/tests',
        update: '../webapp/tests/update'
    },
    reader: {
        type: 'json',
        root: 'tests',
        successProperty: 'success'
    }
}

The grid:

Ext.define('BM.view.test.MacroList', {
    extend: 'Ext.grid.Panel',
    alias:'widget.macro-test-list',

    store: 'Tests',

//    loadMask: true,
//    selModel: {
//        pruneRemoved: false
//    },
//    viewConfig: {
//        trackOver: false
//    },

    verticalScroller: {
        numFromEdge: 5,
        trailingBufferZone: 10,
        leadingBufferZone: 20
    },

    initComponent: function() {

        this.columns = [
            {
                xtype: 'gridcolumn',
                dataIndex: 'name',
                text: 'Name'
            },
            {
                xtype: 'datecolumn',
                dataIndex: 'created',
                text: 'Date Created',
                format: 'd-M-Y'
            },
            {
                xtype: 'datecolumn',
                dataIndex: 'changed',
                text: 'Last Updated',
                format: 'd-M-Y'
            }
        ];
        this.callParent(arguments);
    }

The only thing that's different between my implementation and the one in the examples, is that my grid is not rendered to the body.
The viewport contains a border layout.
The grid is part of the west region panel:

{
    collapsible: true,
    region: 'west',
    xtype: 'macro',
    width: 500
}

The macro panel:

Ext.define('BM.view.Macro', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.macro',

    title: 'Tests',

    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [
    {
        id: "macro-test-list-id",
        xtype: 'macro-test-list',
        flex: 1
    },
    {
        id: "macro-report-panel-id",
        xtype: 'macro-report-list',
        title: false,
        flex: 1
    },
    {
        id: "macro-report-list-id-all",
        xtype: 'macro-report-list-all',
        flex: 1,
        hidden: true,
        layout: 'anchor'
    }
    ]
});

I've tried many many things, changing layouts, giving the grid a fixed height, etc...
Nothing works, scroll down, and the grid doesn't refresh.
One other piece of information: The DB contains 53 records of data. I'm getting the 3 ajax calls, but only the first 25 records appear (as I requested).
Any thoughts?

Answer 1

You need to upgrade to ExtJS 4.2!

Answer 2

It sounds like you might be forgetting to put the total property in the server's JSON response. Does your answer have a structure like this:

{
    "total": 53, 
    "tests": [(...)]
}

The totalProperty name is defined in the Reader configuration and defaults to total.

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Reader-cfg-totalProperty