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 Attached
functionrenderMyGrid(){
      
    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