如何在Sencha ExtJs v6中正确绑定公式与商店？

Question

以下是公式的配置:

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

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

(目前我们想要的计数最初只显示一次,这意味着在加载时它可以正常工作)

当商店organizationCars内的模型更新属性时,绑定不起作用,商店不会被警告其模型已更新.

理想情况下应该发生的是当模型更新时,事件被传播到商店,以便商店知道它已被更改.这样绑定就可以工作(？),并且计算公式.

Answer 1

我认为使用公式实际上不可能做到这一点，但您可以使用事件来做到这一点。

通过监听load datachanged和update事件，您可以收到有关商店的任何更改的通知，从这里您可以执行在公式中执行的操作并在 ViewModel 上手动设置。

这个小提琴显示了最好的解决方案：https ://fiddle.sencha.com/#view/editor&fiddle/1qvf

店铺

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

视图模型

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

控制器

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)
    }
});