Passing form values to Ext.Ajax.request

[lukep1984]

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]

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]

Sorry but I don't catch you.
Are you saying that it works? or should I use single quoted url?

Regards,
Luke

[tvanzoelen]

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]

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]

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]

Yup, it should be ok:

var form = panelForm.getForm();

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

Regards,
Luke

[lukep1984]

Hi!

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

Best Regards,
Luke

[findajit]

@luke

What is the problem? The URL or the params?

[lukep1984]

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