PDA

View Full Version : Multiple fileupload panels not resetting properly



natts_82
8 Apr 2010, 5:02 AM
Hello Gurus,

I am working with ext3.0.0. I use file upload forms ( a form panel marked as fileupload as true). One fileupload field will always be there. Other fileupload fields can be added dynamically. When I press reset button, I want these added panels to be removed, and I should have only the first one being on the UI (the default ).

I achieve this reset by performing remove explicitly. However, after performing reset, I see that, my upload functionality does not work as desired. When I click on browse and select a file, this file does not get selected (not shown on the field), so upload wont proceed further (I cannot perform save).

I have to refresh the page to come out of this issue.

The code for my form is as follows.



var fileCounter = 1;


var msg = function(title, msg){
Ext.Msg.show({
title: title,
msg: msg,
minWidth: 200,
modal: true,
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK
});
};


var instructionsPanel = new Ext.Panel({
title: 'Instructions',
anchor: '50%', // instead of width: 400
height: 135,
layout: 'fit',
html: '<table width=100% height=100% class="bgFill9"><font size=2> Upload a CSV file with list of assets in the format: <br> Identifier Type,Identifier <br><br> Example: <br>Identifier Type,Identifier <br> ISIN,US07384YLK00 <br><br> Note: Only 25000 assets are allowed in a csv file </font></table>'
});
var intermediatePanel = new Ext.FormPanel({
fileUpload: true,
anchor: '50%', // instead of width: 400
frame: true,
title: 'File Upload Form',
autoHeight: true,
bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 50,
layout: 'form',
defaults: {
allowBlank: false,
msgTarget: 'side',
anchor: '50%' // I assume you want the fileuploadfields anchored at 50%?
},
items: [{
//default fileupload field
xtype: 'fileuploadfield',
id: 'form-file',
emptyText: 'Upload a CSV file containing the subscription information',
fieldLabel: 'File 1',
name: 'files',
buttonText: 'Browse'
},
hiddenField = new Ext.form.Hidden({
name: 'userId',
value: userIdJs
})],
buttons: [{
text: 'More Files',
handler: function () {
if(fileCounter <= 3)
{
fileCounter++;
intermediatePanel.add({
xtype: 'fileuploadfield',
id: 'form-file' + fileCounter,
emptyText: 'Upload a CSV file containing the subscription information',
fieldLabel: 'File ' + fileCounter,
name: 'files',
buttonText: 'Browse'
});
intermediatePanel.doLayout();
loadSpecificCard(1);
loadSpecificCard(4);
}
}
},
{
text: 'Upload',
handler: function () {
if (intermediatePanel.getForm().isValid()) {
intermediatePanel.getForm().submit({
url: '/rdrim-webapp/rdrimUI/upload.action',
waitMsg: 'Uploading the files...',
scope: this,
success: this.onSuccess,
failure: this.onFailure
});
}
},
onSuccess: function (form, action) {
msg('Success', 'Successfully uploaded ' + action.result.files + ' files.');
intermediatePanel.getForm().reset();
},
onFailure: function (form, action) {
this.showError(action.result.error || action.response.responseText);
},
showError: function (msg, title) {
title = title || 'Error';
Ext.Msg.show({
title: title,
msg: msg,
modal: true,
icon: Ext.Msg.ERROR,
buttons: Ext.Msg.OK,
maxWidth:1200,
minWidth:600
});
}
},
{
text: 'Reset',
handler: function () {
intermediatePanel.getForm().reset();
var j=0;
// Reason for this...some of the items do not get removed in a single iteration...need to look further
for (j=0; j<10; j++) {
var fileUploadItem = intermediatePanel.items.find(function (i) {
if (i != null && i.id != null && i.id != 'form-file') {
intermediatePanel.remove(i);
}
});
}
}
}]
});
var fileUploadPanel = new Ext.Panel({
id: 'fileUploadPanel',
title: 'File Upload',
border: true,
layout: 'anchor',
//layoutConfig: {
//columns: 1 not valid for anchor layout
//},
width: 400, // specify with in container
//defaults: {
//anchor: '50%' moved to children
//},
items: [instructionsPanel, intermediatePanel] });


Please throw some pointers to resolve the issue.

Regards,
Nataraja.

tubamanu
8 Apr 2010, 11:27 PM
i've done a dynamic fileupload some months ago, i used an grid with toolbar and icon to add fileupload items dynamically. for each fileupload file i've rendered a remove button, this works without problems. when removing a file, i remove the row from the grid.

my remove function is a bit different, have u tried



for (j=1; j<fileCounter; j++) {
Ext.getCmp('form-file' + j).destroy();
}

natts_82
9 Apr 2010, 12:32 AM
Thanks a lot Manu. I have resolved this issue by adding one more listener, that would explicitly fire an event on hitting reset button.

Thanks again.

Regards,
Nataraja