Max and min tools panels extjs

Question

I have 3 panels. I use the vbox layout. I want to maximize the panels like dockable object when I click on the tool for min and max. How can done that be done??

Answer 1

Edit: jsFiddle solution to maximize a panel to a window: here

---

I've done this before with a border layout and it's a little tricky. You have to hide other components and then explicitly set the size of the panel you want to maximize.

With vBox it's a lot easier though. You just have to hide the other components and stuff will resize automatically.

jsFiddle solution

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

    });

});