TabPanel inside a FormPanel

[squistbe]

I am trying to create a group of tabpanels inside a formpanel. My tabpanel is an item of formpanel and displays only the title of each tabpanel in the formpanel. All of my form components will be inside one of the tabpanels. My code would look something like this:

var form = Ext.create('Ext.form.Panel', {
    fullscreen: true,
    items: [
        { 
            xtype: 'tabpanel',
            fullscreen: true,
            tabBarPosition: 'bottom',
            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: 'Home Screen'
                },
                {
                    title: 'Contact',
                    iconCls: 'user',
                    html: 'Contact Screen'
                }
            ]
        }
    ]
});

[AndreaCammarata]

TabPanels components are not supposed to be FormPanels children but exactly the opposite.
Try to explain me what you would like to accomplish from a UI point of view so that I can provide you a solution.
However, if you want to have a FormPanel and a TabPanel inside the same view, that's pretty easy to achieve:

Just place the FormPanel and the TabPanel inside a "vbox" flex layout:

var form = Ext.create('Ext.Container', {
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [
        {
            xtype: 'formpanel',
            items: [
                ...
            ]
        },
        { 
            xtype: 'tabpanel',
            fullscreen: true,
            tabBarPosition: 'bottom',
            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: 'Home Screen'
                },
                {
                    title: 'Contact',
                    iconCls: 'user',
                    html: 'Contact Screen'
                }
            ]
        }
    ]
});

In this way the components will stretch vertically in your viewport.

[squistbe]

From what I understand, TabPanel's parent should be Container? My challenge is I have FormPanel class where all other form views are configured. There are many configurations specified by the user. So it looks like I should create a separate TabPanel class with FormPanels as the items.