JSFiddle - React, Tailwind, and code Playground

by sran

HTML

<script src="http://docs.sencha.com/ext-js/4-1/extjs-build/ext-all.js"></script>
<link rel="stylesheet" href="http://docs.sencha.com/ext-js/4-1/extjs-build/resources/css/ext-all.css">
<script src="http://docs.sencha.com/ext-js/4-1/extjs-build/examples/ux/statusbar/StatusBar.js"></script>

JavaScript

Ext.onReady(function(){
    Ext.ns('EL');
    Ext.Loader.setPath(  'Ext', 'http://docs.sencha.com/ext-js/4-1/extjs-build/examples');
    Ext.create('Ext.Panel', {
        width: 200,
        height: 200,
        renderTo: Ext.getBody(),
        tbar: {
          xtype: 'statusbar',
          statusAlign: 'right',
            items: [
              {
                xtype: 'button', 
                text: 'show window', 
                id: 'ani-target', 
                handler: function(btn) { 
                  if (btn.up('panel').down('window').isVisible()) {
                    btn.up('panel').down('window').hide();
                    btn.setText('maximize');
                  }else {
                    btn.up('panel').down('window').show();
                    btn.setText('minimize');
                    Ext.define('Ext.ux.custom.StatusBar',{
                      extend: 'Ext.ux.statusbar.StatusBar',
                      alias: 'widget.cstatus',
                      requires: ['Ext.ux.statusbar.StatusBar'],
                      text: 'Ready',
                      initComponent: function() {
                        this.callParent(arguments);
                      }
                    });
                    btn.up('panel').down('window').addDocked({ xtype: 'cstatus'});
                  }
                  
                  
                }
              }
            ],
        },
      items: [{
        xtype: 'window',
        closable: false,
        width: 100,
        height: 100,
        id: 'demo-win',
        animateTarget: 'ani-target'
      }]
    })
})