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

6 Sep 2011, 1:34 AM
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"



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 ??

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:
This should help also : http://dev.sencha.com/deploy/touch/getting-started.html