PDA

View Full Version : Add map as child of TabPanel



isaacueca
22 Jun 2010, 8:03 AM
Hi guys,I'm trying to add a google map as a child of TabPanel item.
However the map once it renders covers the entire screen, including the tabs
This is the code that I'm using to call the map inside the tabpanel item, once I select the specific item:

title: 'map',
id: 'tab3',
listeners: {
activate: function(cmp) {
new Ext.Panel({
fullscreen: true,
items: [mapdemo],
})
}
}

And this is the code I'm using to create the map:

var position = new google.maps.LatLng(37.44885,-122.158592);
var mapdemo = new Ext.Map({
mapOptions: {
center: position,
disableDefaultUI: true,
zoom: 5,
},
maskMap: true,
});

Any help would be much appreciated it!

TommyMaintz
22 Jun 2010, 1:55 PM
It seems like you are creating a full screen panel on the activate event of the tab card. The items you pass to a TabPanel are the cards. So basically what you are trying to do is make the third tabcard a map. Thus try the following code.



title: 'Map',
id: 'tab3',
xtype: 'map',
mapOptions: {
center: new google.maps.LatLng(37.44885,-122.158592),
disableDefaultUI: true,
zoom: 5
}

isaacueca
23 Jun 2010, 6:46 AM
Hey Tommy thank you so much for your quick answer. It worked like a charm!
I'm looking forward to sharing with all of you the project that I'm working on.
It's shaping up very quickly thanks to Sencha!
Again, many thanks for your help

umenokin
25 Aug 2010, 6:49 AM
title: 'Map',
id: 'tab3',
xtype: 'map',
mapOptions: {
center: new google.maps.LatLng(37.44885,-122.158592),
disableDefaultUI: true,
zoom: 5
}Hi!
How I can set marker in this style?