最大化、最小化 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

您不能“最大化”或“最小化”“视口”，因为它会自动渲染到body，如果您想使用最大化/最小化功能，您必须使用Window，这是更好的方法。

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

见：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

您可以将面板作为项目推送到窗口中。然后使用 tool[tbar in extjs] 提供最大化和最小化功能。