Items appear overlapped when entered into panel

When I add items into this panel:

myapp.cards.dealerList = new Ext.Panel({
    scroll:true,
    layout:{
        type:"vbox",
        align:"stretch"
    },
    id: "dealer-list-results-card",
    dockedItems: [myapp.toolbars.dealerList, myapp.toolbars.dealerListNav],
    items: []
})

They a开发者_StackOverflow中文版ppear over lapped on top of one another.

so in the case of specifying these two items inside the square brackets:

new Ext.Panel({
    html:"Dealer results",
    baseCls:"x-toolbar-title",
    scroll:true,
    flex:1,
    height: 200,
    layout:{
        align:"stretch"
    }
});

new Ext.Panel({
    html:"Dealer results two",
    baseCls:"x-toolbar-title",
    scroll:true,
    flex:1,
    height: 200,
    layout:{
        align:"stretch"
    }
});

They appear overlapped. My ulimate goal is to have a panel and a list as the two items.

Note: I am using sencha touch and the card layout system to interchange between the cards. Dealerlist panel is one of these cards.

Just a guess, but try adding a HTML between them with x-clear class.

Not 100% sure, but I think you shouldn't use both "height" and "flex" on your child panels - both of these configs define the height. Also the children don't need layout: {align: "stretch"} unless this is for the child items of their own.