JSFiddle - React, Tailwind, and code Playground

by alexrom7

HTML

<link rel="stylesheet" type="text/css" href="//cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all-debug.css"
/>

CSS

.hospital-target {
border: 1px solid red;
margin: 5px;
padding: 5px;
font-size: small;
cursor: default;
}

.app-header h1 {
font-family: verdana,arial,sans-serif;
font-size: 20px;
color: #15428B;
}

.patient-view table {
border-collapse: separate;
border-spacing: 2px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

td.patient-label {
background-color: #ddd;
border: 1px solid #bbb;
font-weight: bold;
text-align: right;
width: 100px;
padding: 0px 3px 0px 0px;
}

.patient-source {
cursor: pointer;
}

JavaScript

Ext.require(['*']);

Ext.onReady(function() {

    var patients = [{
        insuranceCode: '11111',
        name: 'Fred Bloggs',
        address: 'Main Street',
        telephone: '555 1234 123'
    }, {
        insuranceCode: '22222',
        name: 'Fred Bansod',
        address: 'Van Ness',
        telephone: '666 666 666'
    }, {
        insuranceCode: '33333',
        name: 'Fred Mercury',
        address: 'Over The Rainbow',
        telephone: '555 321 0987'
    }, {
        insuranceCode: '44444',
        name: 'Fred Forsyth',
        address: 'Blimp Street',
        telephone: '555 111 2222'
    }, {
        insuranceCode: '55555',
        name: 'Fred Douglass',
        address: 'Talbot County, Maryland',
        telephone: 'N/A'
    }];

    Ext.define('Patient', {
        extend: 'Ext.data.Model',
        idProperty: 'insuranceCode',
        fields: [{
                name: 'name'
            }, {
                name: 'address'
            }, {
                name: 'telephone'
            }]
    });

    var patientStore = Ext.create('Ext.data.Store', {
        model: 'Patient',
        data: patients
    });

    var hospitals = [{
        code: 'AAAAA',
        name: 'Saint Thomas',
        address: 'Westminster Bridge Road, SE1 7EH',
        telephone: '020 7188 7188'
    }, {
        code: 'BBBBB',
        name: 'Queen\'s Medical Centre',
        address: 'Derby Road, NG7 2UH',
        telephone: '0115 924 9924'
    }, {
        code: 'CCCCC',
        name: 'Saint Bartholomew',
        address: 'West Smithfield, EC1A 7BE',
        telephone: '020 7377 7000'
    }, {
        code: 'DDDDD',
        name: 'Royal London',
        address: 'Whitechapel, E1 1BB',
        telephone: '020 7377 7000'
    }];

    Ext.define('Hospital', {
        extend: 'Ext.data.Model',
        idProperty: 'code',
        fields: [{
            name: 'name'
        }, {
            name: 'address'
        }, {
            name: 'telephone'
        }]
    });

    var...