JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.sencha.io/touch/1.1.0/sencha-touch.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.io/touch/1.1.0/resources/css/sencha-touch.css">
<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Test</title> 
 
</head>
<body>
</body>
</html>

JavaScript

Ext.onReady(function() {
    var AppDef = Ext.extend(Ext.Panel, {
        fullscreen: true,
        dockedItems: [{
            xtype: 'toolbar'
        }],
        items: [{
            xtype: 'form',
            items: [{
                xtype: 'textareafield',
                id: 'focusme',
                listeners: {
                    afterrender: function(cmp) {
                        cmp.fieldEl.dom.style.lineHeight = "20px";
                    },
                    keyup: function(field) {
                        var TEXTAREA_LINE_HEIGHT = 20;
                        var textarea = field.fieldEl.dom;
                        var newHeight = textarea.scrollHeight;
                        var currentHeight = textarea.clientHeight;
                        
                        if (newHeight > currentHeight) {
                         textarea.style.height = newHeight + 5 * TEXTAREA_LINE_HEIGHT + 'px';
                        }
                        
                    }
                }
            }, {
                xtype: 'button',
                style: 'margin-top: 30px;',
                text: 'Button'
            }]
        }]
    });
    var app = new AppDef();
});