How to change filter encoding / override json proxy?

[pablotcarreira]

Hi, I want to change the how the filter are encoded in a request. Extjs4 encode filters like that:

?filter=[{"property":"foo","value":bar}]

but I want the filters to come directly:

?foo=bar

My best guess is to override the proxy's encodeFilters function.
I need help because I couldn't manage to override the proxy inside Architect because it's nested inside a model.

Any help on how to do that? Is there a simpler way?

[aconran]

Are you looking for simpleGroupMode or simpleSortMode?
http://docs.sencha.com/ext-js/4-1/#!...impleGroupMode

[pablotcarreira]

It's something like to have simpleGroupMode enabled, but instead of a direction it must send a parameter and a value for filtering.

Example:
I would like to ask the server for students with age of 10, that way:
http://myurl.com/api/v1/students/?age=10

But Extjs make the filtering like stated bellow and I don't want that:
http://myurl.com/api/v1/students/?filter=[{'property':'age', 'value':10}]

thx

[aconran]

This is a good feature request for the SDK team. There should be a similar configuration to send those params over the wire.

You could implement that with an override (globally as an override). And then add the new configuration to the individual proxy you want to do it. Alternatively you could override all Server proxies to send filters in your preferred manner.

[pablotcarreira]

Is there a way to override a proxy from inside Architect? I could only manage to override the model or the store, but not the proxy...

[aconran]

There is not a way to create a subclass/override of your individual proxy but you can create an override that will do it for all proxies.

[mysticav]

Did anybody figure out this solution ?

I also would like to send plain query parameters.

By the way, why is this post here, instead of ExtJS 4 Q&A ?

[mysticav]

I overrode Ext.data.proxy.Server

So far it works for me. I'm not sure if there's any implication. It would be great if we could decide how we want the filters to be sent, since the default ExtJS approach is not friendly with REST common practices. In fact, some REST frameworks, e.g. Apigility, cannot apply validation right out of the box to param values sent as JSON.

ExtJS 5.1.1.451

Ext.define('Ext.overrides.data.proxy.Server',{
    override: 'Ext.data.proxy.Server',
    getParams: function(operation) {
        alert('works');
        if (!operation.isReadOperation) {
            return {};
        }

        var me = this,
            params = {},
            grouper = operation.getGrouper(),
            sorters = operation.getSorters(),
            filters = operation.getFilters(),
            page = operation.getPage(),
            start = operation.getStart(),
            limit = operation.getLimit(),
            simpleSortMode = me.getSimpleSortMode(),
            simpleGroupMode = me.getSimpleGroupMode(),
            pageParam = me.getPageParam(),
            startParam = me.getStartParam(),
            limitParam = me.getLimitParam(),
            groupParam = me.getGroupParam(),
            groupDirectionParam = me.getGroupDirectionParam(),
            sortParam = me.getSortParam(),
            filterParam = me.getFilterParam(),
            directionParam = me.getDirectionParam(),
            hasGroups, index;

        if (pageParam && page) {
            params[pageParam] = page;
        }

        if (startParam && (start || start === 0)) {
            params[startParam] = start;
        }

        if (limitParam && limit) {
            params[limitParam] = limit;
        }

        hasGroups = groupParam && grouper;
        if (hasGroups) {
            // Grouper is a subclass of sorter, so we can just use the sorter method
            if (simpleGroupMode) {
                params[groupParam] = grouper.getProperty();
                params[groupDirectionParam] = grouper.getDirection();
            } else {
                params[groupParam] = me.encodeSorters([grouper], true);
            }
        }

        if (sortParam && sorters && sorters.length > 0) {
            if (simpleSortMode) {
                index = 0;
                // Group will be included in sorters, so grab the next one
                if (sorters.length > 1 && hasGroups) {
                    index = 1;
                }
                params[sortParam] = sorters[index].getProperty();
                params[directionParam] = sorters[index].getDirection();
            } else {
                params[sortParam] = me.encodeSorters(sorters);
            }

        }

        if (filterParam && filters && filters.length > 0) {

            /* OVERRIDE STARTS */
            Ext.Array.each(Ext.decode(me.encodeFilters(filters)), function(item){
                params[item.property] = item.value;
            });
            /* OVERRIDE ENDS */

            /* ORIGINAL CODE REMOVED
             params[filterParam] = me.encodeFilters(filters);
             */
        }

        return params;
    }
});

[knutedga]

I created this subclass that extends AjaxProxy with this functionality when simpleFilterMode = true. Works fine for me. But it does not support several filters on the same urlParam

Ext.define('My.ux.AjaxProxy', {
    extend: 'Ext.data.proxy.Ajax',
    alias: 'proxy.myajax',

    simpleFilterMode: false,

    getParams: function (operation) {
        var me = this,
            params = me.callParent(arguments),
            filters = operation.filters,
            filterParam = me.filterParam,
            filter, 
            param;
        
        if (me.simpleFilterMode && filterParam && filters && filters.length > 0) {
            delete params[filterParam];
            for (var i = 0; i < filters.length; i++) {
                filter = filters[i];
                // name the filter as the property if urlParam (new custom optional property) is not defined on the filter
                param = filter.urlParam || filter.property;
                // do not override an existing param with the filter property
                params[param] = params[param] || filter.value;
            }
        }
        return params;
    }
}); 

When 'My.ux.AjaxProxy' is added to requirement list, the proxy is configured like this:

proxy: {
    type: "myajax",
    simpleGroupMode : true,
    url: "http://my.api.example.com/users",
} 

I also added a property to the filter in order to control how the url looks like

filters: [{
    property: "statusCode",
    urlParam: 'status',
    value: 200
}] 

[baka1503]

Yeps, you can change your proxy with add on proxy on chrome or firerox. Vựa đặc sản Hồ Quảng chuyên cung cấp các loại gạo ngon campuchia