PDA

View Full Version : FileUploadDialog



MrTim
17 Nov 2009, 5:51 AM
Hi am am using a file upload dialog in a popup, it is all working fine and the file is uploaded. But, after i have uploaded and closed the popup and then re-open it, the fileuploaddialog element has dissapeared.. I have done view source on the code and it does not seem to be part of the code, although, the label and divs are still there. ALso there is not JS errer reported.

The only way i can make it re-appear is to close IE and start the website again

nicobarten
17 Nov 2009, 5:55 AM
And your code is...?

MrTim
17 Nov 2009, 6:10 AM
Ext.namespace('AIMS.DocumentLibrary');
AIMS.DocumentLibrary.FileUploadDialog = function(config) {
this.width = config.width || 400;
this.height = config.height || 105;
this.modal = true;
AIMS.DocumentLibrary.FileUploadDialog.superclass.constructor.call(this, config);
this.success = config.success || null;
this.url = config.url || null;
this.params = config.params || null;
this._field_FileUpload = new Ext.form.FileUploadField({
id: 'form-file',
fieldLabel: 'File',
name: 'file-path',
buttonCfg: { text: 'Browse', iconCls: 'icon-upload' },
allowBlank: false
});
this.form = null;
this.init = function() {
if (this.form) { return; }
this.form = new Ext.form.FormPanel({
myFileUploadDialog: this,
fileUpload: true,
method: 'POST',
labelWidth: 75,
plain: true,
defaults: { width: 293 },
baseCls: '',
bodyStyle: 'padding:5px 5px 0;',
items: [this._field_FileUpload]
});
this.add(this.form);
var btnCancel = new Ext.Button({
text: 'Cancel',
scope: this,
handler: function() {
this.hide();
}
});
var btnSubmit = new Ext.Action({
text: 'Upload',
myForm: this.form,
myFileUploadDialog: this,
handler: function() {
this.myForm.getForm().submit({
waitMsg: 'Uploading...',
url: this.myFileUploadDialog.url,
params: this.myFileUploadDialog.params,
success: function(form, action) {
if (form.myFileUploadDialog.success) { form.myFileUploadDialog.success(form.myFileUploadDialog); }; form.myFileUploadDialog.hide();
},
failure: function(form, action) {
Ext.Msg.show({ title: 'FileUpload Error', msg: 'There has been a file upload error, please ensure that you have selected a file to upload and that the file is of the correct type', maxWidth: 800, height: 400 });

}
});
}
});
this.addButton(btnCancel);
this.addButton(btnSubmit);

};
this.on({ beforerender: { scope: this, fn: function() { this.init(); } } });
};
Ext.extend(AIMS.DocumentLibrary.FileUploadDialog, Ext.Window, {});

nicobarten
17 Nov 2009, 6:15 AM
Maybe if you post it in CODE tags it will be more readable...

MrTim
17 Nov 2009, 6:26 AM
the code is a js included on a dynamicly created .Net platform, so there is not real html sry. I have formatted the code so it is a little easier to read Sry. I have tried to indent the code but the forum editor will not allow me too



Ext.namespace('AIMS.DocumentLibrary');

AIMS.DocumentLibrary.FileUploadDialog = function(config) {

this.width = config.width || 400;
this.height = config.height || 105;
this.modal = true;

AIMS.DocumentLibrary.FileUploadDialog.superclass.constructor.call(this, config);

this.success = config.success || null;
this.url = config.url || null;
this.params = config.params || null;


this._field_FileUpload = new Ext.form.FileUploadField({
id: 'form-file',
fieldLabel: 'File',
name: 'file-path',
buttonCfg: { text: 'Browse', iconCls: 'icon-upload' },
allowBlank: false
});
this.form = null;

this.init = function() {

if (this.form) { return; }
this.form = new Ext.form.FormPanel({
myFileUploadDialog: this,
fileUpload: true,
method: 'POST',
labelWidth: 75,
plain: true,
defaults: { width: 293 },
baseCls: '',
bodyStyle: 'padding:5px 5px 0;',
items: [this._field_FileUpload]
});

this.add(this.form);

var btnCancel = new Ext.Button({

text: 'Cancel',
scope: this,
handler: function() {
this.hide();
}
});
var btnSubmit = new Ext.Action({

text: 'Upload',
myForm: this.form,
myFileUploadDialog: this,
handler: function() {
this.myForm.getForm().submit({
waitMsg: 'Uploading...',
url: this.myFileUploadDialog.url,
params: this.myFileUploadDialog.params,
success: function(form, action) {
if (form.myFileUploadDialog.success) { form.myFileUploadDialog.success (form.myFileUploadDialog); }; form.myFileUploadDialog.hide();
},
failure: function(form, action) {
Ext.Msg.show({ title: 'FileUpload Error', msg: 'There has been a file upload error, please ensure that you have selected a file to upload and that the file is of the correct type', maxWidth: 800, height: 400 });

}
});
}
});
this.addButton(btnCancel);
this.addButton(btnSubmit);

};
this.on({ beforerender: { scope: this, fn: function() { this.init(); } } });
};
Ext.extend(AIMS.DocumentLibrary.FileUploadDialog, Ext.Window, {});

Condor
17 Nov 2009, 6:27 AM
Strange way to extend a window...

I would have used:

Ext.namespace('AIMS.DocumentLibrary');
AIMS.DocumentLibrary.FileUploadDialog = Ext.extend(Ext.Window, {
constructor: function(config){
this._field_FileUpload = new Ext.form.FileUploadField({
id: 'form-file',
fieldLabel: 'File',
name: 'file-path',
buttonCfg: {
text: 'Browse',
iconCls: 'icon-upload'
},
allowBlank: false
});
this.form = new Ext.form.FormPanel({
myFileUploadDialog: this,
fileUpload: true,
method: 'POST',
labelWidth: 75,
plain: true,
defaults: {
width: 293
},
baseCls: '',
bodyStyle: 'padding:5px 5px 0;',
items: [this._field_FileUpload]
});
var btnCancel = new Ext.Button({
text: 'Cancel',
scope: this,
handler: function () {
this.hide();
}
});
var btnSubmit = new Ext.Action({
text: 'Upload',
myForm: this.form,
myFileUploadDialog: this,
handler: function () {
this.myForm.getForm().submit({
waitMsg: 'Uploading...',
url: this.myFileUploadDialog.url,
params: this.myFileUploadDialog.params,
success: function (form, action) {
if (form.myFileUploadDialog.success) {
form.myFileUploadDialog.success(form.myFileUploadDialog);
};
form.myFileUploadDialog.hide();
},
failure: function (form, action) {
Ext.Msg.show({
title: 'FileUpload Error',
msg: 'There has been a file upload error, please ensure that you have selected a file to upload and that the file is of the correct type',
maxWidth: 800,
height: 400
});
}
});
}
});
AIMS.DocumentLibrary.FileUploadDialog.superclass.constructor.call(this, Ext.apply({
width: 400,
height: 105,
modal: true,
items: this.form,
buttons: [btnCancel, btnSubmit]
}, config));
}
});

MrTim
17 Nov 2009, 6:28 AM
I have to work within a framework so i dont have much choice, lol