JSFiddle - React, Tailwind, and code Playground

by lolo

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.7-gpl/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/ext-4.0.7-gpl/ext-all-debug.js"></script>

JavaScript

Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.tree.*',
    'Ext.selection.CellModel'
]);

Ext.onReady(function () {

    var win;

    function showUserSettings() {
        if (!win) {
            var form = Ext.widget('form', {
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                border: false,
                bodyPadding: 10,

                fieldDefaults: {
                    labelAlign: 'top',
                    labelWidth: 100,
                    labelStyle: 'font-weight:bold'
                },
                defaults: {
                    margins: '0 0 10 0'
                },

                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Task'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Duration'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Assigned To',
                    labelAlign: 'top',
                    flex: 1,
                    margins: '0'
                }],

                buttons: [{
                    text: 'Cancel',
                    handler: function () {
                        this.up('form').getForm().reset();
                        this.up('window').hide();
                    }
                }, {
                    text: 'Send',
                    handler: function () {
                        if (this.up('form').getForm().isValid()) {
                            // In a real application, this would submit the form to the configured url
                            // this.up('form').getForm().submit();
                            this.up('form').getForm().reset();
                            this.up('window').hide();
                            Ext.MessageBox.alert('Thank you!', 'Your inquiry has been sent. We will respond as soon as possible.');
                        }
                   ...