我可以渲染一個Ext.FormPanel到一個新的Ext.window嗎？

Question

我想彈出一個窗口與想要將文件上傳到服務器的人進行交互。我要呈現在新窗口中的文件輸入形式，但我不能讓它做運行如下：

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

按照有關renderTo（）方法的Ext JS文檔：

「如果組件要成爲容器的子項，則不要使用此選項。容器的佈局管理器有責任渲染和管理其子項。「

所以，你需要做的是：

1. 沒有renderTo選項

2. 創建你的窗口和指定FormPanel中作爲窗口的項目創建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/