PDA

View Full Version : Panel's form reset is nullifying the hidden field's values



natts_82
14 Apr 2010, 1:20 AM
Hello Gurus,

I am using ext 3.0. I have a dynamic fileupload panel, which i used to perform multiple file uploads.

I have a reset button, on click of which I reset the panel's form and also remove the items (otherwise the multiple fileupload fields added will not vanish from ui).

After reset, when I try to perform upload, the hiddenfield in the form gets nullified. Please take a look at the code:



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: [{
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);
fileCounter = 1;
}
});
}
hiddenField = new Ext.form.Hidden({
name: 'userId',
value: userIdJs
});
}
}]
});
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] });



As you can notice, I again try to reset the hidden field's value like how it is set in the beginning, but the value is coming as null on the server side.

Can you please throw pointers on - how to reset the value of the hidden variable properly after reset, how to alert the hiddenfield's value on client side just to verify.

Thanks a lot in advance !

Regards,
Nataraja

natts_82
14 Apr 2010, 5:28 AM
Hello Gurus,

I am trying to add and remove using Ext.getComp(file-form).add / remove.

But, when I click on More Files button, nothing gets added. The revised code is:




var fileCounter = 1;

var hiddenField = new Ext.form.Hidden({
name: 'userId',
value: userIdJs
});

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>'
});


function addNewRow(rowCounter){

Ext.getCmp('form-file').add({
xtype: 'fileuploadfield',
id: 'form-file' + fileCounter,
emptyText: 'Upload a CSV file containing the subscription information',
fieldLabel: 'File ' + fileCounter,
name: 'files',
buttonText: 'Browse'
});
}

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: [{
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'
// });
addNewRow(fileCounter);
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);
Ext.getCmp('form-file').remove(i);
fileCounter = 1;
}
});
}
//this.hiddenField.dom.value = userIdJs;
}
}]
});
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] });




Kindly advise on resolving this.

Regards,
Nataraja

natts_82
15 Apr 2010, 10:04 PM
Hello Gurus,

I was able to resolve the issue. Although I am removing the panel, I am not removing certain elements from the form, like the default
fileuploadfield. Similarly, I gave an id to hidden field, and while conditionally removing the panel's items, I remove everything else apart from the hidden field and the default fileuploadfield. This preserved the value of the hiddenfield always.

Regards,
Nataraja