JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<script src="http://static.branch12.test.xero.com/content/edge/libs.js"></script>
<script src="http://static.branch12.test.xero.com/content/edge/xero.js"></script>
<link rel="stylesheet" href="http://static.branch12.test.xero.com/content/edge/xero.css">
<div class="x-page">
    <div class="x-content">
        <div id="container"></div>
    </div>
</div>

CSS

.x-column-header-align-right .x-column-header-inner {
    padding-right: 15px !important;
    text-align: right !important;
}
.x-grid-row-summary .x-grid-cell {
    padding: 14px 0 11px 10px;
}
.x-grid-cell-inner[style="text-align:right;"] {
    padding-right: 15px !important;
}

JavaScript

Ext.define('XERO.pm.model.tax.Depreciation', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        type: 'int'
    }, {
        name: 'name',
        type: 'text'
    }, {
        name: 'purchaseAmount',
        type: 'float'
    }, {
        name: 'opening',
        type: 'float'
    }, {
        name: 'rate',
        type: 'float'
    }, {
        name: 'method',
        type: 'int'
    }, {
        name: 'depreciation',
        // depreciation - calculated (based off rate, opening & method - could use "number of months" --- elsewhere on form/grid)
        convert: function (value, record) {
            var rate = +(record.get('rate')),
                opening = +(record.get('opening')),
                method = +(record.get('method'));

            if (method === 1) {
                return (opening * rate) * (record.getNumberOfMonths() / 12);
            }

            return opening * rate;
        }
    }, {
        name: 'closing',
        // closing - calulated (opening - depeciation)
        convert: function (value, record) {
            var opening = +(record.get('opening')),
                depreciation = +(record.get('depreciation'));

            // work around for Ext bug - http://www.sencha.com/forum/showthread.php?267778-4.2.1-Grouped-Grid-Summary-on-Converted-Fields-always-0-(zero)
            if (record.isSummary || isNaN(record.getId())) {
                return value;
            }

            return opening - depreciation;
        }
    }],

    getNumberOfMonths: function () {
        return 12;
    }
});

var store = Ext.create('Ext.data.Store', {
    model: 'XERO.pm.model.tax.Depreciation',
    data: [{
        id: 1,
        name: 'Car',
        purchaseAmount: 10000,
        opening: 9000,
        rate: 0.10
    }, {
        id: 2,
        name: 'Laptop',
        purchaseAmount: 2000,
        opening: 2000,
        rate: 0.25
    }],
    listeners: {
        update: function (store, record, operation,...