How to POST data in JSON format in ExtJS 4 Ext.data.store

Hello Everyone, 

 This is my First Post related to ExtJS. 

          Normally ExtJS 4 Data is sent in Url encoded format which in my web service code was not getting accepted. So I tried searching over the internet, but didn't got much help.

        So I thought of writing of my own, following is the code which actually converts my required params and send it to webservice in JSON format in POST.

     Normally based on your JSON data representation you can modify based  on your need.  in beforeload listeners in grid.

store.proxy.jsonData = { /*** Your JSON data here  ***/};//Source Code AttachedfunctionrenderMyGrid(){          Ext.define('SampleModel', {        extend: 'Ext.data.Model',        fields: ['id', 'name', 'location', 'description', 'owner'],        idProperty: 'id'    });    var store = Ext.create('Ext.data.Store', {        pageSize: 20,               autoLoad: true,        model: 'SampleModel ',        remoteSort: true,        proxy: {            type: 'ajax',            actionMethods: {                create : 'POST',                read   : 'POST',                update : 'POST',                destroy: 'POST'            },            doRequest: function(operation, callback,scope) {                var writer  =this.getWriter(),                    request= this.buildRequest(operation,callback, scope);                                   if (operation.allowWrite()) {                    request =writer.write(request);                }                              Ext.apply(request, {                   headers       : this.headers,                   timeout       : this.timeout,                    scope         : this,                   callback      : this.createRequestCallback(request,operation, callback, scope),                   method        : this.getMethod(request),                    jsonData        : this.jsonData,                    disableCaching:false// explicitly set it to false, ServerProxy handles caching                });               Ext.Ajax.request(request);                               return request;            },            headers:ajaxCallHeader,                     timeout:ajaxCallTimeout,            url:servicePath+'SampleService/loadGridData',            reader: {                           root: 'data',                totalProperty: 'total'            },            writer: {              type: 'json',              encode: true              },            simpleSortMode: true        },        sorters: [{            property: 'name',            direction: 'ASC'        }],        listeners: {              beforeload: function(store, operation,eOpts) {                     store.proxy.jsonData = {"pagination" : {"page":operation.page,                                            "limit":operation.limit,                                             "sort":operation.sorters[0].property,                                             "dir":operation.sorters[0].direction                                             },                              "basicInfo" : {"ccoId":remoteUser,                              "prefLang":"eng_US",                              "requestStartDate":(new Date()).format("isoDateTime"),                              "requesterApp":appName } };                                             }                    }    });    var grid = Ext.create('Ext.grid.Panel', {                region: 'center',                        layout: 'fit',        id: objId,        store: store,        loadMask: true,        viewConfig: {            id: 'gv',            trackOver: true,            stripeRows: true                   },        // grid columns        columns:[{            id: 'name',            text: "Name",            dataIndex: 'name',            sortable: true        },{            text: "Location",            dataIndex: 'location',            width: 200        },{            text: "Description",            dataIndex: 'descripion',            width: 200        }],        bbar: Ext.create('Ext.PagingToolbar', {            store: store,            displayInfo: true,            displayMsg: 'Displaying topics {0} - {1} of {2}',            emptyMsg: "No topics to display"                   }),    });       grid.store.loadPage(1);    return grid;}

原文地址:http://irscomp.blogspot.com/2012/01/how-to-post-data-in-json-format-in.html

或者使用以下方法:

Ext.override(Ext.data.proxy.Ajax, {                            doRequest: function(operation, callback, scope) {                var writer  = this.getWriter(),                    request = this.buildRequest(operation, callback, scope);                                if (operation.allowWrite()) {                    request = writer.write(request);                }                                Ext.apply(request, {                    headers       : this.headers,                    timeout       : this.timeout,                    scope         : this,                    callback      : this.createRequestCallback(request, operation, callback, scope),                    method        : this.getMethod(request),                    disableCaching: false // explicitly set it to false, ServerProxy handles caching                });                                //Added... jsonData is handled already                if(this.jsonData) {                    request.jsonData = Ext.encode(request.params);                    delete request.params;                }                                Ext.Ajax.request(request);                                return request;            }        });

使用以下方法调用:

Ext.define('My.Store',   extend: 'Ext.data.Store',   ...   proxy: {      type: 'ajax',      ...      //Add these two properties      actionMethods: {          read: 'POST'      },      jsonData: true //Custom, used in override   }});

本方法来源地址:http://www.sencha.com/forum/showthread.php?196194-Ajax-Store-Send-Params-as-JSON-Body