ExtJS is not using my grid filter override

Question

I have a project in which I needed to make a custom grid date filter.

Everything work fine until the stateful save. I need to add a custom value to the state. I overrode the getState method from a class that extends Ext.util.Filter :

Ext.define('RelativeDateUtilFilter', {
extend: 'Ext.util.Filter',


getState: function () {
    var config = this.getInitialConfig(),
        result = {},
        name;


    for (name in config) {
        if (config.hasOwnProperty(name)) {
            result[name] = config[name];
        }
    }


    delete result.root;
    result.value = this.getValue();

    //this is the line I added
    result.relValue = this.relValue;


    this.callParent();


    return result;
}
});

I have an override of the filter base class to make it use my own util filter :

createFilter: function (config, key) {
        var filter = new RelativeDateUtilFilter(this.getFilterConfig(config, key));
        filter.isGridFilter = true;
        return filter;
    }

The problem is, my getState in the RelativeDateUtilFilter class is only called when I created the filter for the first time. When ExtJS saves the state it uses the one in the base class Ext.util.Filter.
I can sort of workaround by putting my code directly in the Ext.util.Filter class, but I don't want to since it is not good in case I want to upgrade for example.

In short, how to force ExtJS to use my own getState method when writing the state ?

Any help is appreciated !

EDIT :

In case this ever helps someone, I fixed this by removing my RelativeDateUtilFilter class and my filter base override, and putting my getState method in an override file :

Ext.define('Override.util.Filter', {
    override :'Ext.util.Filter',

    getState: function () {
        var config = this.getInitialConfig(),
            result = {},
            name;

        for (name in config) {
            // We only want the instance properties in this case, not inherited ones,
            // so we need hasOwnProperty to filter out our class values.
            if (config.hasOwnProperty(name)) {
                result[name] = config[name];
            }
        }

        delete result.root;
        result.value = this.getValue();

        if(this.relValue) {
            result.relValue = this.relValue;
        }

        return result;
    }
});

(in a /overrides/util/Filter,js file, so it is loaded correctly by SenchaCMD)

Thanks again @bullettrain !

bullettrain bullettrain · Accepted Answer · 2016-10-05T15:21:17

I believe in your case you dont need this.callParent(); part in your overriden method, here is a nice explanation about different ways to override a method https://sencha.guru/2015/01/20/overriding-methods-safely/

ExtJS is not using my grid filter override

EDIT :

Thanks again @bullettrain !

1 Answers