煎茶觸摸佈局問題

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節目而不是地圖。如果我把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%' 
           } 
          ] 
         } 
        ] 
       } 
      ] 
     } 

    }); 

如你想這是一樣的（每截圖）。請忽略邊框樣式。那只是爲了向你展示不同之處。希望你從中得到一個想法。 ：） 好運！！