JSFiddle - React, Tailwind, and code Playground
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();
}
...