JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/extjs/4.1.0.b1/resources/css/ext-all.css">

JavaScript

Ext.define('MyMessageBox', {
    override: 'Ext.window.MessageBox',
    initComponent: function(cfg) {
        console.log('Hi');
        var me = this;
        var baseId = me.id
        me.callParent();
        me.topContainer = new Ext.container.Container({
            layout: 'hbox',
            padding: 40,
            style: {
                overflow: 'hidden'
            },
            items: [
                me.iconComponent = new Ext.Component({
                    width: me.iconWidth,
                    height: me.iconHeight
                }),
                me.promptContainer = new Ext.container.Container({
                    flex: 1,
                    layout: 'anchor',
                    items: [
                        me.msg = new Ext.form.field.Display({
                            id: baseId + '-displayfield',
                            cls: me.baseCls + '-text'
                        }),
                        me.textField = new Ext.form.field.Text({
                            id: baseId + '-textfield',
                            anchor: '100%',
                            enableKeyEvents: true,
                            listeners: {
                                keydown: me.onPromptKey,
                                scope: me
                            }
                        }),
                        me.textArea = new Ext.form.field.TextArea({
                            id: baseId + '-textarea',
                            anchor: '100%',
                            height: 75
                        })
                    ]
                })
            ]
        });        
    }
},function() {
    Ext.MessageBox = Ext.Msg = new this();
});    
Ext.onReady(function () {
    console.log(Ext.Msg);
    Ext.Msg.alert('Status', 'Changes saved successfully.');
});