ExtJS layout issue with hbox and nested items - extjs

Question

I have an existing layout like the following where each box is a D3 chart
================================
|
box 1 | box 2
|
|
================================
|
|
box 3 | box 4
|
|
I would like to arrange box 1 so it has 2 buttons above it for switching charts.
=============
button|button
box 1
So the full layout would be like
================================
|
button|button | box 2
box 1 |
|
================================
|
|
box 3 | box 4
|
|
The code for the existing layout is below
{
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'}
]}
So i need to replace the first panel (itemId: 'box-1') with some sort of parent panel or container. I am having difficulty achieving this. How can i get the 2 buttons to sit inline and then have the box underneath it ?

Answer 1

If you have the first layout alreay in place you can use the following:
{
xtype:'panel',
itemId: 'box-1',
tbar:[{
xtype: 'button',
text: 'switch A'
}, {
xtype: 'button',
text: 'switch B'
}]
}
Other options are dockedItems and buttons (though these go to the bottom like fbar).

Answer 2

Here is one solution of many possible to arrive at the layout you are asking how to do.
Can be seen working on this 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'
},
}]
}]
}]
}]
})