PDA

View Full Version : Passing form values to Ext.Ajax.request



lukep1984
23 Dec 2011, 3:54 AM
Hi!

I have a question what is the proper way to pass form values to Ext.Ajax.request.

Here is my code:


var panelForm = Ext.create('Ext.form.Panel', {
width: 300,
renderTo: 'fileUpload',
items: [
{
xtype: 'filefield',
name: 'document',
hideLabel: true,
anchor: '100%'
}
],


buttons: [
{
text: 'Upload',
handler: function() {
var form = panelForm.getForm();
/* form.submit({
url: '<s:url namespace="/ajax" action="uploadFile" />',
success: function(fp, o) {
alert('success');
}
});*/


logMessage(panelForm.getForm().getValues());


Ext.Ajax.request({
url : "<s:url namespace="/ajax" action="uploadFile" />",
params : form.getValues(),
method: 'POST',
success : function(response){
console.log(response.responseText);
}
});
}
}
]
});


The commented version using form.submit() works correctly - parameters are passed in submit request.
I am not sure what I am doing wrong. Should params or extraParams property be used in Ext.Ajax.request? I have tried to use both and I also have tried to use form.getFieldValues() but no positive result.


Thanks for help.

Regards,
Luke

tvanzoelen
23 Dec 2011, 5:27 AM
I did a small test



var form = Ext.getCmp('ext-comp-1032');
var values = form.getValues();

Ext.Ajax.request({
url : '<s:url namespace="/ajax" action="uploadFile" />',
params : values,
method: 'POST',
success : function(response){
console.log(response.responseText);
}

});


The params are filled in in the post request.

This url : '<s:url namespace="/ajax" action="uploadFile" />', part gave an error, I took the single qouted one from the formSubmit url you posted.

So whats the problem?

lukep1984
23 Dec 2011, 6:18 AM
Sorry but I don't catch you.
Are you saying that it works? or should I use single quoted url?

Regards,
Luke

tvanzoelen
23 Dec 2011, 6:21 AM
Yes the params are passed, but the quotes on the url gave me an error. If you change the url in the way you did on the formSubmit it probably works fine. Anyway the params are passed fine.

lukep1984
23 Dec 2011, 6:31 AM
This improvement didn't work in my case. I don't see anything in request params.
There must be something about getting field values from form.
I am using extjs 4.07.
Is this code ok for you:
panelForm.getForm().getValues()?

Best Regards,
Luke

tvanzoelen
23 Dec 2011, 6:59 AM
is the same as panelForm.getForm() wich I used. Its strange because I get them in the request.

In your case panelForm.getValues() should work. In your sample I see form.getValues().

Is form correct?

lukep1984
23 Dec 2011, 7:06 AM
Yup, it should be ok:
var form = panelForm.getForm();

I will look at this in new year:-)
Thanks for help.

Regards,
Luke

lukep1984
9 Jan 2012, 5:10 AM
Hi!

I would like to refresh this problem.
Any help/suggestion will be appreciated.

Best Regards,
Luke

findajit
9 Jan 2012, 5:37 AM
@luke

What is the problem? The URL or the params?

lukep1984
9 Jan 2012, 6:24 AM
var form = panelForm.getForm();

var values = form.getValues();
Ext.Ajax.request({
url : '<s:url namespace="/ajax" action="uploadFile" />',
params : values,
method: 'POST',
success : function(response){
console.log(response.responseText);
}
});
The problem is that in this case values are null.

Regards,
Luke

findajit
9 Jan 2012, 3:25 PM
Replace




var form = panelForm.getForm();
var values = form.getValues();

with


var values = panelForm.getValues();

as in 4.x, getValues() method is directly available on the form panel.

lukep1984
10 Jan 2012, 12:19 AM
Thanks for your suggestion, but it doesn't help - code is below:


var uploadFormPanel = Ext.create('Ext.form.Panel', { id: 'uploadFormPanel',
width: 600,
fileUpload : true,
fieldDefaults: {
labelWidth : 150,
labelAlign: 'right'
},
items: [
{
xtype: 'combobox',
store: docTypes,
queryMode: 'local',
displayField: 'name',
fieldLabel: 'Local Document Type',
valueField: 'id',
anchor: '60%'
},
{
xtype: 'textfield',
name: 'localPiDetails',
fieldLabel: 'Local PI Details',
anchor: '90%'
},
{
xtype: 'filefield',
name: 'document',
fieldLabel: 'Document',
anchor: '90%'
}
],


buttons: [
{
text: 'Upload',
handler: function() {
/*
var form = uploadFormPanel.getForm();
form.submit({
url: '<s:url namespace="/ajax" action="uploadLocalPI" />',
params: {
id: ${entity.id}
},
success: function(fp, o) {
win.close();
}
});
*/


var values = uploadFormPanel.getValues();
logMessage('values ' + values);


Ext.Ajax.request({
url: '<s:url namespace="/ajax" action="uploadLocalPI" />',
params : values,
method : 'POST',
success : function(response) {
logMessage('response ' + response);
}
});
}
}
]
});

Unfortunately, commented part works.

Regards,
Luke

findajit
10 Jan 2012, 1:31 AM
Sorry...but I should have asked this earlier.....

How are you accessing the html file in your browser? using file:/// protocol or http:// ?

I tried with http:// and the values are being posted to the mentioned url. Here is a screenshot:

30591

lukep1984
10 Jan 2012, 3:02 AM
Thanks for help. I was too much focused on upload of file but now everything is clear.

Regards,
Luke