Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-937 in a recent build.
  1. #1
    Sencha User SunboX's Avatar
    Join Date
    Mar 2010
    Posts
    238
    Vote Rating
    28
    SunboX has a spectacular aura about SunboX has a spectacular aura about

      0  

    Exclamation Ext.Map rendered incorrect in initially hidden Ext.tab.Panel

    Ext.Map rendered incorrect in initially hidden Ext.tab.Panel


    I´ve put an Ext.Map into an initially hidden Ext.tap.Panel. After sliding the TabPanel in and clicking on the Tap containing the Ext.Map, the map tiles are mostly hidden. The map´s user controls are displayed correct.
    Seems the map has wrong "screen" size on rendering state and get´s scaled down (or up) on show.

    I could fix this bug by forcing the map to rerender if the tab gets shown. Tab content panel with map:
    Code:
    Ext.define('App.view.TestMap', {
        
        extend: 'Ext.Panel',
        xtype : 'testmap',
        
        config: {
            title: 'Map',
            iconCls: 'maps',
            layout: 'fit',
            fullscreen: true,
            items: [{
                xtype: 'map',
                id: 'testMap',
                layout: 'fit',
                fullscreen: true
            }]
        },
        
        initialize: function() {
            this.callParent();
           
            // FIX: Rendering Problem von Sencha Touch 2.0.0-pr1
            var map = Ext.getCmp('testMap').map;
            this.on({
                show: function(){
                    google.maps.event.trigger(map, 'resize');
                    map.panTo(new google.maps.LatLng(50.71462, 12.496889));
                }
            });
            // FIX: Rendering Problem von Sencha Touch 2.0.0-pr1
        }
    });
    If I use any other than Ext.tab.Panel, all works fine.

    greetings Sunny

  2. #2
    Touch Premium Member
    Join Date
    Nov 2007
    Posts
    38
    Vote Rating
    0
    knifegun is on a distinguished road

      0  

    Default


    I am running into this exact issue. I was trying to see if there was still an 'activate' equivalent to resize the map to the correct size.

  3. #3
    Touch Premium Member
    Join Date
    Nov 2007
    Posts
    38
    Vote Rating
    0
    knifegun is on a distinguished road

      0  

    Default


    Bump? Anyone?

  4. #4
    Touch Premium Member
    Join Date
    Nov 2007
    Posts
    38
    Vote Rating
    0
    knifegun is on a distinguished road

      0  

    Default


    Is there an obvious solution to this one or has no one else tried this?

  5. #5
    Touch Premium Member
    Join Date
    Nov 2007
    Posts
    38
    Vote Rating
    0
    knifegun is on a distinguished road

      0  

    Default


    I notice that if I resize the browser window (testing on Safari 5.1.1 on OS X Lion), that the Google map does get refreshed to display correctly. I tried listening to the 'show' panel even and tried a bunch of methods including the layout reapply() method to no avail. Any other ideas?

    Here is the code for a Google panel I created based on the Google Map example:

    Code:
    Ext.require([
        'Ext.Map',
        'Ext.Button',
        'Ext.SegmentedButton',
        'Ext.Panel',
        'Ext.Toolbar'
    ]);
    
    function createMap() {
    
        // The following is accomplished with the Google Map API
        var position = new google.maps.LatLng(37.44885, -122.158592);  //Sencha HQ
    
        var infowindow = new google.maps.InfoWindow({
            content: 'Sencha Touch HQ'
        });
    
        //Tracking Marker Image
        var image = new google.maps.MarkerImage(
            'point.png',
            new google.maps.Size(32, 31),
            new google.maps.Point(0, 0),
            new google.maps.Point(16, 31)
        );
    
        var shadow = new google.maps.MarkerImage(
            'shadow.png',
            new google.maps.Size(64, 52),
            new google.maps.Point(0, 0),
            new google.maps.Point(-5, 42)
        );
    
        var trackingButton = Ext.create('Ext.Button', {
            iconMask: true,
            iconCls : 'locate'
        });
    
        var toolbar = Ext.create('Ext.Toolbar', {
            docked: 'top',
            ui : 'light',
            defaults: {
                iconMask: true
            },
            items : [
                {
                    position : position,
                    iconCls  : 'home',
                    handler : function() {
                        //disable tracking
                        toolbar.setActiveItem(trackingButton, false);
                        mapdemo.map.panTo(this.position);
                    }
                },
                {
                    xtype : 'segmentedbutton',
                    allowMultiple : true,
                    listeners : {
                        toggle : function(buttons, button, active) {
                            if (button.iconCls == 'maps') {
                                mapdemo.traffic[active ? 'show' : 'hide']();
                            } else if (button.iconCls == 'locate') {
                                mapdemo.geo[active ? 'resumeUpdates' : 'suspendUpdates']();
                            }
                        }
                    },
                    items : [
                        trackingButton,
                        {
                            iconMask: true,
                            iconCls: 'maps'
                        }
                    ]
                }
            ]
        });
    
        var mapdemo = Ext.create('Ext.Map', {
            //fullscreen: 'true',
            config: {
                width: '100%',
                height: '100%'
            },
            mapOptions : {
                center : new google.maps.LatLng(37.381592, -122.135672),  //nearby San Fran
                zoom : 12,
                mapTypeId : google.maps.MapTypeId.ROADMAP,
                navigationControl: true,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.DEFAULT
                }
            },
    
            plugins : [
                new Ext.plugin.GMap.Tracker({
                    trackSuspended : true,   //suspend tracking initially
                    highAccuracy   : false,
                    marker : new google.maps.Marker({
                        position: position,
                        title : 'My Current Location',
                        shadow: shadow,
                        icon  : image
                    })
                }),
                new Ext.plugin.GMap.Traffic({ hidden : true })
            ],
    
            listeners : {
                maprender : function(comp, map) {
                    console.log("");
    
                },
                show: function() {
                    console.log("SHOW");
                }
    
            }
        });
    
        navigator.geolocation.getCurrentPosition(
            function(position) {
                _position = position;
    
                var geoLocationResult = '<table class="positionTable">' +
                    '<tr><th>Latitude</th><td>' + position.coords.latitude + '</td></tr>' +
                    '<tr><th>Longitude</th><td>' + position.coords.longitude + '</td></tr>' +
                    '<tr><th>Altitude</th><td>' + position.coords.altitude + '</td></tr>' +
                    '<tr><th>Accuracy</th><td>' + position.coords.accuracy + '</td></tr>' +
                    '<tr><th>Altitude Accuracy</th><td>' + position.coords.altitudeAccuracy + '</td></tr>' +
                    '<tr><th>Heading</th><td>' + position.coords.heading + '</td></tr>' +
                    '<tr><th>Speed</th><td>' + position.coords.speed + '</td></tr>' +
                    '<tr><th>Timestamp</th><td>' + new Date(position.timestamp) + '</td></tr>' +
                    '</table>';
    
                var googleLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                var marker = new google.maps.Marker({
                    position: googleLatLng,
                    title : 'Current Position',
                    map: mapdemo.map
                });
    
                var infowindow = new google.maps.InfoWindow({
                    content: geoLocationResult
                });
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(mapdemo.map, marker);
                });
    
                setTimeout(function() {
                    mapdemo.map.panTo(googleLatLng);
                }, 1000);
    
            },
            function(error) {
                if (typeof _sourcePanel !== "undefined") {
                    _sourcePanel.setLoading(false);
                }
    
                console.error(error);
            }
        );
    
        return Ext.create('Ext.Panel', {
            //fullscreen: true,
            config: {
                width: '100%',
                height: '100%'
            },
            title: 'Google Map',
            layout: 'fit',
            cls: 'mapCls',
            items: [toolbar, mapdemo],
            listeners: {
                show: function() {
                    this.getLayout().reapply();
                }
            }
        });
    }
    Here is the code that adds the Google map panel to a tab panel:

    Code:
    Ext.setup({
        tabletStartupScreen: 'app/resources/images/tablet_startup.png',
        phoneStartupScreen: 'app/resources/images/phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function() {
    
            Ext.create('Ext.tab.Panel', {
                fullscreen: true,
                type: 'dark',
                sortable: true,
                items: [
                    {
                        title: 'Tab 1',
                        html: '1',
                        cls: 'card1',
                        iconCls: 'bookmarks'
                    },
                    createMap()
                ]
            });
        }
    });

  6. #6
    Sencha User SunboX's Avatar
    Join Date
    Mar 2010
    Posts
    238
    Vote Rating
    28
    SunboX has a spectacular aura about SunboX has a spectacular aura about

      0  

    Default


    Did you look at my first post? There´s a fix/workaround included in the code. ;o)

    greetings Sunny

  7. #7
    Touch Premium Member
    Join Date
    Nov 2007
    Posts
    38
    Vote Rating
    0
    knifegun is on a distinguished road

      0  

    Default


    Oops. No I did not. Thanks for the heads up!

  8. #8
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Thank you for the report, note that the Ext.Map class isn't quite 100% yet and will have additional work done to it before release.

  9. #9
    Sencha User
    Join Date
    Oct 2011
    Posts
    20
    Vote Rating
    0
    sebastianwoinar is on a distinguished road

      0  

    Default


    Thanks for the workaround. I had similar troubles.

    Because I set the zoom attribute, I even had to go a step further and trigger the zoom event too.

    Code:
            google.maps.event.trigger(this.googleMap, 'resize');
            google.maps.event.trigger(this.googleMap, 'zoom_changed');
            this.googleMap.setCenter(coords);
    Cheers Seb.

  10. #10
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    This issue has been fixed for the next release.

    Sencha Inc

    Jamie Avins

    @jamieavins