strange form upload issue

[topcoder1]

I am working with an multi-part form in a dialog, I have found that if I use construct the form using var top= new Ext.form.Form('form_ct',{config});
the file won't transfer to the server side(the form is simply rendered incorrectly, POST_DATA doesn't contain the file data), but if I use var top=Ext.form.Form({config}) then everything works. the form is rendered using top.render('form_ct'); in both cases. I don't know why specifying the container id would make any difference... you can reproduce this behavior using the following code plus some server side code.
has anyone encountered the same problem? is this a ext bug or am I making some silly mistakes...

html code


<div id="my_dlg" style="visibility:hidden;">
<div class="x-dlg-hd"></div>
<div class="x-dlg-bd">


<div id="form_ct" >

</div>

</div>
</div>

ext code


var top=new Ext.form.Form({
labelWidth: 50,
labelAlignt: 'right',
//name: 'uploadForm',
fileUpload : true,
method: 'POST',
url:'test.php'

});


var dialog = new Ext.LayoutDialog('my_dlg', {
autoCreate: true,
width: 680,
height: 400,
modal: false,
closable:true,
resizable:true,
draggable:true,
collapsible:false,
title:'Submit'
});

var input=new Ext.form.TextField({
fieldLabel: '<b>mytext',
name: 'mytext',
width:300
});
var fileField = new Ext.form.TextField({
msgTarget: 'side',
allowBlank: false,
id: 'fileUpload',
inputType: 'file',
name: 'fileUpload',
fieldLabel: 'or <b>File',
width: 300
//,blankText: 'You must choose a file'
});



top.add(
//{width:282}, // precise column sizes or percentages or straight CSS
input
);
top.add(fileField);

top.addButton({
text: 'Save',
handler: function(){

top.submit({url:'action_saveform.php',enctype: 'multipart/form-data', waitMsg:'Submitting ...'});
}

});
top.addButton({
text:'Cancel',
handler:function(){
dialog.hide();
}

});
top.render("form_ct");