how to implement eclipse like tab in Extjs4 - layout

Question

I have a several panels which layout is vbox and hbox
how can I implement maximum and minimum feature when dbclick the panel title
here is the code:
http://jsfiddle.net/SLHjn/
Ext.create('Ext.panel.Panel', {
style: 'padding:0 10px 0 10px',
layout: {
align: 'stretch',
type: 'vbox'
},
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
border: 0,
layout: {
align: 'stretch',
type: 'vbox'
},
items: [{
xtype: 'panel',
height: 100,
title: 'title1',
html: 'panel1'
}, {
xtype: 'panel',
height: 100,
title: 'title2',
html: 'panel2'
}]
}, {
xtype: 'panel',
border: 0,
layout: {
align: 'stretch',
type: 'hbox'
},
items: [{
xtype: 'panel',
title: 'title3',
height: 100,
flex: 1,
html: 'panel3'
}, {
xtype: 'panel',
title: 'title3',
flex: 1,
html: 'panel4'
}]
}]
});
I have two problems:
how to add dbclick event on panel title
if use collapse and expand, when dbclick on panel1, how to set panel3 and panel4 collapse top:
http://jsfiddle.net/SLHjn/1/
Thanks.

Answer 1

You should define dblclick event on the outer panel, then use toggleCollapse function, like below.
REMARK:
Do not use collapse and expand function which will not work. Juts use toggleCollapse
Ext.create('Ext.panel.Panel', {
style: 'padding:0 10px 0 10px',
layout: {
align: 'stretch',
type: 'vbox'
},
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
border: 0,
layout: {
align: 'stretch',
type: 'vbox'
},
items: [{
xtype: 'panel',
height: 100,
title: 'title1',
html: 'panel1',
listeners: {
dblclick: {
fn: function() {
var pnl = Ext.getCmp('panel-out');
pnl.toggleCollapse();
},
element: 'el'
}
}
}, {
xtype: 'panel',
height: 100,
title: 'title2',
html: 'panel2'
}]
}, {
xtype: 'panel',
border: 0,
id: 'panel-out',
layout: {
align: 'stretch',
type: 'hbox'
},
items: [{
xtype: 'panel',
title: 'title3',
height: 100,
flex: 1,
html: 'panel3'
}, {
xtype: 'panel',
title: 'title3',
flex: 1,
html: 'panel4'
}]
}]
});
UPDATE:
then, try this (I am just hide and show the panel )
Ext.create('Ext.panel.Panel', {
style: 'padding:0 10px 0 10px',
layout: {
align: 'stretch',
type: 'vbox'
},
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
border: 0,
layout: {
align: 'stretch',
type: 'vbox'
},
items: [{
xtype: 'panel',
height: 100,
title: 'title1',
html: 'panel1',
listeners: {
dblclick: {
fn: function() {
var pnl = Ext.getCmp('panel-out');
pnl.toggleCollapse();
},
element: 'el'
}
}
}, {
xtype: 'panel',
height: 100,
title: 'title2',
html: 'panel2'
}]
}, {
xtype: 'panel',
border: 0,
id: 'panel-out',
layout: {
align: 'stretch',
type: 'hbox'
},
items: [{
xtype: 'panel',
title: 'title3',
height: 100,
flex: 1,
html: 'panel3',
listeners: {
dblclick: {
fn: function() {
var pnl_three = Ext.getCmp('panel4');
if (pnl_three.hidden == false) {
pnl_three.hide();
} else {
pnl_three.show();
}
},
element: 'el'
}
}
}, {
xtype: 'panel',
title: 'title4',
id: 'panel4',
flex: 1,
html: 'panel4'
}]
}]
});