1. #1
    Sencha User
    Join Date
    Mar 2009
    Posts
    8
    Vote Rating
    0
    aasanchez is on a distinguished road

      0  

    Default Map not rendering correctly

    Map not rendering correctly


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

    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 !

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,813
    Vote Rating
    607
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    You probably want something more like this:

    Code:
    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
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User
    Join Date
    Mar 2009
    Posts
    8
    Vote Rating
    0
    aasanchez is on a distinguished road

      0  

    Default


    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:

    Code:
    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();
    	}
    
    });

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    1
    Vote Rating
    0
    j2h is on a distinguished road

      0  

    Exclamation Same problem here

    Same problem here


    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
    }
    }]
    });
    Attached Images
    Last edited by j2h; 30 Jun 2011 at 12:01 PM. Reason: neutralize code

  5. #5
    Sencha User
    Join Date
    Jun 2010
    Posts
    66
    Vote Rating
    0
    dontbugme is on a distinguished road

      0  

    Default map

    map


    Someone has known how to fix it?

  6. #6
    Sencha User
    Join Date
    Jun 2011
    Posts
    52
    Vote Rating
    0
    won.rhee is on a distinguished road

      0  

    Default


    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?

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

Similar Threads

  1. [FIXED-207] Ext.Map: wrapped map unavailable in afterRender
    By cnelissen in forum Sencha Touch 1.x: Bugs
    Replies: 2
    Last Post: 8 Sep 2010, 7:05 PM
  2. Map not resizing or positioning correctly
    By gevely in forum Ext GWT: Help & Discussion (1.x)
    Replies: 1
    Last Post: 4 Mar 2009, 11:03 PM
  3. Map not resizing or positioning correctly
    By gevely in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 23 Feb 2009, 1:21 AM
  4. Panel in tab + google map -> rendering problem
    By Ujoux in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 8 Nov 2008, 3:51 AM
  5. JasonReader how to correctly map these fields?
    By ntulip in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 11 Feb 2008, 12:39 AM

Thread Participants: 4

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi