1. #1
    Ext User
    Join Date
    Oct 2007
    Posts
    5
    Vote Rating
    0
    tleeuwenburg is on a distinguished road

      0  

    Default Struggling to show an Ext.Map

    Struggling to show an Ext.Map


    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:

    Code:
    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:

    Code:
    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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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...

    Code:
    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:

    Code:
    Ext.define('GS.view.LiveMap', {
        extend: 'Ext.Map',
        xtype : 'livemap',
    
        config: {
            title: 'LiveMap',
            iconCls: 'info',
            useCurrentLocation: true
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1