Maximize, минимизировать ExtJS панель

Question

Как мы можем добавить максимизировать и минимизировать в панели ExtJS 4 портала Например:

http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/portal/portal.html

Полностью рабочий код:

Ext.define('Ext.app.Portal', { 

    extend: 'Ext.container.Viewport', 
    requires: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'], 


    initComponent: function(){ 
     var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>'; 



     var mainColumnPanelId; 
     //var mainPanelId; 

     var itemNo=0; 

     this.tools= [ 
       { 
        type:'minimize', 
        hidden:true, 
        scope:this, 
        handler: function(e, target, panel) 
        { 
         var cardPanel=Ext.getCmp("app-portal"); 
         var c = panel.up("viewport"); 
         var maximizePortletPanel = Ext.getCmp("maximizePortletPanel"); 
         cardPanel.layout.setActiveItem(0); 
         var originalPanel=Ext.getCmp(mainColumnPanelId); 
         originalPanel.insert(itemNo,maximizePortletPanel.items.items[0]); 
         panel.tools['close'].setVisible(true); 
         panel.tools['collapse-top'].setVisible(true); 
         panel.tools['minimize'].setVisible(false); 
         panel.tools['maximize'].setVisible(true); 

        } 
       }, 
        { 
       type:'maximize', 
       scope:this, 
       handler: function(e, target, panel) 
       { 
        var cardPanel=Ext.getCmp("app-portal"); 
        var columnPanel = panel.ownerCt.ownerCt; 
        var maximizePortletPanel = Ext.getCmp("maximizePortletPanel"); 

        mainColumnPanelId=columnPanel.getId(); 
        var columnPanelItems=columnPanel.items.items; 

        for(var j=0;j<columnPanelItems.length;j++){ 
          if(columnPanelItems[j].getId()==panel.ownerCt.getId()){ 
           itemNo=j; 

           break ; 
          } 

         } 

        maximizePortletPanel.insert(0,panel.ownerCt); 
        cardPanel.layout.setActiveItem(1); 

        panel.tools['minimize'].setVisible(true); 
        panel.tools['close'].setVisible(false); 
        panel.tools['collapse-top'].setVisible(false); 
        panel.tools['maximize'].setVisible(false); 

       } 
    }]; 


     Ext.apply(this, { 
      id: 'app-viewport', 
      layout: { 
       type: 'border', 
       padding: '0 5 5 5' // pad the layout from the window edges 
      }, 
      items: [{ 
       id: 'app-header', 
       xtype: 'box', 
       region: 'north', 
       height: 40, 
       html: 'Ext Portal' 
      },{ 
       xtype: 'container', 
       region: 'center', 
       layout: 'border', 
       items: [{ 
        id: 'app-options', 
        title: 'Options', 
        region: 'west', 
        animCollapse: true, 
        width: 200, 
        minWidth: 150, 
        maxWidth: 400, 
        split: true, 
        collapsible: true, 
        layout:{ 
         type: 'accordion', 
         animate: true 
        }, 
        items: [{ 
         html: content, 
         title:'Navigation', 
         autoScroll: true, 
         border: false, 
         iconCls: 'nav' 
        },{ 
         title:'Settings', 
         html: content, 
         border: false, 
         autoScroll: true, 
         iconCls: 'settings' 
        }] 
       },{ 


        id: 'app-portal', 

        region: 'center', 
        layout:'card', 
        items:[{  

        xtype: 'portalpanel', 
        items: [{ 
         id: 'col-1', 
         items: [{ 
          id: 'portlet-1', 
          title: 'Grid Portlet', 
          tools: this.tools, 
          items: Ext.create('Ext.app.GridPortlet'), 
          listeners: { 
           'close': Ext.bind(this.onPortletClose, this) 
          } 
         },{ 
          id: 'portlet-2', 
          title: 'Portlet 2', 
          tools: this.tools, 
          html: content, 
          listeners: { 
           'close': Ext.bind(this.onPortletClose, this) 
          } 
         }] 
        },{ 
         id: 'col-2', 
         items: [{ 
          id: 'portlet-3', 
          title: 'Portlet 3', 
          tools: this.tools, 
          html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>', 
          listeners: { 
           'close': Ext.bind(this.onPortletClose, this) 
          } 
         }] 
        },{ 
         id: 'col-3', 
         items: [{ 
          id: 'portlet-4', 
          title: 'Stock Portlet', 
          tools: this.tools, 
          items: Ext.create('Ext.app.ChartPortlet'), 
          listeners: { 
           'close': Ext.bind(this.onPortletClose, this) 
          } 
         }] 
        }] 
          },{ //title: 'Portlet', 
          xtype:'panel', 
          id:'maximizePortletPanel', 
          layout:'fit', 
           autoScroll:true 

           //border:true, 
           //frame:true 
           }]//// 
       }]// 
      }] 
     }); 
     this.callParent(arguments); 
    }, 

    onPortletClose: function(portlet) { 
     this.showMsg('"' + portlet.title + '" was removed'); 
    }, 

    showMsg: function(msg) { 
     var el = Ext.get('app-msg'), 
      msgId = Ext.id(); 

     this.msgId = msgId; 
     el.update(msg).show(); 

     Ext.defer(this.clearMsg, 3000, this, [msgId]); 
    }, 

    clearMsg: function(msgId) { 
     if (msgId === this.msgId) { 
      Ext.get('app-msg').hide(); 
     } 
    } 
}); 

Answer 1

Вы не можете 'увеличить' или «свернуть» «Viewport», потому что он автоматически отображает body. Если вы хотите использовать функцию максимизации/минимизации, вы должны работать с Window, что является лучшим способом сделать.

видовой экран делает себя тело документа, и автоматически размеров себя к размеру браузера видового и управляет окно изменения размера. На странице может быть только один вид, созданный на странице.

См: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.container.Viewport

Но если вы хотите, чтобы максимизировать некоторую панель внутри видового экрана вы должны использовать showBy метод каждой панели, чтобы показать его заданного размера с целевым компонентом.

См: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.window.Window-method-showBy

Answer 2

Вы можете нажать панель, как элемент внутри окна. Затем обеспечивайте максимизацию и минимизацию функциональности с помощью инструмента [tbar in extjs].