Wijmo 5 - Creating Controls

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.chart.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20142.0/styles/wijmo.min.css">
<h1>Creating Wijmo 5 Controls</h1>

<p>This is a <b>FlexGrid</b> control:</p>
<div id="theGrid" style="width:100%;height:auto;"></div>

<p>And this is a <b>FlexChart</b> control showing the same data:</p>
<div id="theChart" style="width:100%;height:350px;"></div>

<p>That's it for now...</p>

CSS

.rowInvalid:not(.rh):not(.wj-state-selected) {
    background: #ffebeb;
}
    
.rowValid:not(.rh):not(.wj-state-selected) {
    background: #eaffe5;
}
    
.rowTransient {
    background: #ddd !important;
}

.wj-state-selected {
    background: #0083bf;   
}

.wj-cell.rh.rowTransient::before,
.wj-cell.rh.rowTransient::after
{
    display: inline-block;
    box-sizing: border-box;
    height:14px;
    width:14px;
    margin:0 auto;
    position:absolute;
    left: 50%;
    top: 50%;
    margin-left: -7px;
    margin-top: -8px;
    border: 2px solid transparent;
    border-radius:50%;
    content: "" !important;
    vertical-align: middle;
}

.wj-cell.rh.rowTransient::before {
    border-color: rgba(0,0,0,0.2);
    z-index: 1;
}

.wj-cell.rh.rowTransient::after {
    border-top-color: rgba(0,0,0,1);
    z-index: 2;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 400ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 400ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 400ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    animation-name: spin;
    animation-duration: 400ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

JavaScript

$(document).ready(function () {
    
    var Record = (function(){
       
        function record(data){
            var self = this;
            this._valid = null;
            this._transient = false;
            this._fields = {};
            var fields = [
                'country',
                'downloads',
                'sales',
                'expenses'
            ];
            fields.forEach(function(fieldName){
                self._addField(fieldName);
                if (typeof data[fieldName] != 'undefined'){
                    self._fields[fieldName].value = data[fieldName];
                }
            });
        }
        
        record.prototype.getField = function(fieldName){
            return this._fields[fieldName] || null;   
        }
        
        record.prototype.isValid = function(){
            return this._valid;
        }
        
        record.prototype.setValid = function(val){
            this._valid = val ? true : false;
        }
        
        record.prototype.isTransient = function(){
            return this._transient;
        }
        
        record.prototype.setTransient = function(val){
            this._transient = val ? true : false;
        }
        
        record.prototype._addField = function(name){
            var self = this;
            this._fields[name] = {value: null, valid: null};
            Object.defineProperty(this, name, {
                get: function(){
                    return self._fields[name].value;    
                },
                set: function(val){
                    self._fields[name].value = val;    
                }
            });
        }
        
        return record;
        
    })();
    
    var itemFormatter = function(panel, row, col, cell){
        
        switch(panel.cellType){
            
            case wijmo.grid.CellType.Cell:
                bodyCellFormatter(panel, row, col, cell);
                return;
                
            case...