Design flaw?

Hi, I am trying to use the sample thats created by default with a toolbar in the bottom, with some buttons. I have now added a .js file for each panel and now I am getting some design problems.

I want the header and the toolbar in the bottom to be present on all my panels, no matter whats in them. But I realized that now when I am adding a listview, I am missing my "Title" banner and the title now goes into the button in the bottom menu?

Main

Code:

Ext.define('Hippocrates.view.Main', {    extend: 'Ext.tab.Panel',
    requries: [
        'Hippocrates.view.Home',
        "Hippocrates,view.Horses",
        "Hippocrates.view.Newstat"],
    xtype: 'main',
    config: {
        name: 'MainTab',
        tabBarPosition: 'bottom',
        items: [
            {xtype: 'homecard'},
            {xtype:"newstat"},
            {xtype: 'horses'}
        ]
    }
});

Homecard

Code:

Ext.define('Hippocrates.view.Home', {
    extend: 'Ext.Panel',
    xtype: "homecard", 
    
    config: {


         title: 'Hem',
         iconCls: 'home',
                styleHtmlContent: true,
                scrollable: true,


                items: {
                   
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'Hippocrates TM'
                },


                html: [
                    "Wow!"
                ].join("")
    }


});

the card with the list

Code:

Ext.define('Hippocrates.view.Horses', {    extend: 'Ext.List',
    xtype: "horses", 
    requirees: ["Hippocrates.store.User"],
    config: {


        title: 'Alla horses',
        grouped: false,
        itemTpl: '{Name} {owner}',
        store: 'User',
        onItemDisclosure: true
    }


});

I know that it is something I am missing here, but as a new beginner - it is hard to track it down?

Joakim

Design flaw?