Extjs MVVM design pattern

Extjs MVVM design pattern



Extjs 5 introduce viewController,make code more cleaner.
The logic depend with view,sounds good,but that's also mean logic can not be reuse.
So I design the abstract view and view controller,declare base logic in project.
The other view can user those base logic by mixins.
If any view need to talk with other view,I suggest use event,we can bubble event to talk with container and fire event to talk with componment.
I persist controller can not operate any componment that can't see,make sure every view is independent.
       
Naturally,We can change any componment in container,just like subway right?
I call this design is 'sandwich',I wish every one like it.
Enjoy it....
go to jsfiddle
go to sencha fiddle

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