如何正确绑定公式与 Sencha ExtJs v6 中的商店? [英] How to bind correctly a formula with a store in Sencha ExtJs v6?

问题描述

这里是公式的配置:

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.

推荐答案

我认为这实际上不可能使用公式，但您可以使用事件.

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

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

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.

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

This fiddle shows the solution best: 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)
    }
});

这篇关于如何正确绑定公式与 Sencha ExtJs v6 中的商店?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！