google-maps-api-3sencha-touchtabpanel

Sencha Touch: Ext.Map within TabPanel


I'm quite new to sencha touch. The goal is to create an app which has a TabPanel containing four Tabs, one of them should be a map (the others are a NestedList and two Panels working like a charm). I've tried to make the map card like

NPApp.views.Mapcard = Ext.extend(Ext.Map, { ...

where I ended up with getting really strange results like some views are overlapping and no map is shown.

The second try was to creating a Panel, embed it into the TabPanel and add a map to the panel, where I get this error:

Uncaught TypeError: Cannot read property 'ROADMAP' of undefined; sencha-touch-debug.js:24840

I've already tried to change the mapType to google.map.MapTypeID like mentioned in the Google Map API V3, no success there.

I just can't get the hang on it, hope you can give me some hints!

The App:

NPApp = new Ext.Application({
    name: "NPApp",
    title: "NextPuff",
    icon: 'images/icon.png',
    tabletStartupScreen: 'images/index_default.jpg',
    phoneStartupScreen: 'images/index_default.jpg',
    
    launch: function() {
        this.views.viewport = new this.views.Viewport();
        this.views.homecard = this.views.viewport.getComponent('navi');
    }

});

The Viewport:

NPApp.views.Viewport = Ext.extend(Ext.TabPanel, {
    fullscreen: true,
    store: NPApp.npstore,


    initComponent: function() {


        Ext.apply(this, {
            tabBar: {
                dock: 'bottom',
                layout: {
                    pack: 'center'
                }
            },
            items: [
                { xtype: 'homecard', stretch: true},
                { xtype: 'searchcard', id: 'navi' },
        { xtype: 'mapcard' },
                { xtype: 'morecard' }
            ]
        });
        NPApp.views.Viewport.superclass.initComponent.apply(this, arguments);
    }
});

The Mapcard:

NPApp.views.Mapcard = Ext.extend(Ext.Panel, {
    title: "Map",
    iconCls: "map",


    initComponent: function() {
        var npMap = new Ext.Map({
            title: 'Map',
            useCurrentLocation: true,
            listeners: {
                centerchange : function(comp, map){
                //    refreshMap(map);
                }
           },
            mapOptions : {
                mapTypeControl : false,
                navigationControl : false,
                streetViewControl : false,
                backgroundColor: 'transparent',
                disableDoubleClickZoom: true,
                zoom: 17,
                draggable: false,
                keyboardShortcuts: false,
                scrollwheel: false
           }
        });
        Ext.apply(this, {
            defaults: {
                styleHtmlContent: true
            },
                items: [npMap]
        });
        NPApp.views.Homecard.superclass.initComponent.apply(this, arguments);
    }
});


Ext.reg('mapcard', NPApp.views.Mapcard);

Sencha 1.1.0; Google JavaScript Maps API V3; Safari 5.1


Solution

  • I have a similar application running. Your tabpanel is perfect. All you need to alter is your map code.... Try this instead :

    var map = new Ext.Map({
            mapOptions : {
                center : center,
                zoom : 20,
                mapTypeId : google.maps.MapTypeId.HYBRID,
                navigationControl: true,
                navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.DEFAULT
                    }
            },
    
            listeners : {
                maprender : function(comp, map){
    
                    var marker = new google.maps.Marker({
                         position: center,
                         //title : 'Sencha HQ',
                         map: map
                    });
                    setTimeout( function(){map.panTo (center);} , 1000);
                }
    
            },
    
             geo:new Ext.util.GeoLocation({
                  autoUpdate:true,
                  maximumAge: 0,
                  timeout:2000,
                  listeners:{
                    locationupdate: function(geo) {
                      center = new google.maps.LatLng(geo.latitude, geo.longitude);
                      if (map.rendered)
                        map.update(center)
                      else
                        map.on('activate', map.onUpdate, map, {single: true, data: center});
                    },
                     locationerror: function (   geo,
                                                bTimeout, 
                                                bPermissionDenied, 
                                                bLocationUnavailable, 
                                                message) {
                        if(bLocationUnavailable){
                            alert('Your Current Location is Unavailable on this device');
                        }
                        else{
                            alert('Error occurred.');
                        }      
                     }
                  }
             })
    
      });
    

    This creates the map object and sets the center to ur current location. Now you need to dock this object inside an Ext.extend(Ext.Panel({}) object. Ive tried directly creating the map object but it needs a panel to display on.

    So you're panel code should go something like so:

    NPApp.views.Mapcard = new Ext.extend(Ext.Panel({
            iconCls : 'map',
            title : 'Map',
    
            layout: 'card',
            ui: 'light',
            items: [map],
            listeners:{
            }            
        });
    )
    

    It took me ages of going thru a dozen or more examples to make the current location work. This is a combination of several codes and a bunch of stuff in the Google API.

    Lemme know if you have any more questions about Google Maps or directions.

    Cheers :) Sasha