Ext.from.Panel DirectSubmit doesn't send JSON data

[qwertz2012]

Hi there,

i'm trying to use an Ext.form.Panel with DirectLoad and DirectSubmit. While DirectLoad is already working, DirectSubmit doesn't send JSON data. Here's my TestForm:

Ext.define("EXTJS.TestForm", {
    extend: "Ext.form.Panel",
    title: 'TestForm',    
    
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'Field 1',
        name: 'field1'
    }, {
        fieldLabel: 'Field 2',
        name: 'field2'
    }],
    
    buttons: [{
        text: 'Send',
        handler: function() {
            this.up('form').getForm().submit();
            this.up('window').hide();
        }
    }],

    initComponent: function() {
        this.callParent(arguments);
        this.form.api = {
                load: API.Load,
                submit: API.Submit
        };
    }    
});

After submit() the form does a normal application/x-www-form-urlencoded request with all parameters concatenated:

extTID=4&extAction=API&extMethod=Submit&extType=rpc&extUpload=false&field1=test&field2=test

From the docu of Ext.form.action.DirectSubmit I would expect a application/json; charset=UTF-8 request with sending jsonData.

The API method is configured with formHandler: true.

Any help is much appreciated. Thanks.

[pagullo]

Form submits are always processed that way, because the Direct spec requires it.

That's why there is the formHandler: true thing, so that you know this is a form submit, which is handled in a different way.

Requires

[qwertz2012]

From the API doc of Ext.form.action.DirectSubmit I would expect it to send JSON data because of the shown data packet sent to the server:

{     "action":"Profile","method":"updateBasicInfo","type":"rpc","tid":"6",     "result":{         "success":true,         "id":{             "extAction":"Profile","extMethod":"updateBasicInfo",             "extType":"rpc","extTID":"6","extUpload":"false",             "name":"Aaron Conran","email":"aaron@sencha.com","company":"Sencha Inc."         }     } }

If I switch the formHandler to false DirectSubmit sends JSON data but all form values are missing:

{"action": "API", "method": "submit", "data":[undefined], "type": "rpc", "tid": 4}

However it would be nice if DirectSubmit would send the form fields and values as JSON to the backend no matter if formHandler must be true or not.

Is there any way?

[pagullo]

The thing is the first version of the spec and the first revision mandated it should be done the way you see it handled by DJN.

From what you say, it seems as if there have been some "quiet" changes in the spec since then, and forms with no file upload send JSON now. I have to take a look at that. Right now, there is no provision to handle this.

I will investigate the subject, though I can't commit to a time frame at the moment.

Regards,

[qwertz2012]

I solved the problem by overriding Ext.form.action.DirectSubmit:

Ext.override(Ext.form.action.DirectSubmit, {
    doSubmit: function() {
        var me = this,
            callback = Ext.Function.bind(me.onSuccess, me),
            formEl = me.buildForm();
        //me.form.api.submit(formEl, callback, me);
        me.form.api.submit(this.form.getValues(), callback, me);
        Ext.removeNode(formEl);
    }
});

Instead of submitting formEl now this.form.getValues() is transmitted as JSON data.

[pagullo]

I think you might have problems if there are upload files in the form, be careful

Regards,

[qwertz2012]

At the moment I don't need any uploads but thanks for your hint.