Struggling to show an Ext.Map

[tleeuwenburg]

Hi all,

Apologies for my poor debugging skills, I am a back-end programmer usually I am trying to put an Ext.Map view into a tab panel.

My LiveMap.js file reads:

Ext.define('GS.view.LiveMap', {
    extend: 'Ext.Panel',
    requires: ['Ext.Map'],

    config: {
        title: 'LiveMap',
        iconCls: 'info',

        items: {
            xtype: 'map',
            useCurrentLocation: true
        }
    }
});

So it's very basic. It's included inside the tabPanel Main.js, whose code is also simple:

Ext.define('GS.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    fullscreen: true,
    requires: [
        'Ext.TitleBar',
        'Ext.Video',        
    ],
    config: {
        tabBarPosition: 'bottom',

        items: [
            new GS.view.Home(),
            new GS.view.Forecast(),
            new GS.view.Radar(),
            new GS.view.Alerts(),
            new GS.view.LiveMap(),
            new GS.view.Contact(),
        ]
    }
});

Nothing much going on. The application does load. The console shows no errors but there is no map either. The other tabs are fine. Does anyone have any suggestions for how to proceed? There's no error... just no map.

Any hints gratefully accepted.

[mitchellsimoens]

Couple things you are doing wrong here. First, when you use Ext.define to create an extension of a component, you need to give it an xtype...

Ext.define('GS.view.LiveMap', {
    extend: 'Ext.Panel',
    xtype : 'livemap',

    requires: ['Ext.Map'],

    config: {
        title: 'LiveMap',
        iconCls: 'info',

        items: {
            xtype: 'map',
            useCurrentLocation: true
        }
    }
});

Also, when you specify items, you should not be creating instances like you are in the GS.view.Main component you have. You should use objects using the xtype like you did when specifying the items in the GS.view.LiveMap component.

The issue here is you are overnesting which means that you have a component within a container where you don't need the container. The GS.view.LiveMap should extend Ext.Map not Ext.Panel as there is no reason (from the code you posted) you need it wrapped in Ext.Panel:

Ext.define('GS.view.LiveMap', {
    extend: 'Ext.Map',
    xtype : 'livemap',

    config: {
        title: 'LiveMap',
        iconCls: 'info',
        useCurrentLocation: true
    }
});