Pages

Monday, July 26, 2010

ExtJS FormPanel sending JSON data

Hi!

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
});

5 comments:

  1. This is very useful.. thanks!
    Can't see how callbacks are provided though.. that would be useful.

    ReplyDelete
  2. I get this error:

    o.jsonRoot is undefined

    ReplyDelete
  3. Hi, simple solution is:
    remove the line in Ext.request call which begins with
    params: ...
    and replace this line by:
    jsonData: this.form.getValues(),

    :-)

    ReplyDelete
  4. If you set jsonData: this.form.getValues() you can't set a root, I think

    ReplyDelete
  5. Hi, thanks for this!

    I 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

    ReplyDelete