Maximize, minimize extjs panel

Question

How can we add maximize and minimize in the panel of EXTJS 4 portal example:

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

Fully working code:

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

You can push panel as item inside Window. Then provide maximize and minimize functionality by using tool[tbar in extjs].

Answer 2

You cannot 'maximize' or 'minimize' the 'Viewport' because it automatic render to body, If you want to use maximize/minimize feature you must work with Window that is the better way to do.

The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page.

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

But if you want to maximize some panel inside the viewport you should use showBy method of each panel to show it by the specified size with target component.

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