Layout 如何在Extjs4中实现类eclipse选项卡

我有几个面板的布局是vbox和hbox 单击面板标题时如何实现最大和最小功能 代码如下：

我有两个问题：

如何在面板标题上添加dbclick事件

如果使用“折叠和展开”，则在单击panel1时，如何设置panel3和panel4“折叠顶部”：

---

谢谢。

您应该在外部面板上定义

dblclick

事件，然后使用

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

更新： 然后，试试这个（我只是隐藏并显示面板）

---

谢谢，这是一个好方法，当dbclick panel3时，如何折叠panel4？

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

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