0

次のレイアウトを行う必要があります。

アプリのレイアウト

赤いコンテナーにはレイアウト カードがあり、以下が含まれています。

  • タイトルバー
  • コンテナ : これはマップを表示し、タイトルバーの下の画面のすべてのサイズを取る必要があります
  • パネル : これは、カスタム コントロール ボタンを表示するためのものです。マップ上に配置し、非表示にしないでください (背景は透明です)。

次のコードを試しましたが、うまくいきませんでした。別のコンポーネントの上にコンポーネントを配置する方法がわかりません。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 は表示されますが、マップは表示されません。コントロールボタンをリーフレットマップの後に配置すると、マップは表示されますが、ボタンは表示されません...どんな助けも歓迎します!

4

1 に答える 1

2

ここに画像の説明を入力 

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

    });

これは、あなたが望んでいたものと同じです (スクリーンショットごと)。境界線のスタイルは無視してください。それはあなたに違いを示すためだけでした。このことからアイデアを得ていただければ幸いです。：） 幸運！！

于 2013-06-19T08:26:14.437 に答える