JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

JavaScript

Ext.define('My.Model', {
    extend: 'Ext.data.Model',
    fields: [
        {
           name: 'a',
           type: 'int'
        },
        {
           name: 'b',
           type: 'int'
        },
        {
           name: 'c',
           convert: function (value, record) {
               var a = +(record.get('a')),
                   b = +(record.get('b'));
               
               return a + b;
           }
        }
    ]
});

var store = Ext.create('Ext.data.Store', {
    model: 'My.Model',
    data: [
        {
            id: 1,
            a: 1,
            b: 2
        },
        {
            id: 2,
            a: 5,
            b: 3
        },
        {
            id: 3,
            a: 7,
            b: 2
        }
    ],
    listeners: {
        update: function (store, record, operation, modifiedFieldNames) {
            if (!(modifiedFieldNames.length === 1 & modifiedFieldNames[0] === 'c')) {
                record.set('c');
            }
        }
    }
    
});

Ext.widget({
    xtype: 'dataview',
    renderTo: Ext.getBody(),
    itemSelector: '.item',
    tpl: '<tpl for="."><div class="item">{a} + {b} = {c}</div></tpl>',
    store: store
});

store.getAt(1).set('b', 14);