Results 1 to 7 of 7

Thread: TabPanel inside FormPanel

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    Mumbai, India
    Posts
    120
    Answers
    11
    Vote Rating
    4
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    Mumbai, India
    Posts
    120
    Answers
    11
    Vote Rating
    4
      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
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  6. #6
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      1  

    Default

    That's just some CSS fixing to do. Functionality wise, it works
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  7. #7
    Sencha User
    Join Date
    Jun 2012
    Posts
    81
    Answers
    2
    Vote Rating
    0
      0  

    Default 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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •