CODEWITHSUNDEEP
sencha-touchsencha-touch-2
MrFirthy
MrFirthy

Reputation: 81

Adding a Map above a List in Sencha Touch

I'm completely new to Sencha Touch and can't seem to find an answer to what I'm trying to do. I currently have a List view that shows the time schedule of an event. What I want to do is have a block above this list that shows a map of the venue location.

Here is my current code:

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
    }

});

Any help regarding this would be massively appreciated. If you any more code then just let me know.

Upvotes: 1

Views: 314

Answers (1)

ThinkFloyd
ThinkFloyd

Reputation: 5021

You should use vbox layout to break UI into 2 vertical blocks like this where top half will have map and bottom half will have list:

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 I haven't tested this code but that's the idea.

Upvotes: 1

Related Questions