如何在 Extjs4 中实现类似 Eclipse 的选项卡

Question

我有几个面板，布局是 vbox 和 hbox dbclick面板标题时如何实现最大和最小功能 这是代码：

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

我有两个问题：

1. 如何在面板标题上添加 dbclick 事件
2. 如果使用折叠和展开，当dbclick在panel1上时，如何设置panel3和panel4折叠顶部： http://jsfiddle.net/SLHjn/1/

谢谢。

Answer 1

您应该在外部面板上定义dblclick 事件，然后使用toggleCollapse 函数，如下所示。

备注：
不要使用不起作用的collapse 和expand 函数。突出使用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'  
        }]
    }]
});

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

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