JSFiddle - React, Tailwind, and code Playground

by chaoszcat

HTML

<link rel="stylesheet" href="http://docs.sencha.com/ext-js/4-0/extjs-build/resources/css/ext-all.css">

JavaScript

Ext.onReady(function() {
    //Create viewport for testing
    var viewport = Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [{
            region: 'center',
            html: 'The button will be created on first triggered and toggled hide/show at the subsequent actions. This code is not optimized, it\'s merely built for testing. Refer to <a href="http://stackoverflow.com/questions/11155579/extjs-4-1-how-to-add-items-to-toolbar-dynamically" target="_blank">stackoverflow question</a>',
            layout: 'fit'
        }, {
            region: 'south',
            xtype: 'toolbar'
        }]
    });
    
    var taskbutton;
    
    var win = Ext.create('Ext.window.Window', {
        width: 300,
        height: 200,
        title: 'Hello World!',
        html: 'Click the minimize button to minimize this window',
        tools: [{
            type: 'minimize',
            handler: function() {
                
                //if taskbutton is undefined, let's create
                //a button
                if (!taskbutton) {
                    
                    //Create a simple button that show the window
                    taskbutton = Ext.create('Ext.button.Button', {
                        text: 'Show Window',
                        handler: function() {
                            win.show();
                        }
                    });
                    
                    //Add into toolbar
                    viewport.down('toolbar').add(taskbutton);
                }else{
                    
                    //Else, just show the button instead
                    taskbutton.show();
                }
                
                //Hide the window on minimize
                win.hide();
            }
        }],
        listeners: {
            show: function() {
                //We hide the button, so no need to recreate again
                if (taskbutton) taskbutton.hide();
            }
     ...