nested panels are not displayed

[howHardCanItBe]

Hi, I am trying to create a container or panel with some toolbars and six content areas. The toolbars are displaying fine, but the panels are not. What am I missing?

Ext.application({
    name: 'test app',
    launch: function () {


        Ext.create('Ext.Container', {
            fullscreen: true,
            layout: 'vbox',
            items: [
                {
                    xtype: 'toolbar',
                    dock: 'top'
                },
                {
                    xtype: 'panel',  
                    //fullscreen: 'true',                  
                    layout: 'fit',
                    item: [
                        {
                            xtype: 'panel',
                            flex: 1,
                            items: [
                                {
                                    xtype: 'panel',
                                    dock: 'left',
                                    items: [{
                                        html: "blah blah blah"
                                    }]
                                },
                                {
                                    xtype: 'panel',
                                    items: [{
                                        html: "blah blah blah"
                                    }]
                                }
                            ]
                        },
                        {
                            xtype: 'panel',
                            flex: 1,
                            items: [
                                {
                                    xtype: 'panel',
                                    dock: 'left',
                                    items: [{
                                        html: "blah blah blah"
                                    }]
                                },
                                {
                                    xtype: 'panel',
                                    items: [{
                                        html: "blah blah blah"
                                    }]
                                }
                            ]
                        },
                        {
                            xtype: 'panel',
                            flex: 1,
                            items: [
                                {
                                    xtype: 'panel',
                                    dock: 'left',
                                    items: [{
                                        html: "blah blah blah"
                                    }]
                                },
                                {
                                    xtype: 'panel',
                                    items: [{
                                        html: "blah blah blah"
                                    }]
                                }
                            ]
                        }
                    ]
                },
                {
                    xtype: 'toolbar',
                    dock: 'bottom'
                }
            ]
        });




        }
    }


});

[mitchellsimoens]

You need to use layouts better. Here is your code with many comments:

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: {
        type : 'vbox',
        align : 'stretch'
    },
    items: [
        {
            xtype: 'toolbar',
            docked: 'top' //use docked not dock
        },
        {
            xtype: 'panel',
            //layout: 'fit', //this will only allow one child to be shown, use box or card layout
            layout : {
                type  : 'vbox',
                align : 'stretch'
            },
            flex : 1,
            items: [    //typo, was 'item' but should be 'items'
                {
                    xtype: 'panel',
                    flex: 1,
                    layout : 'fit', //needed a layout
                    items: [
                        {
                            xtype: 'panel',
                            docked: 'left', //use docked instead of dock
                            layout : 'fit', //needed a layout, or set the html to the panel and no children
                            width : 100, //needed a width
                            items: [{
                                html: "blah blah blah"
                            }]
                        },
                        {
                            xtype: 'panel',
                            layout : 'fit', //needed a layout, or set the html to the panel and no children
                            items: [{
                                html: "blah blah blah"
                            }]
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    flex: 1,
                    layout : 'fit', //needed a layout
                    items: [
                        {
                            xtype: 'panel',
                            docked: 'left', //use docked instead of dock
                            layout : 'fit', //needed a layout, or set the html to the panel and no children
                            width : 100, //needed a width
                            items: [{
                                html: "blah blah blah"
                            }]
                        },
                        {
                            xtype: 'panel',
                            layout : 'fit', //needed a layout, or set the html to the panel and no children
                            items: [{
                                html: "blah blah blah"
                            }]
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    flex: 1,
                    layout : 'fit', //needed a layout
                    items: [
                        {
                            xtype: 'panel',
                            docked: 'left', //use docked instead of dock
                            layout : 'fit', //needed a layout, or set the html to the panel and no children
                            width : 100, //needed a width
                            items: [{
                                html: "blah blah blah"
                            }]
                        },
                        {
                            xtype: 'panel',
                            layout : 'fit', //needed a layout, or set the html to the panel and no children
                            items: [{
                                html: "blah blah blah"
                            }]
                        }
                    ]
                }
            ]
        },
        {
            xtype: 'toolbar',
            docked: 'bottom' //use docked not dock
        }
    ]
});

[howHardCanItBe]

Thanks for taking the time to mark it up, appreciate it.