带有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一样移到底部）。