2015年7月22日 星期三

Ext.window implement minimize()

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();
 }
 });
});