Layout Sencha触摸布局问题

我必须做以下布局：

红色容器具有布局卡，包含：

• 标题栏
• 一个容器：这个容器显示一张地图，并且应该具有标题栏下方屏幕的所有大小
• 面板：用于显示自定义控制按钮，它应该位于地图上方，而不是隐藏它（背景是透明的）

我尝试了以下代码，但没有成功，我不知道如何将组件放置在另一个组件上。如果我使用hbox布局，自定义控件按钮将位于地图下方，而不是地图上

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

此处显示控件按钮，但不显示地图。如果我把controlsButton放在地图后面，地图会显示但不会显示按钮。。。 欢迎任何帮助

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%'
                                }
                            ]
                        }
                    ]
                }
            ]
        }

    });

这和你想要的一样（每个屏幕截图）。请忽略边框样式。那只是为了让你看到不同。希望你能从中得到一个想法。：）祝你好运