Reputation: 1120
Let's assume we have 2 fields - a tagfield (aka multiSelect combobox) and a textfield. The tagfield is populated from the underlying store having name and amount as parameters. On tagfield select I want to show corresponding amount into the textfield. If there are several fields have been selected from the tagfield I want to sum up the amount values.
There is no problem to implement that using 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)
}
But I would like to give a try to MVVM formulas where I faced the following problems:
Please see the fiddle
Upvotes: 0
Views: 470
Reputation: 3480
Binding to selection
behaves really strange. I would bind the formula to the tagfield value
. It will provide an array with the selected record ids. Then in the viewmodel, you loop through them, get the related records, and sum their amounts. You will need a way to reference the store from the viewmodel. I solved this by moving the store declaration to the viewmodel.
Tagfield bindings:
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'
}]
}
}
},
Here is the fiddle: https://fiddle.sencha.com/#fiddle/2154&view/editor
Upvotes: 1