ExtJs Toolbar config object

Question

So i have the following scenario in my main view i have a container like this:

Ext.define('APP.view.main.Main', {
extend: 'Ext.container.Container',
xtype: 'app-main',
id: 'root',
requires: [
    'Ext.menu.*'
],
items:[
    'APP.view.main.topBar'
    ]
});

my APP.view.main.topBar looks like this:

Ext.define('APP.view.main.topBar',{

extend: 'Ext.container.Container',
docked: 'top',
xtype: 'toolbar',
id: 'topBar',
title: 'Meniu',

items:[
    {
        text: 'Furnizori',
        iconCls: 'x-fa fa-qrcode',
        menu: 'APP.view.main.menus.menuFurn'
        }

    ]
});

the problem is i get the following error:

Invalid config, must be a valid config object

i'm trying to include the toolbar in the items of the main

Answer 1

The item in the main class needs to be a proper object. See below:

Ext.define('APP.view.main.topBar', {

    extend: 'Ext.container.Container',
    docked: 'top',
    xtype: 'myAppTopBar',
    id: 'topBar',
    title: 'Meniu',

    items: [{
            text: 'Furnizori',
            iconCls: 'x-fa fa-qrcode',
            menu: 'APP.view.main.menus.menuFurn'
        }

    ]
});

Ext.define('APP.view.main.Main', {
    extend: 'Ext.container.Container',
    xtype: 'app-main',
    id: 'root',
    requires: [
        'Ext.menu.*'
    ],
    items: [{
        xtype: 'myAppTopBar'
    }]
});