Sencha Map & TabPanel Size Issue [FIX]

So it seems like there’s a size error with Sencha Touch 1. When you load a map into a TabPanel element the map stays tiny and refuses to fill the whole panel no matter what size you specify. Well after a lotta searching I finally found the solution to the Sencha Bug.

Here’s what the error looks like.

As you can see the map appears small in size rather than filling the entire panel. The map controls seem to be all working and the dragging of the tiny map pans the area. The map will resize if you change the browser size (tested on Chrome and Safari (both on Win 7 & Mac OS 10.7).

I’ve included the Code along with the fix below :

TabPanel Code :

views.MainScreen = Ext.extend(Ext.TabPanel,{

id : ‘mainapp’,
layout : ‘fit’,
fullscreen : true,

tabBar : {
dock : ‘bottom’,
layout : {
pack : ‘center’
}
},

items : [
map                      //add map object
],

listeners : {           //FIX for Map Resize Issue

show : function(){
map.map.panTo(pos);
google.maps.event.trigger(map.map, ‘resize’);
}
}

});

Map Code :

var map = new Ext.Map({
    id : ‘mymap’,
    fullscreen : true,
    layout : ‘fit’,
        mapOptions: {
            zoom: 5,
            center : pos,
            mapTypeId: google.maps.MapTypeId.HYBRID,
            navigationControl : true,
            navigationControlOptions : { style: google.maps.NavigationControlStyle.DEFAULT }
        },
        listeners : {
            beforeshow : function(){
                var marker = new google.maps.Marker({
                    position : pos,
                    map : map,
                });
                setTimeout(function(){map.panTo(pos);},1000)
            },
            maprender : function(comp,map){
                pos = indiaPos;
                var marker = new google.maps.Marker({
                    position : pos,
                    map : map,
                    title : ‘Bayer Eco Commercial Building, Noida’
                });
                setTimeout(function(){map.panTo(pos);},1000)
            }
        },
        geo:new Ext.util.GeoLocation({
            autoUpdate:false,
            timeout : 2000,
            listeners:{
                locationupdate: function(geo) {
                    pos = indiaPos;
                    if (map.rendered)
                        map.update(pos);
                    else
                        map.on(‘activate’, map.onUpdate, map, {single: true, data: pos});
                },
                locationerror: function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
                    if(bLocationUnavailable)
                        //alert(“Your current location is unavailable on this device”);
                    if(bPermissionDenied)
                        alert(“Location capabilities have been disabled on this device”);
                }
            }
        })
    });

Now your map should resize to the correct size and fill the entire panel 🙂

Advertisements

6 thoughts on “Sencha Map & TabPanel Size Issue [FIX]

  1. ok but my problem is not that size of the map displayed i was not able to get that right but unable to retrieve current loc,as i am hardcodin the lat and long.value in code itself…and once i put this code in that js file it ain’t works

  2. no no i am not harcodin the values ……once i hardcode them it will surely pick up the location assigned but i need that map should fig out current location by itself…

    • Are you sure you used the “geo : Ext.util.GeoLocation” function accurately ?? Paste in your code here. Maybe I can figure out whats wrong. Hard to tell you the mistake without seeing the code.

Leave a message :)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s