带有 hbox 和嵌套项的 ExtJS 布局问题答案

【问题标题】：ExtJS layout issue with hbox and nested items带有 hbox 和嵌套项的 ExtJS 布局问题
【发布时间】：2020-04-05 00:41:29
【问题描述】：

我有一个像下面这样的现有布局，其中每个框都是 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 个按钮排成一行，然后在它下面放一个盒子？

【问题讨论】：

您从布局开始，但在获得 4 个面板后似乎停止了。我已经回答了下面的问题。

标签： extjs extjs5

【解决方案1】：

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

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

其他选项是dockedItems 和buttons（尽管它们像fbar 一样位于底部）。

【讨论】：

谢谢，我现在正在使用 tbar 配置以及下面的布局，它运行良好。

【解决方案2】：

这里有许多可能的解决方案，可以达到您所要求的布局。

可以看到正在处理这个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'
                        },
                    }]
                }]
            }]
        }]
    })

【讨论】：

请不要将单个容器添加到面板中。您也可以在面板内进行操作。 ==> 例如box-4 内部不需要另一个容器。
@Dinkheller 这些容器是布局参考，只是为了说明它是如何工作的。