CFMeta

Ran into a challenge today trying to get remote grid filtering to work with an ExtJS/Sencha grid (v3.2.2). Problem was that the GridFilter.js plugin formats column filters set by the user based on an array of javascript objects in a format that PHP likes when consuming form variables, but ColdFusion would throw errors. The default format of the variables looks the following:

filter[0][data][type]
filter[0][data][value]
filter[0][field]


The solution was to override the buildQuery function in the GridFilters.js plugin in my filter setup block on the page in question. This results in nicely formatted form variables like the following:

filter_0_data_type
filter_0_data_value
filter_0_field


Here’s the code with the override function defined:

var filters = new Ext.ux.grid.GridFilters({
    // encode and local configuration options defined previously for easier reuse
    encode: encode, // json encode the filter query
    local: false,   // defaults to false (remote filtering)
    buildQuery: function(filters) {
        // override to standard form variable formatting
        var p = {},
        i,
        f,
        root,
        dataPrefix,
        key,
        tmp,
        len = filters.length;

        if (!this.encode) {
            for (i = 0; i & lt; len; i++) {
                f = filters[i];
                root = [this.paramPrefix, '_', i].join('');
                p[root + '_field'] = f.field;
                dataPrefix = root + '_data';
                for (key in f.data) {
                    p[[dataPrefix, '_', key].join('')] = f.data[key];
                }
            }
        } else {
            tmp = [];
            for (i = 0; i 0) {
                p[this.paramPrefix] = Ext.util.JSON.encode(tmp);
            }
        }
        return p;
    },
    filters: [{
        type: 'numeric',
        dataIndex: 'id'
    },
    {
        type: 'string',
        dataIndex: 'customerItemNumber',
        disabled: false
    }]
    // additional filter columns removed for brevity...
});