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

你应该使用vbox layout将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 我还没有测试过这段代码，但这就是想法。

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

1 个答案: