Component DataView not displaying store data

Hi all,

I have a component DataView setup similar to the guide here (non-DataMap):

http://ift.tt/1Fx2bhr

I'm not sure why, but once data is loaded into the store the DataView isn't updated. This isn't a layout: 'fit' issue as I've had this working fine using an XTemplate instead of components. Also 'x-dataview-inner' is completely empty, meaning it's not even attempting to render the data in the store.

At the moment I'm just trying to get the DataView to display something (a button in this case). I'm not actually doing anything with the data yet. The store has 12 records, so I'd expect to see a list of 12 buttons.

Here's my code:

DataView added to a panel in another view:

Code:

this.parent.activity = Ext.create('TestApp.view.shared.Activity', {
    username: config.username,
    type: 'app',
    defaultapp: config.defaultapp
});


this.add(this.parent.activity);

View:

Code:

Ext.define('TestApp.view.shared.Activity', {
    extend: 'Ext.dataview.DataView',

    requires: [
        'TestApp.view.shared.activity.Item',
        'TestApp.store.shared.Activity'
    ],

    config: {
        defaultType: 'activityitem',
        useComponents: true,

        layout: {
            type: 'fit',
            align: 'stretch'
        },
        width: '100%',
        height: '100%',
        cls: 'activity',
        rendered: false,
        listeners: {
            painted: function(element) {
                if(!this.rendered) {
                    // Mask view while building components
                    this.parent.unmask();

                    // Setup references for parallax effects
                    this.setupParallax(element);

                    // Mark view as rendered
                    this.rendered = true;
                }
            },
            initialize: function(view) {
                // Setup parallax effects
                this.parallax(view);
            }
        }
    },

    constructor: function(config) {
        this.store = Ext.create('TestApp.store.shared.Activity', {
            type: config.type,
            id: config.id ? config.id : false,
            username: config.username ? config.username : false,
            defaultapp: config.defaultapp,
            finished: function() {
                if(config.defaultapp) Ext.getCmp('container').hideAppLoadingIndicator();
            }
        });

        this.callParent(arguments);
    },

    // Add references for parallax effect
    setupParallax: function(element) {

    },


    // Add parallax effects to scroller
    parallax: function(view) {

    }
});

Item:

Code:

Ext.define('TestApp.view.shared.activity.Item', {
    extend: 'Ext.dataview.component.DataItem',
    xtype: 'activityitem',
    config: {
        layout: {
            type: 'hbox'
        },
        items: [
            {
                xtype: 'button',
                text: 'Hello'
            }
        ]
    },
    updateRecord: function(record) {
        me.callParent(arguments);
    }
});

Store:

Code:

Ext.define('TestApp.store.shared.Activity', {
    extend: 'Ext.data.Store',
    requires: ['TestApp.model.shared.Activity'],

    config: {
        autoLoad: false,
        model: 'TestApp.model.shared.Activity',
        autoSync: true
    },

    initialize: function() {
        // Set proxy type and proxy ID
        this.setProxy({
            type    : this.config.defaultapp ? 'localstorage' : 'sessionstorage',
            id      : 'activity-store-' + this.config.type + '-' + this.config.username
        });

        // Initial load. Records obtained either locally or via an AJAX call (loadData) and refreshed
        this.load({
            callback: function(records, operation, success) {
                if(records.length == 0) this.loadData(false);
                else {
                    // Run callback if it exists
                    if(this.config.finished) this.config.finished();

                    // Refresh data
                    //this.loadData(true)
                }
            },
            scope: this
        });
    },

    loadData: function(update) {
        if(update) {
            // Show a 'pull-down'-like update animation
        }

        Ext.Ajax.request({
            url: baseUrl + '/api/' + this.config.type + '/activity',
            method: 'GET',
            scope: this,
            params: {
                username: this.config.username,
                lastdate: update ? this.getLastDate() : false
            },
            success: function(response){
                // Add response data to store
                this.add(Ext.JSON.decode(response.responseText));

                // Run callback if it exists
                if(this.config.finished) this.config.finished();
            }
        });
    },

    getLastDate: function() {
        // Get all records
        var records = this.getRange();

        // Sort them!
        records.sort(function(a, b){
            return new Date(b.data.DateTime) - new Date(a.data.DateTime);
        });

        // Return DateTime from first record
        return records[0].data.DateTime;
    }
});

Component DataView not displaying store data