Sencha Touch: Nested TabPanel layout

Question

Sencha Touch n00b here. I'm trying to make a form with a tabpanel within a tabpanel. They work ok, but the outer tabpanel has a huge indent (or left/top margin or something), and so does the inner tabpanel.

I've tried every single layout/margin/border/padding/flex/align option in existence, and nothing makes any difference!

code (redundant overkill options left in):

MyApp.views.pendingDetails = new Ext.form.FormPanel({
    id: 'pendingDetails',
    padding: 0,
    margin: 0,
    layout: 'auto',
    align: 'stretch',
    items: [{
        height: 500,
        xtype: 'tabpanel',
        activeTab: 0,
        //width: 400,
        tabBar: { //pack: 'center', // this will center the menu,
            cls: 'MainTabHeader',
            padding: 0,
            margin: 0
        },
        padding: 0,
        layout: 'auto',
        border: false,
        margin: 0,
        align: 'stretch',
        layout: 'auto',
        items: [{
            xtype: 'tabpanel',
            border: true,
            title: 'Customer',
            activeTab: 0,
            padding: 0,
            border: false,
            margin: 0,
            height: 300,
            align: 'stretch',
            layout: 'auto',
            tabBar: { //pack: 'center', // this will center the menu,
                cls: 'SubTabHeader',
                padding: 0,
                margin: 0
            },
            items: [{
                xtype: 'panel',
                title: 'Site',
                border: true,
                padding: 0,
                items: [{
                    xtype: 'textfield',
                    name: 'StJobId',
                    cls: "detailText",
                    readOnly: true,
                    label: 'Job #'
                }, {
                    xtype: 'textfield',
                    name: 'Priority',
                    readOnly: true,
                    cls: "detailText",
                    label: 'Priority'
                }, {
                    xtype: 'textfield',
                    id: 'txtAddress',
                    cls: "detailText",
                    readOnly: true,
                    label: 'Address'
                }, {
                    xtype: 'textfield',
                    id: 'txtSuburb',
                    readOnly: true,
                    cls: "detailText",
                    label: 'Suburb'
                }, {
                    xtype: 'textfield',
                    name: 'Company',
                    readOnly: true,
                    cls: "detailText",
                    label: 'Company'
                }]
            }, {
                xtype: 'panel',
                border: true,
                title: 'Contacts'
            }, {
                xtype: 'panel',
                border: true,
                title: 'Security'
            }]
        }, {
            xtype: 'panel',
            border: true,
            title: 'Install',
            height: 300,
            items: [{
                xtype: 'button',
                text: 'Install tab',
                iconCls: 'jobrequests',
                iconMask: true,
                iconAlign: 'top',
                ui: 'plain',
                cls: "TBButton"

            }]
        }, {
            xtype: 'panel',
            border: true,
            title: 'History'
        }]
    }],

    dockedItems: [
    MyApp.views.pendingDetailsTopToolbar]
});

It renders as:

How do I get rid of the indents marked in red?

Answer 1

Apparently FormPanels were designed for basic CRUD. They can't handle having tabpanels as items.

I changed the FormPanel to a Panel, handled the data manually, and it now renders fine.