JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
<div id='page1-div'></div>

<div id='btn1'></div>
<div id='btn2'></div>

JavaScript

Ext.define('PFS.view.Window_Graph', {
    extend: 'Ext.Window',
    alias: 'widget.window_graph',
    layout: 'fit',
    border: false,
    closable: true,
    header: true,
    draggable: true,
    resizable: true,
    border: false,
    tbar: [
        { xtype: 'button', action: 'modifier',       text: 'Modifier',       iconCls: 'iconAppEdit'     },
        { xtype: 'button', action: 'deplacer',       text: 'DĂ©placer',       iconCls: 'iconArrowOut'    },
        { xtype: 'button', action: 'redimensionner', text: 'Redimensionner', iconCls: 'iconShapeHandles'},
        { xtype: 'button', action: 'supprimer',      text: 'Supprimer',      iconCls: 'iconCross'       },
    ],
    autoShow: true,
    constrain: true
});

Ext.onReady(function () {

    Ext.create('Ext.panel.Panel',{
        height:600,
        width:600,
        title:'Page 1',
        id:'page1',
        renderTo:'page1-div'        
    });
        

    
    Ext.create('Ext.button.Button',{
        text:'Add/show window',
        renderTo:'btn1',
        handler: function(){
            var w = Ext.getCmp('graph_1');
            if(Ext.isDefined(w)){
                w.show();            
            }else{
                Ext.getCmp('page1').add({
                    xtype:    'window_graph',
                    id:       'graph_1',
                    width:    500,
                    height:   300,
                    x:        10,
                    y:        10
                });
            }
        }
    });
    
    Ext.create('Ext.button.Button',{
        text:'Hide window',
        renderTo:'btn2',
        handler: function(){
            Ext.getCmp('graph_1').hide();
        }
    });
    
});