PDA

View Full Version : [FIXED] Ext.Map rendered incorrect in initially hidden Ext.tab.Panel



SunboX
21 Oct 2011, 6:47 AM
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:


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

knifegun
21 Oct 2011, 10:09 AM
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.

knifegun
24 Oct 2011, 12:23 PM
Bump? Anyone?

knifegun
26 Oct 2011, 9:29 AM
Is there an obvious solution to this one or has no one else tried this?

knifegun
26 Oct 2011, 11:26 AM
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:



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:



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

SunboX
26 Oct 2011, 11:29 AM
Did you look at my first post? There´s a fix/workaround included in the code. ;o)

greetings Sunny

knifegun
26 Oct 2011, 11:41 AM
Oops. No I did not. Thanks for the heads up!

Jamie Avins
31 Oct 2011, 11:58 AM
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.

sebastianwoinar
22 Nov 2011, 2:15 AM
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.



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


Cheers Seb.

Jamie Avins
30 Nov 2011, 10:23 AM
This issue has been fixed for the next release.

minorbug
4 Dec 2011, 7:07 PM
@jamieavins I have pr2 and am having the same issue. Was it fixed on pr2 or the next release?

rdougan
5 Dec 2011, 1:16 AM
@minorbug

The next release.