I've created a custom component to re-use functionality. It works well but the SA design view does not render the component using configuration properties assigned to a linked instance or from an instance which has been saved to toolbar. Am I creating the component incorrectly for this purpose or is there something I'm doing wrong?

Here is a screenshot of the component in the SA design view.

Design.png

As you can see there is only basic rendering. I can influence this by changing the core component, not the linked instance.

Here's how the linked instance is rendered in the application (correctly).

Application.png

Here's the implementation of the component. As you can see I'm using the processConfig function to apply values from the instance.

Code:
Ext.define('STApp.view.MessageContainer', {
    extend: 'Ext.container.Container',
    alias: 'widget.messagecontainer',

    height: 24,
    hidden: true,
    id: 'messagecontainer',
    layout: {
        align: 'stretch',
        type: 'hbox'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'label',
                    flex: 1,
                    margins: '4',
                    id: 'messagelabel',
                    maxHeight: 22,
                    minHeight: 15
                },
                {
                    xtype: 'button',
                    border: false,
                    padding: '4 4 auto 4',
                    tooltip: 'Close',
                    listeners: {
                        click: {
                            fn: me.onMessageCloseClick,
                            scope: me
                        }
                    }
                }
            ]
        });

        me.processMessageContainer(me);
        me.callParent(arguments);
    },

    processMessageContainer: function(config) {
        try
        {
            // items[0] = label
            // items[1] = button

            if (config.backgroundColor !== undefined)
            {
                var bc = 'background-color';
                this.style = bc + ': ' + config.backgroundColor + ';';
                this.items[1].style = bc + ': ' + config.backgroundColor + ';';
            }

            if (config.buttonIconCls !== undefined)
            {
                this.items[1].iconCls = config.buttonIconCls;
            }
        }
        catch(ex)
        {
            //    this.controller.log(ex.message);
        }
    },

    onMessageCloseClick: function(button, e, eOpts) {
        this.clearMessage();
    },
});