How can I get a FormPanel to POST JSON with ExtJS 3.1.0?

Question

By default, a FormPanel in ExtJS 3.1.0 posts the form fields as application/x-www-form-urlencoded when you call its submit() function.

Is there any way to get it to post JSON instead?

score 3 · Accepted Answer · answered Feb 04 '10 at 18:19

3

You can use getValues() to pull the values and then Ext.encode() them and manually do an Ext.Ajax.request({}) with this data as well.

answered Feb 04 '10 at 18:19

Lloyd

29,197
4
84
98

Thanks, this is the same solution as the one given here: http://www.extjs.com/forum/showthread.php?p=433863#post433863 – Daniel T. Feb 04 '10 at 19:13

score 2 · Answer 2 · answered Feb 04 '10 at 18:05

2

You probably want to extend Ext.form.Action.Submit to encode the params as JSON instead of url-encoding them in the body.

answered Feb 04 '10 at 18:05

Jonathan Julian

12,163
2
42
48

Thanks for the reply, this is definitely the direction I want to go in, but I'm just starting off with ExtJS and I'd rather get the basics working first before I start extending stuff. – Daniel T. Feb 04 '10 at 19:15
Extending components is really easy to do: see the section "A Re-usable Template" in http://www.extjs.com/learn/Manual:Component:Extending_Ext_Components Learn to extend now before you build too much crazy code! – Jonathan Julian Feb 07 '10 at 15:48
This seems to apply to ExtJS 3.0 but might probably be useful nevertheless: http://www.yannlaviolette.com/2010/07/extjs-formpanel-sending-json-data.html – Erik Kaplun Nov 21 '11 at 23:23

score 1 · Answer 3 · edited Nov 21 '11 at 23:30

1

You can override Ext.form.Action.Submit.run.

Just like this:

Ext.override(Ext.form.Action.Submit, {
    run: function() {
        // Your code here
    }
});

edited Nov 21 '11 at 23:30

Erik Kaplun

37,128
15
99
111

answered Nov 14 '10 at 06:20

king

11
1

Even though it should not really be monkeypatched like this, I think it's a useful hint as to which direction to move to when defining a custom Submit action. – Erik Kaplun Nov 21 '11 at 23:22

score 0 · Answer 4 · edited Nov 27 '14 at 12:23

0

Just put in params

var formData = App.formPanel.getValues(false);
Ext.net.DirectMethod.request({ 
     url: '/Product/Save',
     params: formData,
     success: function(jsonResult){
     }
});

or

App.formPanel.submit();

Before set a App.formPanel.url = '/Product/Save'

edited Nov 27 '14 at 12:23

Luís Cruz

14,780
16
68
100

answered Nov 27 '14 at 12:00

myk.mykytiuk

1
1

How can I get a FormPanel to POST JSON with ExtJS 3.1.0?

4 Answers4