最大化、最小化extjs面板

如何在EXTJS 4门户的面板中添加maximize和minimize示例：

完全工作代码：

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

Ext.define（'Ext.app.Portal'{
扩展：“Ext.container.Viewport”，
需要：['Ext.app.PortalPanel'，'Ext.app.PortalColumn'，'Ext.app.GridPortlet'，'Ext.app.ChartPortlet']，
initComponent:function（）{
var content=''+Ext.example.shortBogusMarkup+''；
var主柱状体；
//var主面板id；
var itemNo=0；
这个。工具=[
{
类型：'minimize'，
隐藏：是的，
范围:本,，
处理程序：函数（e、目标、面板）
{
var cardPanel=Ext.getCmp（“应用门户”）；
var c=面板向上（“视口”）；
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）；
}
},
{
类型：'最大化'，
范围:本,，
处理程序：函数（e、目标、面板）
{
var cardPanel=Ext.getCmp（“应用门户”）；
var columnPanel=panel.ownerCt.ownerCt；
var maximizePortletPanel=Ext.getCmp（“maximizePortletPanel”）；
mainColumnPanelId=columnPanel.getId（）；
var columnPanelItems=columnPanel.items.items；
对于（var j=0；j您不能“最大化”或“最小化”视口，因为它会自动渲染到
body
，如果您想使用最大化/最小化功能，您必须使用
窗口
，这是更好的方法

视口将自身渲染到文档正文，并自动
将自身大小调整为浏览器视口的大小并管理窗口
调整大小。一个页面中只能创建一个视口

见：

但是，如果要最大化视口中的某个面板，则应使用每个面板的
showBy
方法，以指定的大小和目标组件显示该面板

请参阅：
您不能“最大化”或“最小化”视口，因为它会自动渲染到
主体
，如果要使用最大化/最小化功能，您必须使用
窗口
，这是更好的方法

视口将自身渲染到文档正文，并自动
将自身大小调整为浏览器视口的大小并管理窗口
调整大小。一个页面中只能创建一个视口

见：

但是，如果要最大化视口中的某个面板，则应使用每个面板的
showBy
方法，以指定的大小和目标组件显示该面板

请参阅：
您可以将面板作为项目推送到窗口内。然后使用工具[tbar in extjs]提供最大化和最小化功能。
您可以将面板作为项目推送到窗口内。然后使用工具[tbar in extjs]提供最大化和最小化功能.
谢谢，顺便说一句，我知道了我们可以在面板上添加的新东西，前提是父面板应该是
浮动的：true
。酷..还有其他方法吗？你能提供更多细节吗？你可以尝试示例你的代码或你想要的东西。谢谢，顺便说一句，我知道了我们可以在面板上添加的新东西，前提是父面板应该是
floating:true
。酷..还有其他方法吗？你能提供更多细节吗？你可以尝试举例说明你的代码或你想要的东西。