JSFiddle - React, Tailwind, and code Playground

by chaoszcat

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-3.3.1/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script src="http://dev.sencha.com/deploy/ext-3.3.1/ext-all.js"></script>

JavaScript

var DVI = {};
DVI.DviDashboard = Ext.extend(Ext.TabPanel, {
    initComponent: function() {
        Ext.apply(this, {
            activeTab: 0,
            items: [{
                title: 'Tab 1',
                html: 'Tab 1'
            }, {
                title: 'Tab 2',
                html: 'Tab 2'
            }],
            buttons: [{
                text: 'Add Tab',
                handler: function() {
                    var content = 'Tab '+(this.items.getCount()+1);
                    this.add(new Ext.Panel({
                        title: content,
                        html: content 
                    }));
                    this.setActiveTab(this.items.getCount()-1);
                },
                scope: this
            }]
        });

        DVI.DviDashboard.superclass.initComponent.call(this);

    }
});

Ext.reg('dviDashboard', DVI.DviDashboard);

var dviDashboard = new DVI.DviDashboard({
    renderTo: Ext.getBody()
});