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'
        }]

    });

});