Results 1 to 9 of 9

Thread: Submit Form Containing Tabpanel Not Submitting All Fields

  1. #1
    Sencha User
    Join Date
    Sep 2008
    Posts
    85

    Default Submit Form Containing Tabpanel Not Submitting All Fields

    I have a popup window that contains a form. The form contains a TabPanel. The TabPanel contains 3 tabs. Each tab contains a Panel. Each panel (on each tab) contains several entry fields. Each entry field has a default value. If the user accepts the defaults and hits the submit button only the active tab's entry fields are sent to the server. In order for the entry fields on all three panels to be sent to the server the user has to select all three tabs. This is not acceptable to the user. How do I get the form to send all the fields across all the tabs?

    Code:
    Ext.onReady(function(){
    
        var fPanel1 = new Ext.Panel({
            title: 'Tab 1',
            id: 'Panel1',
            labelWidth: 150,
            bodyStyle: 'padding:3px 3px 0',
            items: [{
                layout:'column',
                items:[
                    {layout:'form',columnWidth:.5,items:
                    [
                        {xtype:'textfield', fieldLabel: 'Field 1.1', width:175, anchor:'95%', name: 'field_1_1', selectOnFocus:true, value:'1.1'},
                        {xtype:'textfield', fieldLabel: 'Field 1.2', width:175, anchor:'95%', name: 'field_1_2', selectOnFocus:true, value:'1.2'},
                        {xtype:'textfield', fieldLabel: 'Field 1.3', width:175, anchor:'95%', name: 'field_1_3', selectOnFocus:true, value:'1.3'},
                        {xtype:'textfield', fieldLabel: 'Field 1.4', width:175, anchor:'95%', name: 'field_1_4', selectOnFocus:true, value:'1.4'}
                    ]},
                    {layout:'form',columnWidth:.5,items:
                    [
                        {xtype:'textfield', fieldLabel: 'Field 1.5', width:175, anchor:'95%', name: 'field_1_5', selectOnFocus:true, value:'1.5'},
                        {xtype:'textfield', fieldLabel: 'Field 1.6', width:175, anchor:'95%', name: 'field_1_6', selectOnFocus:true, value:'1.6'},
                        {xtype:'textfield', fieldLabel: 'Field 1.7', width:175, anchor:'95%', name: 'field_1_7', selectOnFocus:true, value:'1.7'},
                        {xtype:'textfield', fieldLabel: 'Field 1.8', width:175, anchor:'95%', name: 'field_1_8', selectOnFocus:true, value:'1.8'}
                    ]}
                ]
            }],
            layoutConfig:{
                animate:true
            },
            border:false
        });
    
        var fPanel2 = new Ext.Panel({
            title: 'Tab 2',
            id: 'Panel2',
            labelWidth: 150,
            bodyStyle: 'padding:3px 3px 0',
            items: [{
                layout:'column',
                items:[
                    {layout:'form',columnWidth:.5,items:
                    [
                        {xtype:'textfield', fieldLabel: 'Field 2.1', width:175, anchor:'95%', name: 'field_2_1', selectOnFocus:true, value:'2.1'},
                        {xtype:'textfield', fieldLabel: 'Field 2.2', width:175, anchor:'95%', name: 'field_2_2', selectOnFocus:true, value:'2.2'},
                        {xtype:'textfield', fieldLabel: 'Field 2.3', width:175, anchor:'95%', name: 'field_2_3', selectOnFocus:true, value:'2.3'},
                        {xtype:'textfield', fieldLabel: 'Field 2.4', width:175, anchor:'95%', name: 'field_2_4', selectOnFocus:true, value:'2.4'}
                    ]},                                                                                                                      
                    {layout:'form',columnWidth:.5,items:                                                                                     
                    [                                                                                                                        
                        {xtype:'textfield', fieldLabel: 'Field 2.5', width:175, anchor:'95%', name: 'field_2_5', selectOnFocus:true, value:'2.5'},
                        {xtype:'textfield', fieldLabel: 'Field 2.6', width:175, anchor:'95%', name: 'field_2_6', selectOnFocus:true, value:'2.6'},
                        {xtype:'textfield', fieldLabel: 'Field 2.7', width:175, anchor:'95%', name: 'field_2_7', selectOnFocus:true, value:'2.7'},
                        {xtype:'textfield', fieldLabel: 'Field 2.8', width:175, anchor:'95%', name: 'field_2_8', selectOnFocus:true, value:'2.8'}
                    ]}
                ]
            }],
            layoutConfig:{
                animate:true
            },
            border:false
        });
    
        var fPanel3 = new Ext.Panel({
            title: 'Tab 3',
            id: 'Panel3',
            labelWidth: 150,
            bodyStyle: 'padding:3px 3px 0',
            items: [{
                layout:'column',
                items:[
                    {layout:'form',columnWidth:.5,items:
                    [
                        {xtype:'textfield', fieldLabel: 'Field 3.1', width:175, anchor:'95%', name: 'field_3_1', selectOnFocus:true, value:'3.1'},
                        {xtype:'textfield', fieldLabel: 'Field 3.2', width:175, anchor:'95%', name: 'field_3_2', selectOnFocus:true, value:'3.2'},
                        {xtype:'textfield', fieldLabel: 'Field 3.3', width:175, anchor:'95%', name: 'field_3_3', selectOnFocus:true, value:'3.3'},
                        {xtype:'textfield', fieldLabel: 'Field 3.4', width:175, anchor:'95%', name: 'field_3_4', selectOnFocus:true, value:'3.4'}
                    ]},                                                                                                                      
                    {layout:'form',columnWidth:.5,items:                                                                                     
                    [                                                                                                                        
                        {xtype:'textfield', fieldLabel: 'Field 3.5', width:175, anchor:'95%', name: 'field_3_5', selectOnFocus:true, value:'3.5'},
                        {xtype:'textfield', fieldLabel: 'Field 3.6', width:175, anchor:'95%', name: 'field_3_6', selectOnFocus:true, value:'3.6'},
                        {xtype:'textfield', fieldLabel: 'Field 3.7', width:175, anchor:'95%', name: 'field_3_7', selectOnFocus:true, value:'3.7'},
                        {xtype:'textfield', fieldLabel: 'Field 3.8', width:175, anchor:'95%', name: 'field_3_8', selectOnFocus:true, value:'3.8'}
                    ]}
                ]
            }],
            layoutConfig:{
                animate:true
            },
            border:false
        });
        
        var fTabPanel = new Ext.TabPanel({
            resizeTabs: true, 
            minTabWidth: 115,
            tabWidth: 135,
            enableTabScroll: true,
            activeTab: 1,
            layoutOnTabChange: true
        });
        
        fTabPanel.add(fPanel1).show();
        fTabPanel.add(fPanel2).show();
        fTabPanel.add(fPanel3).show();
        fTabPanel.doLayout();
        fTabPanel.activate('Panel1');
        fTabPanel.setActiveTab(fPanel1);
    
        var fForm = new Ext.form.FormPanel({
            labelWidth :100,
            border :false,
            frame :true,
            bodyStyle :'padding:3px 3px 0',
            autoDestroy :false,
            onFailure : function(form, action) {
                alert(action.result.error || action.response.responseText);
            },
            items :[fTabPanel]
        });
    
        var GeneralEditWindow = new Ext.Window({
            closeAction :'hide',
            iconCls :'optsIcon',
            title : 'Tab form window',
            width :850,
            height :475,
            layout :'fit',
            plain :true,
            modal :true,
            items :[fForm]
        });
        
        var submit = GeneralEditWindow.addButton({text :'Submit', handler : submitGeneralEditWindow});
    
        GeneralEditWindow.show();
        
        function submitGeneralEditWindow()
        {
            fForm.getForm().submit({url :'dumpData', waitMsg :'Saving Data...'});
        }
    
        fForm.on({actioncomplete : function(form, action) {
            if (action.type == 'submit') 
            {
                GeneralEditWindow.destroy();
            }
        }});
        
    });

  2. #2

    Default

    only fields from an active tab are submitted if the following line is not persent

    Code:
    deferredRender:false

  3. #3
    Sencha User
    Join Date
    Sep 2008
    Posts
    85

    Default

    Quote Originally Posted by SchattenMann View Post
    only fields from an active tab are submitted if the following line is not persent

    Code:
    deferredRender:true
    Does this go in each Panel that makes up a tab, the TabPanel itself, the From or the Window? Sorry for the dumb question, but I have so many objects on this popup I get lost real quick.

    Thanks!

  4. #4
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    I believe that's: only fields from rendered tabs will be sent, thus:

    deferredRender : false
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  5. #5

    Default

    indeed my bad!

    you have to put deferredRender:false in tabpanel

    Code:
    {
    xtype:'tabpanel',
    deferredRender:false,
    items:[]
    }

  6. #6
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    Quote Originally Posted by jurban View Post
    Does this go in each Panel that makes up a tab, the TabPanel itself, the From or the Window? Sorry for the dumb question, but I have so many objects on this popup I get lost real quick.

    Thanks!
    That belongs on the TabPanel config.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  7. #7
    Sencha User
    Join Date
    Sep 2008
    Posts
    85

    Default

    Quote Originally Posted by SchattenMann View Post
    indeed my bad!

    you have to put deferredRender:false in tabpanel

    Code:
    {
    xtype:'tabpanel',
    deferredRender:false,
    items:[]
    }
    Thanks, that did the trick!

    This thread can be closed.

  8. #8

    Join Date
    Sep 2007
    Location
    Manchester, Connecticut, USA
    Posts
    100

    Default

    I had this same problem. Thanks for answering my question. That did the trick!

    --Stewart McGuire

  9. #9

Posting Permissions

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