JSFiddle - React, Tailwind, and code Playground

by Alexander Tymchuk

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/extjs/4.1.0.b1/resources/css/ext-all.css">

JavaScript

'use strict';
Ext.onReady(function () {
Ext.define('TestResult', {
    extend: 'Ext.data.Model',
    fields: ['month', {
        name: 'target1',
        type: 'int'
    }, {
        name: 'target2',
        type: 'int'
    }, {
        name: 'targetDiff',
        type: 'int'
    }, {
        name: 'targetPercent',
        type: 'float'
    }]
});

Ext.create('Ext.grid.Panel', {
    width: 550,
    height: 220,
    title: 'Summary Test',
    style: 'padding: 20px',
    renderTo: document.body,
    features: [{
        ftype: 'summary'
    }],
    store: {
        model: 'TestResult',
        data: [{
            month: 'Jan',
            target1: 100,
            target2: 101,
            targetDiff: 1,
            targetPercent: 0.99
        },{
            month: 'Feb',
            target1: 110,
            target2: 112,
            targetDiff: 2,
            targetPercent: 0.99
        },{
            month: 'Mar',
            target1: 120,
            target2: 121,
            targetDiff: 1,
            targetPercent: 0.99
        },{
            month: 'Apr',
            target1: 130,
            target2: 133,
            targetDiff: 3,
            targetPercent: 0.99
        }]
    },
    columns: [{
        dataIndex: 'month',
        text: 'Month',
        summaryRenderer: function(){
            return '<b>Totals:</b>';
        }
    }, {
        dataIndex: 'target1',
        text: 'Target1',
        summaryType: 'sum'
    }, {
        dataIndex: 'target2',
        text: 'Target2',
        summaryType: 'sum'
    }, {
        dataIndex: 'targetDiff',
        text: 'Target(2-1)',
        summaryType: 'sum',
        
    }, {
        dataIndex: 'targetPercent',
        text: 'Target%',
        summaryType: function(records){
           /* var totals = records.reduce(function(sums, record){
                return [sums[0] + record.data.target1, 
                        sums[1] + record.data.target2];
            }, [0,0]);
            */
            var...