PDA

View Full Version : How do you set a FormPanel's encoding type to multipart/form-data?



Jul
3 Feb 2010, 1:46 AM
The google search returns several examples for setting a FormPanel's encoding type to multipart/form-data. The problem is that those examples are all based on Ext 2.0. Using the code doesn't seem to work in 3.x.

What is the standard way to set this in Ext 3.x? The enctype: parameter seemed like a good way to switch the encoding... but I'm assuming it was removed since it no longer works.

I tried:

var theFormPanel = new Ext.FormPanel({
frame: true,
labelAlign: 'right',
defaultType: 'textfield',
autoHeight: true,
buttonAlign:'center',
headers: {'Content-Type':'multipart/form-data; charset=UTF-8'},

items: [
{
fieldLabel: 'Regex',
name:'val1',
maxLength: 255,
anchor:'95%',
xtype:'textarea'
},
{
fieldLabel: 'Target',
name:'val2',
maxLength: 255,
anchor:'95%'
},
{
fieldLabel: 'Notes',
name:'val3',
maxLength: 255,
anchor:'95%'
}
],

reader: new Ext.data.JsonReader({
root: 'route'
},
[
{name:'val1'},
{name:'val2'},
{name:'val3'}
]
)
}
);


and


var theFormPanel = new Ext.FormPanel({
frame: true,
labelAlign: 'right',
defaultType: 'textfield',
autoHeight: true,
buttonAlign:'center',
enctype : 'multipart/form-data',

items: [
{
fieldLabel: 'Regex',
name:'val1',
maxLength: 255,
anchor:'95%',
xtype:'textarea'
},
{
fieldLabel: 'Target',
name:'val2',
maxLength: 255,
anchor:'95%'
},
{
fieldLabel: 'Notes',
name:'val3',
maxLength: 255,
anchor:'95%'
}
],

reader: new Ext.data.JsonReader({
root: 'route'
},
[
{name:'val1'},
{name:'val2'},
{name:'val3'}
]
)
}
);


I also tried the headers and enctype keys in the submit, but I got the same results: the form is always submitted with this encoding: application/x-www-form-urlencoded; charset=UTF-8

Thanks for any help you can provide.

- Jul

Drayton
3 Feb 2010, 5:20 AM
You can set headers as an option to form.submit();

Quick and dirty example that can be run directly in the firebug console:


new Ext.Window({
title: 'test',
closable: true,
height: 400,
width: 400,
items: [{
id: 'myForm',
xtype: 'form',
defaultType: 'textfield',
items: [{
name: 'myField',
anchor: '100%'
}],
buttons:[{
text: 'submit',
handler: function(b,e){
var f = Ext.getCmp('myForm').getForm();
f.submit({
url: 'test.php',
headers: {'Content-Type':'multipart/form-data; charset=UTF-8'},
});
}
}]
}]
}).show();

Anup A
24 Apr 2017, 10:08 PM
You can set headers as an option to form.submit();

Quick and dirty example that can be run directly in the firebug console:


new Ext.Window({
title: 'test',
closable: true,
height: 400,
width: 400,
items: [{
id: 'myForm',
xtype: 'form',
defaultType: 'textfield',
items: [{
name: 'myField',
anchor: '100%'
}],
buttons:[{
text: 'submit',
handler: function(b,e){
var f = Ext.getCmp('myForm').getForm();
f.submit({
url: 'test.php',
headers: {'Content-Type':'multipart/form-data; charset=UTF-8'},
});
}
}]
}]
}).show();



I'm sending this form submit request to a servlet, Filter actually, where I need to parse the request....using ServletFileUpload.parseRequest(request) method, which is returning an empty list.....does the request has to be in format==>

--XXX
Content-Disposition: form-data; name="name"

John
--XXX
Content-Disposition: form-data; name="age"

12
--XXX--if so, how to get this format request payload?...
the doubt raised becoz, I'm setting conent type as headers: {'Content-Type':'multipart/form-data; charset=UTF-8; boundary=--XXX'},