Sencha touch 在Sencha Touch中的列表上方添加地图

我对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
    }

});

Ext.define（'eventApp.view.Home'{
扩展：“Ext.List”，
xtype:“schedulepanel”，
id:'sched'，
配置：{
标题：“”，
iconCls:“时间”，
对,，
itemTpl:“{time}{title}{description}”，
存储区：'ScheduleList'，
这是真的吗
}
});

---

对此，我们将不胜感激。如果您需要更多的代码，请告诉我。

您应该使用

vbox

将UI分成两个垂直块，如下所示，上半部分有地图，下半部分有列表：

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
            }]
        }]
    }
});

Ext.define（'eventApp.view.Home'{
扩展：“Ext.Panel”，
别名：“widget.schedulepanel”，
id:'sched'，
配置：{
布局：“vbox”，
项目：[{
xtype:'面板'，
弹性：1，
项目：[{
xtype:'map'，
useCurrentLocation:true
}]
}, {
xtype:'面板'，
弹性：1，
项目：[{
iconCls:“时间”，
对,，
itemTpl:“{time}{title}{description}”，
存储区：'ScheduleList'，
这是真的吗
}]
}]
}
});

---

PS我还没有测试过这段代码，但这就是我的想法。

您应该使用

vbox

将UI分成两个垂直块，就像这样，上半部分有地图，下半部分有列表：

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
            }]
        }]
    }
});

Ext.define（'eventApp.view.Home'{
扩展：“Ext.Panel”，
别名：“widget.schedulepanel”，
id:'sched'，
配置：{
布局：“vbox”，
项目：[{
xtype:'面板'，
弹性：1，
项目：[{
xtype:'map'，
useCurrentLocation:true
}]
}, {
xtype:'面板'，
弹性：1，
项目：[{
iconCls:“时间”，
对,，
itemTpl:“{time}{title}{description}”，
存储区：'ScheduleList'，
这是真的吗
}]
}]
}
});

---

PS我还没有测试过这段代码，但这就是我的想法。

您的布局嵌套过度了。为什么不让地图和列表成为弯曲的项目，为什么要将它们包装在一个面板中？这将页面分为两个块，但它不再显示我最初在页面上的列表。我想这可能是因为它是作为Ext.List的扩展创建的。是否可以将此面板和列表放在同一页上？]@Evantimboli您能提供一个方法示例吗Evan？非常感谢，我实际上做了这种嵌套来保持列表在具有

fit

布局的面板中，因为如果列表的父级具有

vbox

或

hbox

layout@ThinkFloyd但是列表视图当前没有呈现？如果两个面板都有适合它们的布局，那么这就是你说的吗？你的布局太过嵌套了。为什么不让地图和列表成为弯曲的项目，为什么要将它们包装在一个面板中？这将页面分为两个块，但它不再显示我最初在页面上的列表。我想这可能是因为它是作为Ext.List的扩展创建的。是否可以将此面板和列表放在同一页上？]@Evantimboli您能提供一个方法示例吗Evan？非常感谢，我实际上做了这种嵌套来保持列表在具有

fit

布局的面板中，因为如果列表的父级具有

vbox

或

hbox

layout@ThinkFloyd但是列表视图当前没有呈现？那么，两个面板是否都应该有适合它们的布局，这就是你所说的吗？