The URL of an ajax proxy - Ext JS

Question

I have a couple of questions about the url field of an ajax proxy, and Ext.Ajax.request

I'm getting a JSON response from an Ext.Ajax.request, and sending that data to a store. (I'm also trying to use the pagingToolbar, which is highly uncooperative at the moment)

Anyhow, the paging only seems to slightly work when I use an ajax proxy, however I'm not sure what to put in as the URL. Currently it's url: ''

var store = Ext.create('Ext.data.Store', {
            storeId     : 'resultsetstore',
            autoLoad    : false,
            pageSize    : itemsPerPage,
            fields: [ 
                {name   : 'id',         type    : 'auto'}, 
                {name   : 'name',       type    : 'auto'}, 
                {name   : 'description', type   : 'auto'}
            ],
            proxy: {
                type    : 'ajax',
                url     : '???', 
                reader: {
                    type    : 'json',
                    root    : 'elements'
                }
            }

});

It seems the url reads data from a .json file in a specific directory (i.e. url: 'myData/data.json'), but there isn't any file like that to read from, as my response is coming back as a JSON Object.

And here is my request/response, which I parse and send to my store:

var request = Ext.Ajax.request({
                url         : 'MCApp', //here I specify the Servlet to be read from
                jsonData    : searchquery, //A JSON Object
                params:{
                        start:0,
                        limit: itemsPerPage
                },
                success     : function(response) { 
                    mainresponse = response.responseText;
                    //etc.
                }

Is having a separate request redundant? Could I accomplish this within my store alone (passing my searchquery as a parameter to the server and all that jazz)?

I apologize for this jumbled question in advance!

Cheers

Why don't you use the same 'MCApp' URL in your proxy? The store/proxy combo should be able to handle the ajax request and populating your store for you. You could use filters and sorters in your store to tell your server-side code how to specifically process the request. — Chris Farmer, Mar 17 '14 at 14:38
I've tried this, but I can't seem to pass in my searchquery properly — Clay Banks, Mar 17 '14 at 14:40
I recommend using standard sorters and filters if you can get away with it. If you somehow need to pass in yet more params to the server side, you can add `extraParams` to your proxy. — Chris Farmer, Mar 17 '14 at 14:43

VDP · Accepted Answer · 2014-03-17T15:24:40.923

You can use a memory proxy and set the store data with the data property, but I don't recommend that.

If I where you I would forget the ajax request and start take advantage of the store's proxy.

Here's an example

var store = Ext.create('Ext.data.Store', {
    storeId: 'resultsetstore',
    autoLoad: false,
    pageSize: 20,
    fields: ['id','name','description'],
    proxy: {
        type: 'ajax',
        url: 'urlToTheServlet', //here I specify the Servlet to be read from
        extraParams: {
            searchquery: 'Test'
        }, //A String Object                
        reader: {
            type: 'json',
            root: 'elements'
        }
    }
});

store.load();

note that the start, limit are dealt with in the background. You don't have to set them manually. You can set a pageSize but it has it's own default, so it's not required.

This is what your data is expected to look like:

{
    "elements": [
        {
            "id": 1,
            "name": "John",
            "description": "Project Manager"
        },
        {
            "id": 2,
            "name": "Marie",
            "description": "Developer"
        },
        {
            "id": 3,
            "name": "Tom",
            "description": "Technical Lead"
        }
    ]
}

UPDATE: Passing an object as payload to the proxy

I had the same issue and I couldn't find an out of the box solution so I wrote my own proxy to resolve this.

Ext.define('BCS.data.proxy.AjaxWithPayload', {
    extend:  'Ext.data.proxy.Ajax' ,
    alias: 'proxy.ajaxwithpayload',

    actionMethods: {
        create: "POST",
        destroy: "POST",
        read: "POST",
        update: "POST"
    },
    buildRequest: function(operation) {
        var me = this,
            request = me.callParent([operation]);
        request.jsonData = me.jsonData;
        return request;
    }
});

Now you can do this:

var store = Ext.create('Ext.data.Store', {
    storeId: 'resultsetstore',
    autoLoad: false,
    pageSize: 20,
    fields: ['id','name','description'],
    proxy: {
        type: 'ajaxwithpayload',
        url: 'urlToTheServlet', //here I specify the Servlet to be read from
        jsonData : YOUR_OBJECT
        reader: {
            type: 'json',
            root: 'elements'
        }
    }
});

Thanks for the clear answer, I've made an error however, my `searchquery` is a JSON object. If I can just figure out how to pass this within `extraParams`, I should have this all figured out-hopefully. Basically what I need to do is `extraParams: { jsondata : searchquery }`. Any ideas? — Clay Banks, Mar 17 '14 at 15:16
With extraParams you can only send string parameters or arrays of strings. They get encoded as 'GET' parameter, in the url. I updated the answer for a solution to send objects — VDP, Mar 17 '14 at 15:27
Your custom proxy should be added to the framework, this worked very well thanks a lot VDP! — Clay Banks, Mar 17 '14 at 15:32
Hey VDP I have a new question you may be able to answer easily here http://stackoverflow.com/questions/22459803/success-and-failure-functions-in-a-store-ext-js — Clay Banks, Mar 17 '14 at 16:23

score 0 · Answer 2 · answered Nov 22 '16 at 17:07

I prefer to keep each method in a separated endpoint:

proxy: {
    type: 'ajax',
    reader: {
        type: 'json'
    }, 
    api: {
        read: 'getCenarioTreeNode', // To request a node children (expand a node)
        create: 'createCenarioTreeNode', // When you insert a node
        update: 'updateCenarioTreeNode', // When you change a node attribute
        destroy: 'destroyCenarioTreeNode' // When you delete a node
    },        
    writer: {
        type:'json',
        encode:true,
        rootProperty:'data'
    }        
},

The URL of an ajax proxy - Ext JS

2 Answers2