ExtJS主视图引入工具栏报错：Invalid config, must be a valid config object

Hey there, let's work through that "Invalid config, must be a valid config object" error you're hitting in your ExtJS project. I've gone over your code and spotted a couple of key issues causing this problem:

1. Mismatched xtype & incorrect component reference #

Your topBar component inherits from Ext.container.Container but uses the built-in toolbar xtype—this conflicts with ExtJS's native Ext.toolbar.Toolbar component, which is what the toolbar xtype maps to. Additionally, you're trying to add the toolbar to your main view using just a string reference ('APP.view.main.topBar'), which isn't a valid component config object.

2. Invalid menu reference #

Same issue applies to your menu: using a string 'APP.view.main.menus.menuFurn' won't work here—ExtJS needs a proper component config to render the menu.

Here's the fixed code for both components:

Fixed APP.view.main.topBar

Ext.define('APP.view.main.topBar',{
    extend: 'Ext.container.Container',
    docked: 'top',
    // Use a custom, unique xtype to avoid conflicts
    xtype: 'main-topbar',
    id: 'topBar',
    title: 'Meniu',
    items:[{
        text: 'Furnizori',
        iconCls: 'x-fa fa-qrcode',
        // Reference the menu using its xtype (we'll define that next)
        menu: {
            xtype: 'menu-furn'
        }
    }]
});

Fixed APP.view.main.Main

Ext.define('APP.view.main.Main', {
    extend: 'Ext.container.Container',
    xtype: 'app-main',
    id: 'root',
    requires: [
        'Ext.menu.*',
        // Make sure to explicitly require your topBar component
        'APP.view.main.topBar',
        // And your menu component too
        'APP.view.main.menus.menuFurn'
    ],
    items: [{
        // Use the custom xtype to render your topBar
        xtype: 'main-topbar'
    }]
});

Don't forget to add an xtype to your menuFurn component

Ext.define('APP.view.main.menus.menuFurn',{
    extend: 'Ext.menu.Menu',
    xtype: 'menu-furn',
    // Add your menu items and other config here
    items: [
        // Example menu items
        { text: 'Adaugă Furnizor' },
        { text: 'Lista Furnizori' }
    ]
});

Why this works: #

• Custom xtypes: Using unique xtypes like main-topbar and menu-furn ensures ExtJS doesn't confuse your custom components with native ones.
• Valid config objects: Instead of string references, we're passing proper component configs with xtypes—this is ExtJS's recommended way to render components, as it handles lifecycle management and dependency resolution automatically.
• Explicit requires: Listing your components in the requires array ensures ExtJS loads them before trying to render the main view, preventing missing component errors.

This should resolve that invalid config error and get your toolbar and menu rendering correctly.

内容的提问来源于stack exchange，提问作者lessan