layout - Sencha Touch 布局问题

Question

我必须做以下布局：

红色容器有布局卡并包含：

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

我尝试了以下代码，但它不起作用，我不知道如何将组件放置在另一个组件上。如果我使用 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 放在leafletMap 之后，地图会显示但不会显示按钮......欢迎任何帮助！

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

    });

这与您想要的一样（每个屏幕截图）。请忽略边框样式。那只是为了向您展示差异。希望你能从中得到一个想法。：） 好运！！