How to bind correctly a formula with a store in Sencha ExtJs v6?

Question

Here is a configuration for the formula:

formulas: {
    //this binding with the store did not work :(
    countDeactivatedVehicles: {
        bind: {
            bindTo: "{organizationCars}",
            deep: true,
        },

        get: function (store) {
            return store.query("isCarActive", false).getCount();
        }
    }
}

(currently now the count that we want is only displayed once initially meaning that on load it works ok)

When the models inside the store organizationCars have an attribute updated the binding does not work, the store is not alerted that its models have been updated.

What ideally should happen is when the model gets updated the event is propagated to the store so that the store knows that is changed. This way the binding would work (?) and the formula would get calculated.

Answer 1

Deepbinding, does not bind that deep.

Here is the answer to your question: Fiddle

I got it working in there. But - personally - I would go with Theo's idea, because deep binding, is a lot of overhead.

Answer 2

I don't think this is actually possible using formulas, but you can do using events.

by listening to load datachanged and update events you can be notified of any changes to the store, from here you can do what you would do in a formula and manually set on the ViewModel.

This fiddle shows the solution best: https://fiddle.sencha.com/#view/editor&fiddle/1qvf

Store

Ext.define('Fiddle.Store', {
    extend: 'Ext.data.Store',
    alias: 'store.test',
    listeners: {
        load: 'storeUpdate',
        update: 'storeUpdate',
        datachanged: 'storeUpdate'
    },
    fields: [{
        name: 'include',
        type: 'bool'
    }]
});

ViewModel

Ext.define('Fiddle.StoreBinderViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.storebinder',
    stores: {
        teststore: {
            type: 'test'
        }
    },
    data: {
        includedTotal: 0
    }
});

Controller

Ext.define('Fiddle.StoreBinderController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.storebinder',
    storeUpdate: function (store) {
        var recs = store.query('include', true);
        this.getViewModel().set('includedTotal', recs.length)
    }
});