CODEWITHSUNDEEP
javascriptajaxformsextjshttp-post
beliha
beliha

Reputation: 322

In EXT.js 4.2.1, how can I specify that the form data that is being sent by proxy is NOT to be in JSON format?

This is my code:

Ext.define('masterLists.siteModel', {
    extend: 'Ext.data.Model',
    xtype: 'siteModel',
    fields: [
        {name: 'id', type: 'string'},
        {name: 'siteId', type: 'string'},
        {name: 'nameCenterEnglish',  type: 'string'},
         ...
    ],
    proxy: {
        type: 'ajax',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        api: {
            // Called when saving new records
            create: '/ACP/ADS?CMD=addSite',
            // Called when reading existing records
            read: '/ACP/ADS?CMD=loadSite',
            // Called when updating existing records
            update: '/ACP/ADS?CMD=updateSite',
            // Called when deleting existing records
            destroy: '/ACP/ADS?CMD=deleteSite'
        },
        reader: {
            type: 'json',
            root: 'data'
        }
    }
});

Now the problem is, when I destroy the record model like so: record.destroy()

This is what I see in my dev tools: enter image description here

As you can see from the image above, the form data is being encoded in JSON format. I want it to be in URL-encoded lists of key/value pairs, like any normal form data would be sent when submitted!

How do I achieve this in Ext Js?? Thank you in advance, everyone!

Upvotes: 0

Views: 244

Answers (1)

Arthur Rubens
Arthur Rubens

Reputation: 4706

You can override the buildUrl method of the proxy:

Ext.define('masterLists.siteModel', {
    extend: 'Ext.data.Model',
    xtype: 'siteModel',
    fields: [{
        name: 'id',
        type: 'string'
    }, {
        name: 'siteId',
        type: 'string'
    }, {
        name: 'nameCenterEnglish',
        type: 'string'
    }],
    proxy: {
        type: 'ajax',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        api: {
            // Called when saving new records
            create: '/ACP/ADS?CMD=addSite',
            // Called when reading existing records
            read: '/ACP/ADS?CMD=loadSite',
            // Called when updating existing records
            update: '/ACP/ADS?CMD=updateSite',
            // Called when deleting existing records
            destroy: '/ACP/ADS?CMD=deleteSite'
        },
        reader: {
            type: 'json',
            root: 'data'
        },
        // To change all the REST methods to GET
        actionMethods: {
            create: 'GET',
            read: 'GET',
            update: 'GET',
            destroy: 'GET'
        },
        // To build custom URL
        buildUrl: function(request) {
            var recordData = request.operation.records[0].getData();
            var encodedUrlData = Ext.Object.toQueryString(recordData);
            return this.api[request.action] + '&' + encodedUrlData;
        } 
    }
});

Upvotes: 1

Related Questions