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('Form1', {
    extend: 'Ext.form.Panel',

    height: 250,
    width: 400,
    renderTo: Ext.getBody(),
    bodyPadding: 10,
    title: 'My Form',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                xtype: 'textfield',
                fieldLabel: 'Label',
                    name:'name',
                anchor: '100%'},
            {
                xtype: 'button',
                text: 'Submit',
                handler: function(){
                    this.up('form').submit();
                }
            }
            ]
        });

        me.callParent(arguments);
    }
});

Ext.define('Thing', {
    extend:'Ext.data.Model',
    fields:[
        'name'
    ]
});

Ext.application({
    launch: function() {
        var form = Ext.create('Form1');
        
        Ext.util.Observable.capture(form, function() {
            console.log('form', this, arguments);
        });
        
        form.loadRecord(new Thing({name:'neil'}));
        
    }
});