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

时间:2017-06-08 14:49:56

标签: extjs extjs5

假设我们有2个字段 - 一个标记字段(又名multiSelect组合框)和一个文本字段。标记字段从具有名称和金额作为参数的基础商店填充。在标记字段上选择我想在文本字段中显示相应的金额。如果从标记字段中选择了多个字段,我想总结金额值。

使用tagfield onSelect listener实现它是没有问题的:

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

但我想试试MVVM公式,我遇到了以下问题:

  1. 在标记字段选择和填充文本字段之间的一个选定值中存在“延迟”
  2. 没有明显的方法可以使用公式来总结价值。
  3. 请参阅fiddle

1 个答案:

答案 0 :(得分:1)

绑定到selection表现得非常奇怪。我会将公式绑定到标记字段value。它将提供一个包含所选记录ID的数组。然后在viewmodel中,循环遍历它们,获取相关记录,并汇总它们的数量。您将需要一种从viewmodel引用商店的方法。我通过将商店声明移动到viewmodel来解决这个问题。

Tagfield绑定:

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

Viewmodel config:

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'
            }]
        }
    }
},

这是小提琴:https://fiddle.sencha.com/#fiddle/2154&view/editor