5

こんにちは、複数のタブ付きフォームを含むフォームを送信する方法を探しています。ユーザーは、POST による 1 回の送信で、すべてのタブからデータ全体を送信できる必要があります。主な問題は、データが明示的にレンダリング/開かれない限り送信されず、送信時にレンダリングされていない他のタブフォームが含まれないことです。:(

私は方法を探していましたが、無駄です。間違っている場合は修正してください。これはデータバインディングと関係がありますか?

サンプルコード:

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 に答える