Проблема макета ExtJS с hbox и вложенными элементами

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

Если у вас уже есть первый макет, вы можете использовать следующее:

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

Другие варианты: dockedItems и buttons (хотя они идут вниз, как fbar).

Answer 2

Вот одно из многих возможных решений для макета, который вы спрашиваете, как это сделать.

Видно, как работает над этим Скрипка

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