hbox 和嵌套项的 ExtJS 布局问题

Question

我有一个如下所示的现有布局，其中每个框都是一个 D3 图表

================================
           |
 box 1     |    box 2
           |
           |
================================
           |
           |
 box 3     |   box 4
           |
           |

我想安排方框 1，使其上方有 2 个用于切换图表的按钮。

=============
button|button
 box 1

所以完整的布局就像

================================
               |
 button|button |    box 2
 box 1         |
               |
================================
               |
               |
 box 3         |    box 4
               |
               |

现有布局的代码如下

{
  xtype: 'container',
  layout: {
    type: 'hbox',
    align: 'stretch',
    pack: 'start'
  },
  flex: 1,
  padding: 5,
  defaults: {
    viewId: me.viewId,
    frame: true,
    height: 350,
    cls: 'app-panel'
  },
  items: [
     {xtype:'panel', itemId: 'box-1'},
     {xtype:'panel', itemId: 'box-2'},
     {xtype:'panel', itemId: 'box-3'},
     {xtype:'panel', itemId: 'box-4'}
]}

所以我需要用某种父面板或容器替换第一个面板（itemId：'box-1'）。我很难做到这一点。我怎样才能让 2 个按钮内嵌，然后在其下方放置框？

Answer 1

这里是许多可能的解决方案中的一种，可以实现您所询问的布局。

可以看到正在处理这个Fiddle

let cnt = Ext.create('Ext.Container', {
        items: [{
            xtype: 'container',
            layout: {
                type: 'vbox',
                align: 'stretch',
                pack: 'start'
            },
            padding: 10,
            items: [{
                xtype: 'container',
                width: '100%',
                margin: '0 0 10 0',
                layout: {
                    type: 'hbox',
                    align: 'fit',
                    pack: 'start'
                },
                items: [{
                    xtype: 'panel',
                    flex: 1,
                    height: 250,
                    title: 'Panel 1',
                    itemId: 'box-1',
                    bodyPadding: 10,
                    margin: '0 10 0 0',
                    items: [{
                        xtype: 'button',
                        text: 'Button 1'
                    }, {
                        xtype: 'button',
                        text: 'Button 2'
                    }, {
                        xtype: 'container',
                        width: '100%',
                        height: 150,
                        style: {
                            border: '1px solid #000'
                        },
                    }]
                }, {
                    xtype: 'panel',
                    flex: 1,
                    height: 250,
                    title: 'Panel 2',
                    itemId: 'box-2',
                    bodyPadding: 10,
                    items: [{
                        xtype: 'container',
                        width: '100%',
                        height: 150,
                        style: {
                            border: '1px solid #000'
                        },
                    }]
                }]
            }, {
                xtype: 'container',
                width: '100%',
                layout: {
                    type: 'hbox',
                    align: 'fit',
                    pack: 'start'
                },
                items: [{
                    xtype: 'panel',
                    flex: 1,
                    height: 225,
                    title: 'Panel 3',
                    itemId: 'box-3',
                    bodyPadding: 10,
                    margin: '0 10 0 0',
                    items: [{
                        xtype: 'container',
                        width: '100%',
                        height: 150,
                        style: {
                            border: '1px solid #000'
                        },
                    }]
                }, {
                    xtype: 'panel',
                    flex: 1,
                    height: 225,
                    title: 'Panel 4',
                    itemId: 'box-4',
                    bodyPadding: 10,
                    items: [{
                        xtype: 'container',
                        width: '100%',
                        height: 150,
                        style: {
                            border: '1px solid #000'
                        },
                    }]
                }]
            }]
        }]
    })

Answer 2

如果您已经有了第一个布局，您可以使用以下内容：

{
    xtype:'panel',
    itemId: 'box-1',
    tbar:[{
        xtype: 'button',
        text: 'switch A'
    }, {
        xtype: 'button',
        text: 'switch B'
    }]
}

其他选项是 dockedItems 和 buttons（通过这些选项可以到达底部，如 fbar）。

hbox 和嵌套项的 ExtJS 布局问题

ExtJS layout issue with hbox and nested items

extjs

extjs5