EXTJS 4.1 - Ext.Panel title field not displaying correctly

Question

I'm having issues with ExtJS Panels. The problem is that the titles for each of the Panels are all placed right on top of each other in the upper left hand corner of the entire area.

i.e. HEADER1, HEADER2, and MAIN HEADER are all overlapping each other and aren't even within the bounds of their own panels (they are all at the very top left)

Any ideas what is going on? My code is listed below.

Ext.onReady(function(){
    Ext.QuickTips.init();

    var widget1 = new Ext.Panel({
    id:'widget1', 
    height: 50,
    autoScroll:false,
    title: '<div class="widget-header">HEADER1 <span class="header1-count">(45 ITEMS)</span></div>',
    defaults: {
        border:true,
        collapsible:true, 
        animCollapse:true
    }
    });

    var widget2 = new Ext.Panel({
    id:'widget2', 
    height: 200,
    autoScroll:false,
    title: '<div class="widget-header">HEADER2</div>',
    defaults: {
        border:true,
        collapsible:true, 
        animCollapse:true
    }
    });

    var widgetPanel = new Ext.Panel({
    id:'widgets',  
    height: 800,
    width: 300,
    autoScroll:false,
    items: [
        widget1,
        widget2
    ]
    });         

    var mainPanel = new Ext.Panel({ 
    id:'main-panel', 
    bodyBorder:false,
    autoHeight:true,
    autoWidth:true,
    layout:'hbox', 
    renderTo: LOCATION.div,
    items: [
        widgetPanel,
        { 
            xtype:'panel', 
            id:'content',
            tbar: [
                {
                    xtype:'tbtext', 
                    id:'title', 
                    html:'<h1>MAIN HEADER</h1>', 
                    style:'margin:1px 15px 0 0;'
                },
            ],
            layout:'hbox',
            padding: '5px 0 0 0',
            items: [{
                    xtype:'panel',
                    id:'container-panel',           
                    scroll: 'vertical', 
                    height: '100%',
                    items: [//todo
                    ]
                }
            ]
        }
      ]
    }); 
});

Answer 1

widgetPanel is missing a layout (and has two sub-panels, so no way ExtJS will know how to render these); per the docs, you must have a layout.

Also make sure to include flex (or width or height) together with your hbox and vbox layouts.