Extjs window does not implement minimize(),so I need implement it by myself,when window minimize,not only toggle collapse,but also array on bottom of screen.
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();
}
});
});
