Sencha Touch layout issue - layout

Question

I have to do the following layout :
The red container has the layout card and contains :
A titlebar
A container : This one display a map and should take all the size of the screen below the titlebar
A panel : This is to display custom control buttons, it should be over the map and not hide it (background is transparent)
I tried the following code but it didn't work, I can't figure out how to place components over another one. If I use the hbox layout, the custom control buttons will be below the map, and not on the map...
Ext.define('Sencha.view.MapPanel', {
extend: 'Ext.Container',
requires: ['Ext.ux.LeafletMap'],
xtype: 'mappanel',
config: {
itemId: 'mapanel',
layout: 'card',
items: [{
xtype: 'titlebar',
title: 'title',
docked: 'top'
}, {
xtype: 'panel',
config:{
layout: 'fit',
height: '100px',
width: '100px',
itemId: 'controlButtons'
}
}, {
xtype: 'leafletmap',
mapOptions: {
zoom: 13,
zoomControl: false
},
config: {
layout: 'fit'
}
}]
}
});
Here the controlsButton show but not the map. If I put the controlsButton after the leafletMap, the map shows but not the buttons...
Any help welcome!

Answer 1

Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
config: {
html: 'Main Container',
style: 'border: 2px solid black;',
layout: {
type: 'card'
},
items: [
{
xtype: 'container',
style: 'border:2px solid red',
layout: {
type: 'card'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Title Bar'
},
{
xtype: 'container',
html: 'Container',
style: 'border:2px solid blue;',
layout: {
type: 'hbox'
},
items: [
{
xtype: 'panel',
docked: 'bottom',
height: '20%',
html: 'Panel that holds buttons',
style: 'border: 2px solid green;',
top: '',
width: '50%'
}
]
}
]
}
]
}
});
This is as same as you have wanted (per screenshot). Please ignore the border style. That was just to show you the difference. Hope you get an idea from this. :) Best luck!!