Like this
go to jsfiddle
go to github
1.define window class and build minimize tool button
Ext.define('extProject.view.windows.Login', {
extend : 'Ext.window.Window',
alias : 'widget.Login',
title : 'Login',
width : 400,
height : 400,
closeAction : 'destroy',
maximizable : true,
resizable : true,
minWidth:150,
plain : true,
layout: 'fit',
requires : [ 'extProject.view.form.UserForm' ],
// minimizable : true,
items : [ {
xtype : 'userForm'
} ],
tools:[{
type:'minimize',
// hidden:true,
callback: function(panel, tool, event) {
panel.fireEvent('minimize', panel,tool);
}
}]
});
2.build controller listen minimize event
Ext.define('extProject.controller.User', {
extend : 'Ext.app.Controller',
alias : 'controller.User',
// requires : [ 'baseWeaver.model.BoxTool',
// 'baseWeaver.store.BoxTool' ],
stores : [ 'User' ],
models : [ 'User' ],
refs : [ {
ref : 'user',
selector : 'UserPanel'
} ],
init : function() {
'Login':{
minimize:function(window, tool ){
var windows= Ext.ComponentQuery.query('Login');
console.log(windows);
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();
}
}
}
});
}
3.The samplest code
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();
}
});
});