JSFiddle - React, Tailwind, and code Playground

by argiropoulostauros

HTML

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Layouts</title>
 <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2/resources/css/ext-all.css" />
</head>
<body>
<div id="container"></div>
 
</body>
</html>

CSS

.x-panel-body .x-panel-header-text{
    font-size:12px;
    font-weight:bold;
}

JavaScript

Ext.create('Ext.panel.Panel', {
    title: 'container panel',
    renderTo: 'container',
    width: 400,
    height: 300,
    layout: 'accordion',
    items: [{
        tools: [{ type: 'gear', handler: function () {
            Ext.Msg.alert('msgWindow', 'btn is Clicked');
        }
        }, { type: 'refresh'}],
        title: 'panel1',
        xtype: "panel",
        html: "insidePanel1"

    }, {
        title: 'panel2',
        xtype: "panel",
        html: "insidePanel2"
    }, {
        id: 'panel3',
        title: 'panel3',
        xtype: "panel",
        html: "insidePanel3"
    }]
});
Ext.create("Ext.Button", {
    renderTo: 'container',
    text: "open panel3",
    handler: function () {
        Ext.getCmp('panel3').expand(true);
    }
});