两个水平可折叠面板

Question

我在容器内有两个面板（布局：适合），两个面板都需要水平折叠。要实现这一点，我需要像这样拥有三个面板（2 个区域为西部的面板和一个面板区域中心）：

defaults: {
    collapsible: true,
    split: true,
    margin: 1,
    padding: 1,
    height: '100%'
},
items: [{
    title: 'west 1',
    floatable: false,
    flex: 100,
    region: 'west'
}, {
    hidden: true,
    collapsed: true,
    region: 'center',
    flex: 1,
    split: false
}, {
    title: 'west 2',
    floatable: false,
    flex: 100,
    floatable: false,
    region: 'west',
    split: false
}]

它可以工作，但是额外的面板非常难看！。谁有更好的解决方案？

此致，阿诺

Answer 1

像下面的代码片段一样使用它：

Ext.create('Ext.panel.Panel', {
    width: 500,
    height: 300,
    title: 'Container',
    layout: 'hbox',
    defaults: {
        collapsible: true,
        collapseDirection: 'left',
        margin: 1,
        height: '100%'
    },
    items: [{
        title: 'west 1',
        width: 100
    }, {
        title: 'west 2',
        floatable: false,
        flex: 1,
        split: false
    }],
    renderTo: Ext.getBody()
});

Working Example

希望这会 help/guide 你。

两个水平可折叠面板

Two horizontal collapsible panels

extjs

panel

region

collapse