extjs - 最大和最小工具面板 extjs

Question

我有 3 个面板。我使用 vbox 布局。当我单击最小值和最大值工具时，我想最大化面板，如可停靠对象。怎么可能做到这一点？

Answer 1

编辑：将面板最大化到窗口的 jsFiddle 解决方案：这里

---

我以前用边框布局做过这个，这有点棘手。您必须隐藏其他组件，然后明确设置要最大化的面板的大小。

但是使用 vBox 会容易得多。你只需要隐藏其他组件，东西就会自动调整大小。

jsFiddle 解决方案

Ext.onReady(function(){
    Ext.create('Ext.container.Viewport',{
        height:590,
        width:590,
        padding:'25px',
        layout:'vbox',
        defaults:{
            width:'100%',
            tools: [{
                type:'maximize',
                handler: function(a,b,c){
                    var v = c.up('viewport');
                    var panels = v.query('panel');
                    Ext.Array.each(panels,function(p){
                        if(c.ownerCt!=p){
                            p.hide();
                        }
                    });
                }
            },{
                type:'minimize',
                handler: function(a,b,c){
                    var v = c.up('viewport');
                    var panels = v.query('panel');
                    Ext.Array.each(panels,function(p){
                        p.show();
                    });
                }
            }]
        },
        items:[{
            flex:.33,
            title:'1',
            html:'1'
        },{

            title:'2',
            flex:.33,
            html:'2'
        },{

            title:'3',
            flex:.33,
            html:'3'
        }]

    });

});