Question

您好我正在寻找提交包含多个标签表单的表单的方法。用户必须能够通过POST提交单个提交的所有选项卡中的全部数据。主要问题是数据不会提交，除非它被显式呈现/打开，并且在提交时不包括其他未呈现的选项卡表单。：（

我一直在寻找方法，但徒劳无功。纠正我，如果我错了，这与数据绑定有关吗？

示例代码：

var fp = new Ext.FormPanel({
    renderTo: 'parti2',
    fileUpload: true,
    width: 866,
    frame: true,
    title: ' &nbsp; ',
    autoHeight: true,
    bodyStyle: 'padding: 10px 10px 0 10px;',
    labelWidth: 130,
    waitMsgTarget: 'mm_loader',
    defaults: {
        anchor: '95%',            
        msgTarget: 'side'
    },
    {
             /**** tab section ****/
            xtype:'tabpanel',
        plain:true,
        activeTab: 0,
            autoHeight:true,
        defaults:{bodyStyle:'padding:10px'},
        items:[{
            /**** new tab section ****/
           title:'Personal Details',
           layout:'form',
           defaults: {width: 230},
           defaultType: 'textfield',
            items:[{
                xtype: 'textfield',
                fieldLabel: 'First Name',
                name: 'sec2_ab1',

                },{
                xtype: 'textfield',
                fieldLabel: 'Middle Name',
                name: 'sec2_ab2',

                },{
                xtype: 'textfield',
                fieldLabel: 'Last Name',
                name: 'sec2_ab3',

                },{
                xtype: 'textfield',
                fieldLabel: 'Nationality',
                name: 'sec2_ab4'

             },{
                xtype: 'textfield',
                fieldLabel: 'Height',
                name: 'sec2_ab13',

            },{
                xtype: 'textfield',
                fieldLabel: 'Education',
                name: 'sec2_ab15',

            }]
          },{
              /**** new tab section ****/
           layout:'form',
              title: 'Contract info',
            autoHeight:true,
            defaults: {
                anchor: '95%',

                msgTarget: 'side'
            },
            defaultType: 'textfield',
            items:[ 
                {
                xtype: 'textfield',
                fieldLabel: 'Monthly Salary',
                name: 'section_ab5',

            },{
                xtype: 'textfield',
                fieldLabel: 'Work span',
                name: 'section_ab4',

            },{
                xtype: 'fileuploadfield',
                id: 'form-file',
                fieldLabel: 'Photo',
                allowBlank: true,
                msgTarget: 'side',
                name: 'anyfile1',
                buttonCfg: {
                    text: '',
                    iconCls: 'upload-icon'
                }
            }]
          },{
              /**** new tab section ****/
           title: 'Knowledge of Languages',
              layout:'form',
            autoHeight:true,
            defaults: {
                anchor: '95%',

                msgTarget: 'side'
            },
            items:[combo_kl]
          } ] /**** end tabs ****/

        },{
            html: '&nbsp;', autoHeight:true, border: false, height: 50, defaults: { anchor: '95%' }
        }
        ,{
             buttons: [{
            text: 'Reset Form',
            handler: function(){
                fp.getForm().reset();
                }
            },{
        text: 'Submit Form',
        handler: function(){
            if(fp.getForm().isValid()){
                fp.getForm().submit({
                    method:'POST',
                    url: '?handler/save',
                    waitMsg: 'Please wait as the Resume is being Send...',

                    success: function(fp, o){
                        msg('Success', 'Processed file: "'+o.result.file+'" ');
                    },
                    fail: function(fp, o) {
                            msg('Fail', 'erronious');
                    }
                });
            }
        }
    }] // button end
    }]

});

Answer 1

尝试将以下内容添加到TabPanel声明中：

deferredRender: false

这告诉TabPanel立即呈现它的所有子组件。目前，您的TabPanel仅呈现可见组件，这会导致表单提交出现问题。

Answer 2

大！那现在完美了！谢谢！：）

我还找到了另外一种方法来提交标签面板表单的参数，没有deferredRer，完全通过添加：

params: fp.getForm().getFieldValues(true)

在提交命令上。：）

fp.getForm().submit({
    method: 'POST',
    url: '?hander/save',
    waitMsg: 'Please wait for the server response...',
    params: fp.getForm().getFieldValues(true),
    success: function (fp, o) {
        msg('Success', 'Processed file: "' + o.result.file + '" ');
    },
    fail: function (fp, o) {
        msg('Fail', 'erronious');
    }
});

Extjs在Formpanel中提交多个tabpanel

2 个答案: