PDA

View Full Version : uploadfield inside formpanel



gkassyou
13 May 2010, 1:00 PM
I have a formpanel with several tabs that contain fields, as well as another tab that allows to upload images using the uploadfield. I want to separate the two form submits but can't seem to render the uploadfield separately. Any ideas?

14 May 2010, 3:48 AM
are you wrapping it in a form?

gkassyou
14 May 2010, 9:19 AM
yes, basically the tabbed form panel listingForm wraps the formUploadPanel.


var listingForm = new Ext.FormPanel({
frame: true,
labelAlign: 'top',
title: 'Property Listing',
renderTo: 'listingForm',
bodyStyle: 'padding:5px',

......

{
title: 'Photos',
layout: 'fit',
items: new ListingPhotosPanel() //Creates the fileUploadPanel

}



fileUpload = new Ext.ux.form.FileUploadField({
id: 'form-file',
emptyText: 'Select an image',
fieldLabel: 'Photo',
name: 'file',
buttonText: '',
buttonCfg: {
iconCls: 'upload-icon'
}
});

var formUploadPanel = new Ext.FormPanel({
renderTo: 'uploadForm',
fileUpload: true,
width: 500,
frame: true,
title: 'Photo Upload',
autoHeight: true,
bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 50,
defaults: {
anchor: '95%',
allowBlank: false,
msgTarget: 'side'
},
items: [{
xtype: 'textfield',
name: 'photoDescription',
fieldLabel: 'Name'
}, fileUpload
],
buttons: [{
text: 'Save',
handler: function(){
if (listingID != '') {
if (fp.getForm().isValid()) {
var filepath = fileUpload.getValue();
fp.getForm().submit({
url: appfilepath + 'listingJSON.taf?function=uploadListingPhoto',
params: {listingID: listingID,filepath: filepath},
waitMsg: 'Uploading your photo...',
success: function(fp, o){
Ext.Msg.alert('Success', 'Photo was uploaded successfully');
listingPhotosDS.reload();
}
});
}
} else {
Ext.Msg.alert('Error','You must first save the listing before uploading a photo.');
}
}
}, {
text: 'Reset',
handler: function(){
fp.getForm().reset();
}
}]
});

gkassyou
15 May 2010, 4:30 AM
Not sure why my previous reply didn't post.

Anyhow yes I'm wrapping the fileupload in a formpanel inside the main formpanel tab.


var listingForm = new Ext.FormPanel({
frame: true,
labelAlign: 'top',
title: 'Property Listing',
renderTo: 'listingForm',
bodyStyle: 'padding:5px',
width: 600,
.........

// Another Tab here
{
title: 'Photos',
layout: 'fit',
items: new ListingPhotosPanel()

}

listingPhotosPanel is a borderLayout with north region containing the upload


var formUploadPanel = new Ext.FormPanel({
renderTo: 'uploadForm', //I don't want to render to here but only way to get it to display.
fileUpload: true,
width: 500,
frame: true,
title: 'Photo Upload',
autoHeight: true,
bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 50,
defaults: {
anchor: '95%',
allowBlank: false,
msgTarget: 'side'
},
items: [{
xtype: 'textfield',
name: 'photoDescription',
fieldLabel: 'Name'
}, fileUpload
],
buttons: [{........

symx
16 May 2010, 3:01 AM
I think you're not supposed to have a formpanel inside another formpanel. it's like having a form in a form in html. Doesn't work

gkassyou
16 May 2010, 3:51 AM
The functionality works so that I'm able to upload images using the fileUploadFormPanel, and I can submit my parent form elements on submit. The only issue is the rendering. The fileUploadFormPanel only renders to the main body at page load. If the main form panel is resized or when I click on the photo's tab that contains the fileUploadFormPanel, it gets rendered correctly inside.

gkassyou
17 May 2010, 9:00 AM
I still couldn't get it to work so my work around was to open the formuploadPanel in a window.