JSFiddle - React, Tailwind, and code Playground

by Cheney Chen

HTML

<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/ext/5.1.0/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug.css">

JavaScript

Ext.onReady(function(){
Ext.define('example', {
    extend: 'Ext.window.Window',
	alias:'widget.example',
    title: 'Header',
    width: 400,
    height: 200,
	minWidth:150,
	maximizable : true,
	tools:[{
	    type:'minimize',
	    // hidden:true,
	    callback: function(window, tool, event) {
	    			var windows= Ext.ComponentQuery.query('example');
					window.restore();//toggle Maximize
					window.toggleCollapse();//toggle Collapse
					if(window.getCollapsed()){
						tool.setType('restore');//change tool button icon
						var  bodyWidth=screen.width;
						var windowMinWidth=window.getMinWidth();//extjs 5.x
						var headerHeight=window.getHeader().getHeight();
						var maxLineCount=Math.floor(bodyWidth/windowMinWidth);//count width of screen  
						window.setWidth(windowMinWidth);
						Ext.Array.each(windows,function(item,index,itSelf){
							if(item.getCollapsed()){
								var line=Math.floor(index/maxLineCount);
								var column=index%maxLineCount;
								item.alignTo(Ext.getBody(),'bl-bl',[windowMinWidth*column,headerHeight*line*(-1)]);//array all window
							}
						});
					}else{
						tool.setType('minimize');
						window.setWidth(400);//restore width
						window.center();
					}
	    }
		}]
});
Ext.create('Ext.Button', {
    text: 'Click me',
    renderTo: Ext.getBody(),
    handler: function() {
	Ext.create('example').show();
	}
	});
});