JSFiddle - React, Tailwind, and code Playground

by el_chief

HTML

<link rel="stylesheet" type="text/css" href="//extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all-gray.css" />

JavaScript

Ext.define('Model', {
    extend: 'Ext.data.Model',
    fields: [
        {
        name: 'rate',
        type: 'float',
        defaultValue: 0.05}
    ]

/*getters:{
        full_name:function(){
                return this.get('first_name') + ' ' + this.get('last_name');
        },
        name_backwards:function(){
            return this.get('full_name').split('').reverse().join('');
        }
    }*/
});

/*
Overrides
*/

Ext.data.Model.override({
    get: function(field) {
        if (this.getters && this.getters[field] !== undefined) {
            return this.getters[field].apply(this);
        }
        else {
            return this[this.persistenceProperty][field];
        }

    },

    applyGetterValues: function() {
        Ext.Object.each(this.getters, function(key, value, obj) {
            this[this.persistenceProperty][key] = value.apply(this);
        }, this);
    }
});

Ext.form.Basic.override({
    loadRecord: function(record) {
        record.applyGetterValues();
        return this.callOverridden(arguments);
    }
});

Ext.view.Table.override({
    prepareData: function(data, index, record) {
        record.applyGetterValues();
        return this.callOverridden(arguments);
    }
});

Ext.view.BoundList.override({
    prepareData: function(data, index, record) {
        record.applyGetterValues();
        return this.callOverridden(arguments);
    }
});

Ext.define('Ext.form.field.Percent', {
    extend:'Ext.form.field.Number',
    alias:'widget.percentfield',
    step:0.001,
    precision:5,
    
    getValue:function(){
        return Ext.util.Format.round(this.callParent(arguments) / 100, this.precision);
    },
    
    setValue:function(value){
        return this.callParent([value*=100]);
    }
});


/*
end Overrides
*/

Ext.define('Form1', {
    extend: 'Ext.form.Panel',

    renderTo: Ext.getBody(),
    title: 'My Form',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
        ...