Results 1 to 3 of 3

Thread: Form not submitting with tabbed panel inide it

  1. #1
    Ext User
    Join Date
    Jul 2009
    Location
    New Delhi, India
    Posts
    5

    Default Form not submitting with tabbed panel inide it

    Hi all,
    I am new to ExtJs, Just started today morning .
    Well I have a problem! I have created a sample form, which has to submit data. It has tabbed panels in it. The problem I am facing is that:

    * Whenever I click the save button, Only the fields from first tab gets posted.
    * Only if I open the second panel and then click save, then the fields from second panel also gets posted.
    Following is the source code
    Code:
    function create_candidate_window()
    {
        var candidate_form = new Ext.form.FormPanel({
            method: 'get',
            url: 'ext.html',
            border: false,
            items:[{
                xtype:'tabpanel',
                activeTab:0,
                anchor:'100% 100%',
                items:[{
                    title:'Peronal Details',
                    frame:true,
                    layout:'column',
                    labelWidth:100,
                    defaults:{padding: 5},
                    items:[{
                    columnWidth: .5,
                    layout: 'form',
                    defaults:{xtype:'textfield', anchor:'100%'},
                    items: [{
                        fieldLabel: 'First Name',
                        name: 'first_name',
                        },{
                        fieldLabel: 'Middle Name',
                        name: 'middle_name',
                        },{
                        fieldLabel: 'Last Name',
                        name: 'last_name',
                        }]
                    },{
                    columnWidth: .5,
                    layout: 'form',
                    defaults:{xtype:'textfield', anchor:'100%'},
                    items: [{
                        fieldLabel: 'Phone Number',
                        name: 'phone_number',
                        },{
                        fieldLabel: 'Email Address',
                        name: 'email_address',
                        },{
                        fieldLabel: 'Web Link',
                        name: 'web_address',
                        }]
                    },{
                    columnWidth: 1,
                    layout: 'form',
                    defaults:{xtype:'textfield', anchor:'100%'},
                    items: [{
                        xtype: 'textarea',
                        fieldLabel: 'Street Address',
                        name: 'address',
                        }]
                    },{
                    columnWidth: .5,
                    layout: 'form',
                    defaults:{xtype:'textfield', anchor:'100%'},
                    items: [{
                        fieldLabel: 'City',
                        name: 'city',
                        }]
                    },{
                    columnWidth: .5,
                    layout: 'form',
                    defaults:{xtype:'textfield', anchor:'100%'},
                    items: [{
                        fieldLabel: 'State',
                        name: 'state',
                        }]
                    },{
                    columnWidth: .5,
                    layout: 'form',
                    defaults:{xtype:'textfield', anchor:'100%'},
                    items: [{
                        fieldLabel: 'Gender',
                        name: 'gender',
                        },{
                        fieldLabel: 'Date Of Birth',
                        name: 'dob',
                        xtype: 'datefield'
                        },{
                        fieldLabel: 'Marital Status',
                        name: 'matital',
                        },{
                        fieldLabel: 'Girls',
                        name: 'girls',
                           },{
                        fieldLabel: 'Boys',
                        name: 'boys',
                        }]
                    },{
                    columnWidth: .5,
                    layout: 'form',
                    defaults:{xtype:'textfield', anchor:'100%'},
                    items: [{
                        fieldLabel: 'Spouse Name',
                        name: 'spouse',
                        },{
                        fieldLabel: 'Anniversary',
                        name: 'anniversary',
                        xtype: 'datefield'
                        }]
                    }]
                },{
                title: 'Academics',
                layout: 'form',
                    defaults:{xtype:'textfield', anchor:'100%'},
                    items: [{
                        fieldLabel: 'Company Name',
                        name: 'company',
                        },{
                        fieldLabel: 'From Date',
                        name: 'fromdate',
                        xtype: 'datefield'
                        }]
                }]
            }]
        })
        
        var candidate_panel = new Ext.Window({
        
        title:'New Candidate Form',
        width:640,
        height:480,
        layout:'fit',
        items:[candidate_form],
        buttons:[{
            text: 'Save',
            handler: function(){
                form = candidate_form.getForm();  
                form_as_dom = form.getEl().dom;  
                form_as_dom.action = form.url;  
                form_as_dom.submit();         
    /*                candidate_form.getForm().submit({
                            method:'GET', 
                            waitTitle:'Connecting', 
                            waitMsg:'Sending data...',
                            success:function(){ 
                                   Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){
                                if (btn == 'ok'){
                                    var redirect = 'dashboard.php';
                                    document.location = redirect;
                                }
                            });
                            },
     
                            failure:function(form, action){ 
                                if(action.failureType == 'server'){ 
                                    obj = Ext.util.JSON.decode(action.response.responseText); 
                                    Ext.Msg.alert('Login Failed!', obj.errors.reason); 
                                }else{ 
                                    Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText); 
                                } 
                                candidate_form.getForm().reset(); 
                            } 
                    });*/
            }
        },{
        text:'Cancel'
        }]
        ,tbar:[{
            xtype:'datefield'
            }, '-', {
            text:'Button'
            }]
        });
        candidate_panel.show();
        
    }
    Can anybody please tell me what is wrong? I ahve also checked dynamic.js file from ExtJs's examples page.

    Regards

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    1. Make your formpanel layout:'fit' instead of using anchor:'100% 100%' in the tabpanel.
    2. Add the following options to the tabpanel config:
    Code:
    deferredRender: false,
    layoutOnTabChange: true,
    defaults: {hideMode: 'offsets'}
    (you were looking for deferredRender:false and the other 2 options are required to make the other pages display properly when setting deferredRender:false)

  3. #3
    Ext User
    Join Date
    Jul 2009
    Location
    New Delhi, India
    Posts
    5

    Default

    Thanks a million buddy for such a swift reply. It's working now.
    Cheers!

Posting Permissions

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