5

嗨，我正在寻找一种提交包含多个选项卡式表单的表单的方法。用户必须能够通过 POST 一次提交从所有选项卡提交全部数据。主要问题是数据不会提交，除非它被明确呈现/打开，并且在提交时不包括其他未呈现的选项卡表单。:(

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

示例代码：

var fp = new Ext.FormPanel({
    renderTo: 'parti2',
    fileUpload: true,
    width: 866,
    frame: true,
    title: '   ',
    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: ' ', 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
    }]

});
4

2 回答 2

8

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

deferredRender: false

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

于 2011-02-11T17:04:29.983 回答
5

伟大的！现在效果很好！谢谢！:)

我还找到了其他方法来提交选项卡面板表单的参数，没有 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');
    }
});
于 2011-02-13T13:15:44.820 回答