Can I render a Ext.FormPanel to a new Ext.window? - extjs

Question

I want to popup a window to interact with people who want to upload a file to server. I want to render a file input form in the new window, but I can't make it run by doing follows:
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

As per the Ext JS documentation about the renderTo() method:
"Do not use this option if the Component is to be a child item of a Container. It is the responsibility of the Container's layout manager to render and manage its child items."
So what you need to do is:
Create the formPanel without the renderTo option
Create your window and specify the formPanel as an item of the window.
var win = new Ext.Window({
//You can specify other properties like height, width etc here as well
items: [fp]
});
You can refer to a working fiddle on this link:
http://jsfiddle.net/prashant_11235/2tgAQ/