JSFiddle - React, Tailwind, and code Playground

by vero4ka

HTML

<body>
</body>

CSS

body {
    padding: 50px 20px 0 20px;
}

JavaScript

Ext.require([
    'Ext.form.*',
    'Ext.layout.container.Column',
    'Ext.tab.Panel'
]);

Ext.onReady(function(){

    Ext.QuickTips.init();

    var simple = Ext.create('Ext.form.Panel', {
        frame:true,
        title: 'Simple Form',
        bodyStyle:'padding:5px 5px 0',
        width: 350,
        fieldDefaults: {
            msgTarget: 'side',
            labelWidth: 75
        },
        defaultType: 'textfield',
        defaults: {
            anchor: '100%'
        },
        items: [{
            fieldLabel: 'Name',
            name: 'name',
            allowBlank:false
        },{
            xtype: 'combo',
            fieldLabel: 'Rating',
            hiddenName: 'rating',
            store: new Ext.data.SimpleStore({
                data: [
                    [1, 'm²'],
                    [2, 'cm²']
                ],
                id: 0,
                fields: ['value', 'text']
            }),
            valueField: 'value',
            displayField: 'text',
            triggerAction: 'all',
            editable: false
        }],
        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });

    simple.render(document.body);
});