Map not rendering correctly

[aasanchez]

I'm trying to add a Map to a Panel. The panel has a Toolbar to display the title.
Here is the code:

 myhelloworld.ui.MyMap = Ext.extend(Ext.Panel,{
 
 	id:'myMapPanel',
	fullscreen:true,
	title:'My Map',
	iconCls:'icon-mymap',
	layout:'auto',
	items:this.items,
	
	initComponent: function(){
	
		this.titlebar = new Ext.Toolbar({
			title:'My Map',
			dock:'top'
		});
		
		this.map = {
			xtype:'map',
			id:'mymap',
			fullscreeen:true,
        	title: 'My Loc.',
       	//getLocation: true,   // Gets user's current location
        	mapOptions: {        // Used in rendering map
         	zoom: 12
        	}        
    		};//eo map panel
		
		this.items = [this.titlebar, this.map];	
		
		myhelloworld.ui.MyMap.superclass.initComponent.apply(this,arguments);
	
	}, //eo initComponent
 
 	onLoad: function(){
 		console.log('OnLoad MyMap called...');
  	}
 
 });//eo MyMap Class

When the app renders and I click on the icon to take me to the map, the map looks like this:
http://alvarosanchez.com/tempUpload/map.png

If I resize the browser window (while testing) even just a little then the whole map shows.
Any ideas?
Thanks !

[evant]

You probably want something more like this:

myhelloworld.ui.MyMap = Ext.extend(Ext.Panel, {

    id: 'myMapPanel',
    fullscreen: true,
    title: 'My Map',
    iconCls: 'icon-mymap',
    layout: 'fit',
    
    initComponent: function(){
    
        this.titlebar = new Ext.Toolbar({
            title: 'My Map',
            dock: 'top'
        });
        
        this.map = {
            xtype: 'map',
            id: 'mymap',
            fullscreeen: true,
            title: 'My Loc.',
            //getLocation: true,   // Gets user's current location
            mapOptions: { // Used in rendering map
                zoom: 12
            }
        };//eo map panel
        this.items = [this.map];
        this.dockedItems = [this.titleBar];
        
        myhelloworld.ui.MyMap.superclass.initComponent.apply(this, arguments);
        
    }, //eo initComponent
    onLoad: function(){
        console.log('OnLoad MyMap called...');
    }
    
});//eo MyMap Class

[aasanchez]

Evan,
Thanks for the help, but I tried this already and what happens is that the tabBar at the bottom disappears.

Here is the code I'm using for the tabbed component:

myhelloworld.App = Ext.extend(Ext.TabPanel,{

	id:'tabpanel',
	fullscreen:true,
	ui:'black',
	tabBar: {
		centered:true,
		dock:'bottom',
		layout: {pack:'center'}
	},
	animation:'slide',
	scroll:false,
	//monitorOrientation:true,
	
	initComponent: function(){		

		// components
		this.myInfo = new myhelloworld.ui.MyInfo();
		this.myMap = new myhelloworld.ui.MyMap();

		this.items = [
			this.myInfo,
			this.myMap			
		];

		myhelloworld.App.superclass.initComponent.apply(this,arguments);

		// events
		this.myInfo.on('activate',this.onMyInfoActivate,this);
		this.myMap.on('activate',this.onMyMapLoad,this);

	},

	getTitleBar: function(){
		return this.titleBar;
	},

	onMyInfoActivate: function(){
		this.myInfo.onLoad();		
	},

	onMyMapLoad: function(){
		this.myMap.onLoad();
	}

});

[j2h]

I have the same problem as mentioned above: the map is rendered with parts in grey (and a wrong position) and becomes healthy by reload (which is a problem on mobile).
I assumed that css is responsible (because of the wrong position) but it is not (tried without custom css).

My code looks quite similar to the posted ones:

dummy.views.dummy = Ext.extend(Ext.Container, {
id: 'view-fm',
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
width: '100%',
height: '46pt',
xtype: '...'
},{
flex: 2,
xtype: 'map',
mapOptions : {
zoom: 5
}
}]
});

[dontbugme]

Someone has known how to fix it?

[won.rhee]

I remember I had similar problems using TabPanel.
Now I am attaching the bottom "tabbar" wrapped in Ext.Panel in my Viewport, using card layout.
Then using setActiveItem, I render views I want, each using layout: fit so that it'll "fit" into items section of Viewport.
Have you tried "layout:'fit'" in your MyMap ui?

 myhelloworld.ui.MyMap = Ext.extend(Ext.Panel,{
 
     id:'myMapPanel',
    fullscreen:true,
    title:'My Map',
    iconCls:'icon-mymap',
    layout:'auto', //TRY layout:'fit'
    items:this.items,
    
    initComponent: function(){
    
        this.titlebar = new Ext.Toolbar({
            title:'My Map',
            dock:'top'
        });
        
        this.map = {
            xtype:'map',
            id:'mymap',
            fullscreeen:true,
            title: 'My Loc.',
           //getLocation: true,   // Gets user's current location
            mapOptions: {        // Used in rendering map
             zoom: 12
            }        
            };//eo map panel
        
        this.items = [this.titlebar, this.map];    
        
        myhelloworld.ui.MyMap.superclass.initComponent.apply(this,arguments);
    
    }, //eo initComponent
 
     onLoad: function(){
         console.log('OnLoad MyMap called...');
      }
 
 });//eo MyMap Class