1. #1
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    27
    Vote Rating
    0
    Answers
    2
    squistbe is on a distinguished road

      0  

    Default Unanswered: TabPanel inside a FormPanel

    Unanswered: TabPanel inside a FormPanel


    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:

    Code:
    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'
                    }
                ]
            }
        ]
    });

  2. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Vote Rating
    23
    Answers
    148
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    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:

    Code:
    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.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  3. #3
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    27
    Vote Rating
    0
    Answers
    2
    squistbe is on a distinguished road

      0  

    Default


    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.

Thread Participants: 1

Tags for this Thread