PDA

View Full Version : Newbie : Add Google Maps to a Ext.Panel



Sasha172
6 Sep 2011, 1:34 AM
Hi,
Im new to the entire Sencha/ExtJS coding.


I need to make a Nested list of Cities-->Areas-->Bus Stops.
On clicking the desired bus stop name the user gets redirected to the Ext.Panel where (as of now) I've only displayed the Bus stop name clicked on (this I did by following the Vimeo video tutorials) and a default map (that opens up in Los Altos)


This is the current code in the detail view :




BusView.views.Viewport = Ext.extend(Ext.NestedList, {
fullscreen: true,
title: 'Routes',
store: BusView.bus_store,
displayField: 'text',

//Making the leaf open a detail panel

getDetailCard: function(item, parent){ //leaf + parent

var itemData = item.attributes.record.data,
parentData = parent.attributes.record.data,

detailCard = new Ext.Panel({ //new Panel for the detail view
//scroll : 'vertical',
// styleHtmlContent: true,
// tpl : ["<h2>{text}</h2>","{info}"], //shows the title of the object and any additional info
fullscreen: true,
items: [
{
xtype: "",
xtype: "map"
}
]


});


detailCard.doLayout();
this.backButton.setText(parentData.text);

return detailCard;
},
...................





I've added in the map... How do i specify what coordinates it opens to and how do i let the user drag/zoom into the map ??

mwrf
7 Sep 2011, 10:39 AM
You need to call panTo() in the google.Maps.map class if you want to set the position of the map.
Details here:
http://code.google.com/apis/maps/documentation/javascript/reference.html#Map
(http://code.google.com/apis/maps/documentation/javascript/reference.html#Map)
This should help also : http://dev.sencha.com/deploy/touch/getting-started.html