[FIXED] an ext.map bug [Archive]

beebon

13 Nov 2011, 7:22 PM

All my source below:

1.Index.html
-------------------------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>my test</title>
<link rel="stylesheet" type="text/css" href="Touch/resources/css/sencha-touch.css" />
<script type="text/javascript" src="Touch/sencha-touch-debug.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=cn"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

-------------------------------------------------------------------------

2.app.js
-------------------------------------------------------------------------
Ext.Loader.setConfig({ enabled: true });

var app = new Ext.application({
name:'app',
launch: function () { Ext.create("app.view.AppPanel"); }
});

-------------------------------------------------------------------------

3.app.view.AppPanel
-------------------------------------------------------------------------
Ext.define("app.view.AppPanel", {
extend: 'Ext.tab.Panel',
requires: ['app.view.MapView'],
config: {
tabBarPosition: 'bottom',
fullscreen:true,
items: [

{
xtype: 'MapView',
title: 'view2'
},
{
title: 'view1',
html:'view1'
}
]
}
});
-------------------------------------------------------------------------

4.app.view.MapView
-------------------------------------------------------------------------
Ext.define('app.view.MapView', {
extend: 'Ext.Map',
xtype: 'MapView'
});
-------------------------------------------------------------------------

the question is : when I change the tab to mapview in chrome,the map shows umcompletely(see the image below),if I change the tabpanel items order like:
items: [
{
xtype: 'MappView',
title: 'view2'
},
{
title: 'view1',
html:'view1'
}
]
the map will shows rightly,I don't know if it's a bug ,have anyone met the same problem like that? need for your helping.ths!!!

http://beebon.net/images/mapview.pnghttp://beebon.net/images/mapview1.png

mitchellsimoens

14 Nov 2011, 9:09 AM

Looks like Ext.Map isn't getting the sizing at the right time as part of the Ext.Map is sized properly. Weird since card layout extends fit layout which makes the child component fit 100% height and width.

I'm going to move this to the bugs so that we can look into this issue.

mitchellsimoens

14 Nov 2011, 9:10 AM

Here is a simple test case

Ext.setup({
onReady: function() {

Ext.create('Ext.tab.Panel', {
fullscreen : true,
tabBarPosition : 'bottom',
items : [
{
xtype : 'panel',
title : 'One',
html : 'One'
},
{
xtype : 'map',
title : 'Map'
}
]
});

}
});

Jamie Avins

15 Nov 2011, 11:23 AM

This issues has been fixed for the next release.

beebon

15 Nov 2011, 11:13 PM

I am happy with all your answer and also want to get an notice as soon as next release.Thanks for everybody who help me.

aflx

18 Nov 2011, 4:13 AM

@Jamie: Do you already know when the next release is comming? Or is there a git repository, where I can download the latest changes?

Thanks,
Alex

aflx

18 Nov 2011, 4:48 AM

You can use this as workaround in a controller to refresh the map:

this.control({
'#map-view': {
show: function(target) {
var map = target.query("map")[0].getMap();
google.maps.event.trigger(map, 'resize');
}
}
});

Alex

Jamie Avins

18 Nov 2011, 9:08 AM

I want to try and wedge a release after Draggable and Event signature standardization is done and before Data and MVC. That should be early next week, but no promises!

aflx

18 Nov 2011, 10:25 AM

Sounds good :)

Btw: Why do you do this in the Map-Class in renderMap:

Ext.merge(mapOptions, {
center: new gm.LatLng(37.381592, -122.135672),

zoom: 12,

mapTypeId: gm.MapTypeId.ROADMAP

});

This always overrides my initial center value in the mapOptions for my map :s

Best regards
Alex

Jamie Avins

18 Nov 2011, 10:29 AM

I don't see us merging center, though it does force one is there isn't a center:

if (!mapOptions.hasOwnProperty('center')) {
mapOptions.center = new gm.LatLng(37.381592, -122.135672); // Palo Alto
}

aflx

18 Nov 2011, 10:42 AM

Ah, ok! So it was already changed ;-)
I found it in the sencha-touch-all-debug.js line 38062 (PR2).

Bye,
Alex