How do I create dynamic objects from config data using Ext js

I'm using Ext Js to create a web app that needs to be dynamic. I make an AJAX call to the server to get the data to be displayed but don't really know what it is until I get the data back. I've seen some samples in which the dynamic objects are added at the application (top) level but as the structure can be deep it seems much more sensible for each object to get the data that it needs and add them internally.

In my example below I have a small app which will always show a couple of buttons. I want to provide the config data at the app levelthat will instruct it top add some more buttons as it starts up.

Is this possible? I've tried using constructor and initComponent, but as me.add(components) is called an exception is throw with the message "0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'insert'". It looks like I'm trying to add a new object before the object I'm adding it to is fully formed. Any ideas to get around this would be very welcome.

Ext.define('Ext.controls.ButtonBar', {
    extend: 'Ext.Container',///

    xtype: 'buttonbar',
    cls: 'buttonbar',
    width: window.width,
    height: 45,
    bodyPadding: 7,
    layout: { type: 'hbox', align: 'begin', },

    items: [
        { xtype: 'button', text: 'push me' },
        { xtype: 'button', text: 'push me too' }
    ],

    initComponent: function () {
        var me = this;
        // add the company image and application title
        var components = [];

        for (var i = 0 ; i < me.config.buttons.length ; i++) {
            var button = Ext.create('Ext.Button', { text: me.config.buttons[i].text });
            components.push(button);
        }

        me.add(components);
    },
});


Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Ext.controls.ButtonBar', {
            renderTo: Ext.getBody(),
            height: 300,
            width: 300,
            config: {
                // I have already loaded a load of configuration data through an ajax call. It loads 
                // a structure of data and I want each object to identify what it needs rather than 
                // having to understand the full structure and work on it from the outside.
                buttons: [
                    { text: "Press Me, I'm dynamic" },
                    { text: "I'm dynamic too" },
                ]
            }
        });
    },
});

I've looked the documentation for initComponent some more and realised that I'd missed out the required call to callParent. When I added this in it stopped getting the error reported above and displayed all the buttons on screen. It appears that this call finishes off the creation of the component ready for further use. In the case above I needed to call it before adding the extra child components.

In truth, there was one more change I needed to make to see all the buttons added and that was to change the size of the button bar to make room for the controls.

initComponent: function () {
    var me = this;
    me.callParent();   // << here's the change

    var components = [];
    for (var i = 0 ; i < me.config.buttons.length ; i++) {
        var button = Ext.create('Ext.Button', { text: me.config.buttons[i].text });
        components.push(button);
    }
    me.add(components);
},