Sencha Touch layout issue

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!!