Ext.FormPanel을 새로운 Ext.window로 렌더링 할 수 있습니까?

Question

파일을 서버에 업로드하려는 사람들과 상호 작용할 수있는 창을 팝업하고 싶습니다. 나는 새 창에서 파일 입력 양식을 렌더링 할,하지만 난 그것을 수행하여 실행 할 수 없습니다 다음 다음 renderTo() 메소드에 대한 내선 JS 문서 당으로

var win = new Ext.Window(); 
var fp = new Ext.FormPanel({ 
    renderTo: win,//I just guess that I can render this to the window I created... 
    fileUpload: true, 
    width: 500, 
    frame: true, 
    title: 'File Upload Form', 
    autoHeight: true, 
    bodyStyle: 'padding: 10px 10px 0 10px;', 
    labelWidth: 50, 
    defaults: { 
     anchor: '95%', 
     allowBlank: false, 
     msgTarget: 'side' 
    }, 
    items: [{ 
     xtype: 'textfield', 
     fieldLabel: 'Name' 
    },{ 
     xtype: 'fileuploadfield', 
     id: 'form-file', 
     emptyText: 'Select an image', 
     fieldLabel: 'Photo', 
     name: 'photo-path', 
     buttonText: '', 
     buttonCfg: { 
      iconCls: 'upload-icon' 
     } 
    }], 
    buttons: [{ 
     text: 'Save', 
     handler: function(){ 
      if(fp.getForm().isValid()){ 
       fp.getForm().submit({ 
        url: 'file-upload.php', 
        waitMsg: 'Uploading your photo...', 
        success: function(fp, o){ 
         msg('Success', 'Processed file "'+o.result.file+'" on the server'); 
        } 
       }); 
      } 
     } 
    },{ 
     text: 'Reset', 
     handler: function(){ 
      fp.getForm().reset(); 
     } 
    }] 
}); 

win.show(); 

Answer 1

:

" 구성 요소가 컨테이너의 하위 항목 인 경우이 옵션을 사용하지 마십시오. 하위 항목을 렌더링하고 관리하는 것은 컨테이너 레이아웃 관리자의 책임입니다. "

그래서 당신이해야 할 것입니다 :

1. 는

2. 이 당신의 창을 만들고 창의 항목으로은 FormPanel를 지정 renderTo 옵션없이은 FormPanel을 만듭니다.

   var win = new Ext.Window({  
   //You can specify other properties like height, width etc here as well 
   items: [fp] 
   }); 
   

당신은이 링크를 작업 바이올린을 참조 할 수 있습니다

:

http://jsfiddle.net/prashant_11235/2tgAQ/