JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dev.sencha.com/deploy/ext-4.0.0/bootstrap.js"></script>
<ul id="placeholder"></ul>

CSS

ul li {
  font-family: "Trebuchet MS", Arial, Sans;
  font-size: 0.8em;
  margin-bottom: 5px;
  background: black;
  color: white;
  padding: 5px;
}

JavaScript

Ext.define('Ext.ux.BootstrapWithPreInit',{
  extend: "Ext.util.Observable",
  constructor: function(c) {
     this.addEvents( 'ready' );
     this.preInitialize();
     this.initConfig(c);
     this.callParent(arguments);
     this.initialize();
  },
  preInitialize: Ext.emptyFn,
  initialize: Ext.emptyFn
});

Ext.define('Ext.ux.EventDrivenBootstrapWithPreInit',{
  extend: "Ext.ux.BootstrapWithPreInit",
  constructor: function(c) {
     this.addEvents( 'ready','beforeReady','afterReady' );
     this.callParent(arguments);
  },
  preInitialize: function() {
    this.addListener('ready',this._preInit,this);
  },
  initialize: function() {
    this.addListener('ready',this._postInit,this);
    this.fireEvent('ready',this);
  },
  _preInit: function(){
    this.fireEvent('beforeReady',this);
  },
  _postInit: function(){
    this.fireEvent('afterReady',this);
  }
});

Ext.onReady(function(){
  Ext.create('Ext.ux.EventDrivenBootstrapWithPreInit',{
    listeners: {
      beforeReady: function(){ this.display('Before ready event..'); },
      ready: function(){ this.display('Ready event..'); },
      afterReady: function(){ this.display('After ready event...'); }
    },
    display: function(msg){
      Ext.get('placeholder').createChild({tag:'li',html:msg});
    }
  });
});