JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

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

Ext.define('My.view.Contact', {
    extend: 'Ext.form.Panel',
    title: 'Contact',
    renderTo: Ext.getBody(),
    items: [
        {
        xtype: 'textfield',
            fieldLabel:'Name',
        name: 'name',
        allowBlank: false}
    ],
    buttons: [
        {
        xtype: 'button',
        text: 'Save',
        action: 'save',
        formBind: true

        }
    ]
});


Ext.define('My.controller.Contact', {
    extend:'Ext.app.Controller',
    views:['Contact'],
    
    init: function(){
        this.control({
            '[action=save]': {
                click: this.saveClick
            }
        });
    },
    
    saveClick: function(button){
        var panel = button.up('form');
        var form = panel.getForm();
        var record = form.getRecord();
        form.updateRecord(record);
        
        console.log(record.get('name'));

    },
    
    create: function(){
        var contact = Ext.create('My.model.Contact');
        
        var panel = this.getView('Contact').create();
        var form = panel.getForm();
        
        form.loadRecord(contact);
    }
});


Ext.application({
    name:'My',
    controllers:[
        'Contact'
    ],
    launch: function(){
        var c = this.getController('Contact');
        c.create();
    }
});