煎茶触摸布局问题

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

    }); 

如你想这是一样的（每截图）。请忽略边框样式。那只是为了向你展示不同之处。希望你从中得到一个想法。 ：） 好运！！