1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    Mumbai, India
    Posts
    119
    Answers
    11
    Vote Rating
    4
    Sasha172 is on a distinguished road

      0  

    Default Unanswered: TabPanel inside FormPanel

    Unanswered: TabPanel inside FormPanel


    Hi,
    I have a form with way too many sections and questions. So I decided to sort different sections into different tabs. But Im not sure how to handle the submit and loading of data, and Im not sure how to make the app understand that all the panels are part of a single form. Also, after submission I need to tell the user which tab panels failed validation so that he can correct the errors.

    I read somewhere that i have to use the layout : 'form' … But Im not sure how.

    Please help

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The fields should still be submitted no matter where they are as long as they are a child at some level of the form.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    Mumbai, India
    Posts
    119
    Answers
    11
    Vote Rating
    4
    Sasha172 is on a distinguished road

      0  

    Default


    Doesn't work The form fields just don't show up at all in the xtype:'tabpanel' items.
    I've coded a workaround for now with manual submission of data. But I'd still like to know how the code shud look.

    If you wudnt mind could you just add the code here for a sample formpanel broken into 2 tabs with a simple textfield in both. Cos even that dsnt seem to work in my code.

  4. #4
    Sencha User
    Join Date
    Apr 2011
    Location
    Spain
    Posts
    77
    Vote Rating
    1
    Fanny144 is on a distinguished road

      0  

    Default


    Hello!!

    Have you managed to insert a tabPanel inside a formPanel??

    I tried it, but I don't know how. Could you help me with this matter??

    Thanks

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    Quote Originally Posted by Fanny144 View Post
    Hello!!

    Have you managed to insert a tabPanel inside a formPanel??

    I tried it, but I don't know how. Could you help me with this matter??

    Thanks
    You are probably having a layout issue. This works for me to show a tabpanel within a form and submit the values:

    Code:
    new Ext.form.FormPanel({
        fullscreen : true,
        layout     : {
            type  : 'vbox',
            align : 'stretch'
        },
        items      : [
            {
                xtype : 'textfield',
                label : 'Name',
                name  : 'name'
            },
            {
                xtype : 'tabpanel',
                flex  : 1,
                items : [
                    {
                        title : 'Info',
                        items : [
                            {
                                xtype : 'textfield',
                                label : 'Country',
                                name  : 'country'
                            }
                        ]
                    },
                    {
                        title : 'Contact',
                        items : [
                            {
                                xtype : 'emailfield',
                                label : 'Email',
                                name  : 'email'
                            }
                        ]
                    }
                ]
            },
            {
                xtype   : 'button',
                text    : 'Submit',
                handler : function(button) {
                    var form = button.up('form');
    
                    form.submit({
                        url : 'data/form.php',
                        method : 'POST'
                    });
                }
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    That's just some CSS fixing to do. Functionality wise, it works
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Sencha User
    Join Date
    Jun 2012
    Posts
    80
    Answers
    2
    Vote Rating
    0
    mohaskuar is on a distinguished road

      0  

    Default samething

    samething


    I have modified the above code ...but it doesnt work for me the form Items doesnt show up
    Code:
    var form=new Ext.define('Ext.form.FormPanel',{
        fullscreen : true,
        layout     : {
            type  : 'vbox',
            align : 'stretch'
        },
        items      : [
            {
                xtype : 'textfield',
                label : 'Name',
                name  : 'name'
            },
            {
                xtype : 'tabpanel',
                flex  : 1,
                items : [
                    {
                        title : 'Info',
                        items : [
                            {
                                xtype : 'textfield',
                                label : 'Country',
                                name  : 'country'
                            }
                        ]
                    },
                    {
                        title : 'Contact',
                        items : [
                            {
                                xtype : 'emailfield',
                                label : 'Email',
                                name  : 'email'
                            }
                        ]
                    }
                ]
            },
            {
                xtype   : 'button',
                text    : 'Submit',
                handler : function(button) {
                    var form = button.up('form');
    
                    form.submit({
                        url : 'data/form.php',
                        method : 'POST'
                    });
                }
            }
        ]
    });
    Ext.define('AM.view.pll.AddVcWin' ,{
        extend: 'Ext.window.Window',
        region:'east',
        width:500,
        height:'auto',
        maximizable:true,
        modal:true,
        plain:true,
        layout: 'fit',
        //buttonAlign:'right',
        autoShow: true,
        closeAction:'hide',
        alias : 'widget.addvcwin', 
        title : 'Create new  packege',
             items:[form
    
        
    ],
    
    initComponent: function() {
            this.callParent(arguments);
    }
        
    });


    whats wrong with that?I just want tabpanels inside my form