If you want your Ext.form.FormPanel sends JSON, you must extends Ext.form.Action.Submit and create a new action that format and send the data as JSON. Here's how to do this.
Ext.namespace("Ext.ux.Action"); /** * The JSON Submit is a Submit action that send JSON instead of send URL Encoded data... You MUST specify the jsonRoot * property... * @param form The form to submit * @param options The options of the HTTP Request */ Ext.ux.Action.JsonSubmit = function(form, options) { Ext.ux.Action.JsonSubmit.superclass.constructor.call(this, form, options); }; /** * We are extending the default Action Submit... */ Ext.extend(Ext.ux.Action.JsonSubmit, Ext.form.Action.Submit, { type: 'jsonsubmit', run : function() { var o = this.options; var method = this.getMethod(); var isGet = method == 'GET'; if (o.clientValidation === false || this.form.isValid()) { var encodedParams = Ext.encode(this.form.getValues()); Ext.Ajax.request(Ext.apply(this.createCallback(o), { url:this.getUrl(isGet), method: method, waitMsg: "Please wait while saving", waitTitle: "Please wait", headers: {'Content-Type': 'application/json'}, params: String.format('{{0}: {1}}', o.jsonRoot.toLowerCase(), Ext.encode(this.form.getValues())), isUpload: this.form.fileUpload })); } else if (o.clientValidation !== false) { // client validation failed this.failureType = Ext.form.Action.CLIENT_INVALID; this.form.afterAction(this, false); } } }); /** * We register the new action type... */ Ext.apply(Ext.form.Action.ACTION_TYPES, { 'jsonsubmit' : Ext.ux.Action.JsonSubmit });When you are submitting the form, instead of using
myForm.getForm().submit({ //props here })
use this
myForm.getForm().doAction("jsonsubmit",{ //props here });
This is very useful.. thanks!
ReplyDeleteCan't see how callbacks are provided though.. that would be useful.
I get this error:
ReplyDeleteo.jsonRoot is undefined
Hi, simple solution is:
ReplyDeleteremove the line in Ext.request call which begins with
params: ...
and replace this line by:
jsonData: this.form.getValues(),
:-)
If you set jsonData: this.form.getValues() you can't set a root, I think
ReplyDeleteHi, thanks for this!
ReplyDeleteI have created a modification to work with
ExtJs 4 (tested on beta 2)
/**
* The JSON Submit is a Submit action that send JSON instead of send URL Encoded data... You MUST specify the jsonRoot
* property...
* @param form The form to submit
* @param options The options of the HTTP Request
*/
Ext.define('Ext.form.action.JsonSubmit', {
extend:'Ext.form.action.Submit',
alternateClassName: 'Ext.form.Action.JsonSubmit',
alias: 'formaction.JsonSubmit',
type: 'JsonSubmit',
run : function() {
var method = this.getMethod();
var isGet = method == 'GET';
if (this.clientValidation === false || this.form.isValid()) {
var encodedParams = Ext.encode(this.form.getValues());
Ext.Ajax.request(Ext.apply(this.createCallback(this.form), {
url:this.getUrl(isGet),
method: method,
waitMsg: "Please wait while saving",
waitTitle: "Please wait",
headers: {'Content-Type': 'application/json'},
params: Ext.String.format('{{0}: {1}}', this.form.jsonRoot, Ext.encode(this.form.getValues())),
isUpload: this.form.fileUpload
}));
} else if (this.clientValidation !== false) { // client validation failed
this.failureType = Ext.form.Action.CLIENT_INVALID;
this.form.afterAction(this, false);
}
}
});
Deckard