Adding a Map above a List in Sencha Touch

Question

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.

score 1 · Accepted Answer · answered May 14 '13 at 11:26

1

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.

answered May 14 '13 at 11:26

ThinkFloyd

4,981
6
36
56

Your layout is over-nested. Why not just have the map and the list be the flexed items, why wrap them in a panel? – Evan Trimboli May 14 '13 at 11:44
This seperated the page in to two blocks but it no longer shows the list I originally had on the page. I think this may be because it was created as an extension of Ext.List. Is it possible to have this panel and list together on the same page?] – MrFirthy May 14 '13 at 11:52
@EvanTrimboli Could you provide an example of your approach Evan? Thanks very much – MrFirthy May 14 '13 at 11:53
1

I do that kind of nesting actually to keep list in panel which has `fit` layout because list doesn't render properly if its parent has `vbox` or `hbox` layout – ThinkFloyd May 14 '13 at 11:57
@ThinkFloyd But the list view is currently not rendering? Should both panels have a layout of fit to them then, is that what you're saying? – MrFirthy May 14 '13 at 12:04
I haven't tested it but this is what I was talking about http://stackoverflow.com/questions/16455732/sencha-touch-list-not-displaying-again – ThinkFloyd May 14 '13 at 12:23

Adding a Map above a List in Sencha Touch

1 Answers1