CODEWITHSUNDEEP
extjsextjs5
fen1ksss
fen1ksss

Reputation: 1120

Sum up combobox values using formulas in extjs

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:

  1. There is a 'delay' in one selected value between tagfield selection and populating textfield
  2. There is no obvious way on how to sum up value with itself using the formulas.

Please see the fiddle

Upvotes: 0

Views: 470

Answers (1)

scebotari66
scebotari66

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

Related Questions