Google Map inside Ext.Sheet not displaying

[cooperka]

I modified this from the "overlays" example (http://dev.sencha.com/deploy/touch/e...ays/index.html) to include a Google map inside a Sheet rather than HTML inside a Panel. Apparently this is either not possible to do, or I am doing something wrong. If anyone could point me in the right direction I would appreciate it. My whole project file is also attached below.

When you click the check-box it is supposed to display a Sheet with a Map inside it. Instead it displays a blank Sheet with nothing in it, just a big blue box. There are no errors in the console.

console.log("click");

var position = new google.maps.LatLng(37.44885, -122.158592),  //Sencha HQ


    infowindow = new google.maps.InfoWindow({
        content: 'Sencha HQ'
    }),
    
    mapdemo = Ext.create('Ext.Map', {
        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
            }
        },
        
        listeners: {
            maprender: function(comp, map) {
                var marker = new google.maps.Marker({
                    position: position,
                    title : 'Sencha HQ',
                    map: map
                });
        
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, marker);
                });
        
                setTimeout(function() {
                    map.panTo(position);
                }, 1000);
            }
        }
    });


overlay = Ext.Viewport.add({
    xtype: 'sheet',
    top: 50,
    height: '100%',
    width: '100%',
    hideOnMaskTap: true,
    items: [mapdemo]
});


console.log("created");

[bricemason]

To get this to render, add a layout to your sheet. So adding that sheet to your viewport would look like:

overlay = Ext.Viewport.add({
    xtype: 'sheet',
    top: 50,
    layout: 'fit',
    height: '100%',
    width: '100%',
    hideOnMaskTap: true,
    items: [mapdemo]
});

Brice

[cooperka]

That worked thank you!