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.