在Sencha Touch上添加列表上方的地圖

Question

我對Sencha Touch完全陌生，似乎無法找到我想要做的事情的答案。我目前有一個列表視圖，顯示事件的時間表。我想要做的是在此列表上方有一個塊，顯示場地位置的地圖。

這裏是我當前的代碼：

Main.js

Ext.define('eventApp.view.Home', { 

extend: 'Ext.List', 
xtype: 'schedulepanel', 
id: 'sched', 

config: { 
    title: '<span class="logo"></span>', 
    iconCls: 'time', 

    grouped: true, 
    itemTpl: '<div class="white-circle">{time}</div> <div class="list-title">{title}</div> <div class="list-desc">{description}</div>', 
    store: 'ScheduleList', 
    onItemDisclosure: true 
    } 

}); 

任何有關這幫助將大規模讚賞。如果你有任何更多的代碼，然後讓我知道。

Answer 1

您應該使用vboxlayout打破UI到這樣的2個垂直塊，其中上半部分將有地圖和下半部分將列表：

Ext.define('eventApp.view.Home', { 
    extend: 'Ext.Panel', 
    alias: 'widget.schedulepanel', 
    id: 'sched', 
    config : { 
     layout : 'vbox', 
     items : [{ 
      xtype : 'panel', 
      flex : 1, 
      items : [{ 
       xtype: 'map', 
       useCurrentLocation: true 
      }] 
     }, { 
      xtype : 'panel', 
      flex : 1, 
      items : [{ 
       iconCls: 'time', 
       grouped: true, 
       itemTpl: '<div class="white-circle">{time}</div> <div class="list-title">{title}</div> <div class="list-desc">{description}</div>', 
       store: 'ScheduleList', 
       onItemDisclosure: true 
      }] 
     }] 
    } 
}); 

PS我沒有測試代碼，但是這這個想法。