Extjs는 formpanel 안에 multipe tabpanel을 제출합니다.

Question

안녕하세요, 저는 여러 탭 형태가 포함 된 양식을 제출하는 방법을 찾고 있습니다. 사용자는 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 
    }] 

}); 

Answer 1

한번에 첨가에 다음이 탭 패널을 선언 :

deferredRender: false 

이것은 모두가 바로 자식 구성 요소의 렌더링하는 탭 패널을 알려줍니다 현재 당신의 탭 패널은 어떤 눈에 보이는 구성 요소를 렌더링합니다. 양식을 제출할 때 문제가 발생합니다.

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'); 
    } 
});