使用 extjs 中的公式总结组合框值

Question

假设我们有 2 个字段 - 一个标记字段（也称为多选组合框）和一个文本字段。 tagfield 是从以名称和数量作为参数的底层商店中填充的。在标签字段 select 上，我想在文本字段中显示相应的金额。如果从标签字段中 select 编辑了多个字段，我想对金额值求和。

使用tagfield onSelect监听器实现没有问题：

onComboSelect: function(combo, recordArray) {
    var sum = recordArray.reduce(function(sum, record) {
        return sum + record.data.amount;
    }, 0);
    this.lookup('textfield').setValue(sum)
}

但我想尝试 MVVM 公式，但我遇到了以下问题：

tagfield selection 和 populating textfield
对于如何使用公式将值与自身求和，没有明显的方法。

请参阅fiddle

Answer 1

绑定到 selection 的行为真的很奇怪。我会将公式绑定到标记字段 value。它将提供一个包含所选记录 ID 的数组。然后在视图模型中，循环遍历它们，获取相关记录，并对它们的数量求和。您将需要一种从视图模型中引用商店的方法。我通过将商店声明移动到视图模型来解决这个问题。

标记域绑定：

bind: {
    value: '{tagValue}',
    store: '{tagStore}'
}

视图模型配置：

viewModel: {
    formulas: {
        summedAmout: {
            bind: '{tagValue}',
            get: function (valueArray) {
                var sum = 0,
                    tagStore = this.getStore('tagStore');

                if (!valueArray.length) {
                    return '';
                }

                valueArray.forEach(function(tagId) {
                    sum += tagStore.getById(tagId).get('cost');
                });
                return sum;
            }
        }
    },
    stores: {
        tagStore: {
            data: [{
                id: 1, cost: 100, name: 'foo'
            }, {
                id: 2, cost: 200, name: 'bar'
            }]
        }
    }
},

这里是fiddle：https://fiddle.sencha.com/#fiddle/2154&view/editor

使用 extjs 中的公式总结组合框值

Sum up combobox values using formulas in extjs

extjs

extjs5