ExtJs4 dynamically load items in a toolbar

How can I dynamically load items in an ExtJs 4 toolbar ? I want to load the items from JSON.

I have tried the loader, but it just became headache.

Ext.define('Backend.view.Nav' ,{
    alias: 'widget.Nav',
    extend: 'Ext.toolbar.Toolbar',
    initComponent: function() {
        this.items = [
        {
            iconCls: 'freewinder',
            text: 'Freewinder'
        },
        {
      开发者_运维百科      iconCls: 'application',
            text: 'Applikationen',
            xtype: 'splitbutton'
        },
        {
            iconCls: 'component',
            text: 'Komponenten',
            xtype: 'splitbutton'
        },
        '-',
        {
            emptyText: 'Suche ...',
            xtype: 'textfield'
        }];     
        this.callParent(arguments);
    }
});

You can use add method of Ext.toolbar.Toolbar to add items dynamically after the toolbar has been constructed: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.Toolbar-method-add

How do you want it to work? Should the toolbar appear, make an AJAX request and them add the menu items -- or should the server upon page load give the client-side app some JSON that contains the menu items or how do you want it to work exactly?

In case of the server outputting JSON on page load you can just do this.items = jsonItems.