1. #1
    Ext JS Premium Member
    Join Date
    Jul 2008
    Location
    New Zealand
    Posts
    91
    Vote Rating
    3
    Greendrake is on a distinguished road

      0  

    Default AjaxProxy with jsonData option?

    AjaxProxy with jsonData option?


    I've been using my own implementation of server-side feeders (Direct-like) for ExtJS stores for a long time since version 2, and thus I customized Store and HttpProxy in previous versions. Now I am learning the data concepts of version 4 and have started customizing AjaxProxy to get it communicate with my server-side code.
    Basically, there would be just three customizations:
    1. All actions, including read are requested via POST method, and
    2. All requests are made to the same URL, and
    3. All requests send JSON payload instead of POST fields, thus I need to use request.jsonData instead of request.params.
    The inconvenience is, on order to replace params with jsonData, I have to override the whole doRequest method, where the difference is just in two lines: setting request.jsonData and deleting request.params. So, the proxy would look like this:
    Code:
    Ext.define('Ext.data.MyProxy', {
        extend: 'Ext.data.AjaxProxy',
        alias: 'proxy.my',
        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,
                jsonData      : request.params,
                scope         : this,
                callback      : this.createRequestCallback(request, operation, callback, scope),
                method        : this.getMethod(request),
                disableCaching: false // explicitly set it to false, ServerProxy handles caching
            });
            
            delete request.params;
            
            Ext.Ajax.request(request);
            
            return request;
        },
        constructor: function() {
            Ext.data.MyProxy.superclass.constructor.apply(this, arguments);
            this.actionMethods.read = 'POST';
        }
    });
    Is there any more simple and elegant solution to achieve my goals? If not, would the team consider an option for AjaxProxy that would enable sending data in JSON payload instead of HTTP fields? Thanks in advance.

  2. #2
    Sencha User
    Join Date
    Apr 2011
    Posts
    19
    Vote Rating
    0
    cadror is an unknown quantity at this point

      0  

    Default


    Thanks for posting this problem and providing your solution; it helped me make progress under a tight schedule.

    Now I shall repay the favor: I was able to shorten your solution to the following by wrapping the buildRequest() function and modifying the request object therein.

    Code:
    var proxy = your_existing_store.getProxy();
    proxy.__buildRequest__ = proxy.buildRequest;
    proxy.buildRequest = function(operation) {
        var request = this.__buildRequest__(arguments);
        Ext.apply(request, {
            params: null,
            jsonData: Ext.apply(request.params, {
                page: operation.page,
                start: operation.start,
                limit: operation.limit
            })
        });
        return request;
    }
    Cheers.
    Last edited by cadror; 9 Dec 2011 at 6:55 PM. Reason: pagination params were omitted

  3. #3
    Sencha User
    Join Date
    Apr 2011
    Posts
    19
    Vote Rating
    0
    cadror is an unknown quantity at this point

      -1  

    Default [SOLVED] by specifying actionMethods

    [SOLVED] by specifying actionMethods


    I found that ExtJS 4.1.1 lets us specify the HTTP method used to load data into a store:

    Code:
            var store = Ext.create('Ext.data.Store', {
                proxy: {
                    type: 'ajax',
                    url: '...',
                    actionMethods: {
                        read : 'POST' // use HTTP POST when making the AJAX request
                    }
                }
            });
    In particular, notice the actionMethods property in the example above.

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2011
    Posts
    2
    Vote Rating
    0
    mathsaddict is on a distinguished road

      0  

    Default


    I don't see how is this fixed?!! The issue is still there! Although we can alter the method from GET to POST, we can't send a JSON payload without overriding the doRequest method! I suggest that we offer the option to the user to achieve that.

  5. #5
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,568
    Vote Rating
    307
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    See:

    http://skirtlesden.com/articles/custom-proxies

    The relevant example looks like this:

    Code:
    Ext.define('MyApp.proxy.MyAppProxy', { 
        ... 
     
        buildRequest: function(operation) { 
            var request = this.callParent(arguments); 
     
            request.jsonData = request.params; 
            request.params = {}; 
     
            return request; 
        }, 
     
        getMethod: function(request) { 
            return 'POST'; 
        } 
    });
    The framework has to be quite selective in allowing new config options in order to avoid bloat and conflicts. Proxies have several protected methods, like buildRequest, that are provided specifically to allow for these kind of customizations on a case-by-case basis.

    I'd guess the reason Sencha hasn't added this as a formal feature is the difficulty in reconciling it with a writer.

  6. #6
    Sencha Premium Member
    Join Date
    Mar 2011
    Posts
    2
    Vote Rating
    0
    mathsaddict is on a distinguished road

      0  

    Default


    Thank you very much skirtle. That makes more sense actually. And yeah, your article about custom proxies is very helpful! Thanks again :-)!

Similar Threads

  1. AjaxProxy on failure
    By h4m1d.r3z4 in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 30 Jan 2011, 2:50 AM
  2. AjaxProxy 'POST' method ?!
    By AndreaCammarata in forum Sencha Touch 1.x: Discussion
    Replies: 5
    Last Post: 14 Oct 2010, 11:02 PM
  3. How to specify jsonData as option in store.load()?
    By dbassett74 in forum Ext 3.x: Help & Discussion
    Replies: 9
    Last Post: 16 Jul 2009, 5:34 PM
  4. Replies: 13
    Last Post: 22 May 2008, 6:32 AM

Thread Participants: 3

Tags for this Thread