3

I defined the store and a filter. The ViewModel contains test object I need to filter store items by this object.

Ext.define('XXX.view.XXX.ViewXXXXModel', {
    extend: 'Ext.app.ViewModel',

...

    stores: {
        agreements: {
            source: 'XXX',
            filters: {
                filterFn: function(item) {
                    return item.some_field !== this.get('test').somevalue;
                }
            }
        }
    }

I cannot access the test object of View Model from filter function?

2 Answers 2

6

Way too late now, but I just had the same issue, and the cleaner method to do this is by returning filterFn as a formula bind:

For your original example:

stores: {
    agreements: {
        source: 'XXX',
        filters: [{
            filterFn: '{storeFilter}'
            }]
        }
    }
},
formulas: {
   storeFilter: function(get) {
        var somevalue = get('test').somevalue;
        return function(item) {
            return item.some_field !== this.get('test').somevalue;                
        };
   }
}

Edit: When I originally wrote this I wasn't aware that Ext continually added extra filters when using setFilters rather than just replacing them all. To get around this, you need to name the filter using an id. In the above example something like this:

        filters: [{
            id: 'myVMFilterFunction',
            filterFn: '{storeFilter}'
            }]

Then it replaces the filter as expected

3

Ideally you would use the declarative filter format in most cases - the granularity ensures that bindings are more specific, triggering appropriate / expected updates when data changes. For example:

stores: {
    agreements: {
        source: 'XXX',
        filters: {
            property: 'some_field',
            value: '{test.somevalue}',
            operator: '!='
        }
    }
}

If you really want to use imperative code you can inject the view-model scope via a formula:

formulas: {
    _this: function(){
        return this;
    }
}

Then bind it like so:

stores: {
    agreements: {
        source: 'XXX',
        filters: {
            scope: '{_this}',
            filterFn: function(item){
                return item.some_field !== this.get('test.somevalue'));
            }
        }
    }
}

This is a bit of a kludge though and changes to test likely won't be reflected in the store and any visual component tied to it. In this case you'd end up having to manually reload the store or reapply the filters - which kind of defeats the point of MVVM.

3
  • Can I perform some operation with test object (ex. change some property) when I use declarative filter format? Like filters: { property: 'some_field', value: '{test.somevalue}', operator: '!=' }
    – Andrei
    Oct 22, 2016 at 19:32
  • Like filters: { property: 'some_field', value: '{test.somevalue + new Date().getDate()}', operator: '!=' }
    – Andrei
    Oct 22, 2016 at 19:34
  • The imperative approach is more proper for this case. The issue was in a injecting the right scope to filter.
    – Andrei
    Oct 22, 2016 at 19:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.