Extjs отправляет несколько вкладок внутри Formpanel - PullRequest
Новая
       18

Extjs отправляет несколько вкладок внутри Formpanel

5 голосов
/ 07 февраля 2011

Привет, я ищу способ отправить форму, которая содержит несколько вкладок форм.Пользователь должен иметь возможность отправить все данные со всех вкладок за одну отправку 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
    }]

});

Ответы [ 2 ]

8 голосов
/ 11 февраля 2011

Попробуйте добавить следующее в объявление TabPanel: 

deferredRender: false

Это говорит TabPanel немедленно визуализировать все его дочерние компоненты. В настоящее время ваша TabPanel отображает только видимые компоненты, что вызывает проблемы с отправкой формы.

5 голосов
/ 13 февраля 2011

Отлично!Теперь это прекрасно работает!Спасибо!:)

Я также нашел другой способ передать параметры формы панели вкладок без 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');
    }
});
...