ExtJS Panel with embedded google map

Question

I would like to have a panel with a google map using google's javascript api.

I have successfully created an ExtJS Window with a google map in it by passing The window's DOM object to the google-map constructor. However when I try this with a Panel (just replace Panel where Window is below). It tells me that 'body' is undefined. What am I doing wrong?

Thanks!

var window = new Ext.Window({ ... });

window.show(); //hack to get the dom built.

var d = window.body.dom; // <-- This line doesn't work for a Panel. Why???

var map = new GMap2(d); // Google Map takes the dom from the ExtJS Object.

Have you considered using the combination OpenLayers + GeoExt? — Chau

Daniel Attfield Daniel Attfield · Accepted Answer · 2011-03-09T13:57:07

It sounds like you're trying to access the element before it's actually been created. I'd try adding a listener to the afterrender event to your Window component, then calling a handler function which then accesses the element.

So add this type of thing to your panel config:

listeners: {
    afterrender: {
        fn: setupWindow,
        scope: this
     }
}

And then a function similar to this:

function setupWindow(obj) {
    var windowBodyHtmlElement;
    windowBodyHtmlElement = obj.body.dom;

    // ...do your stuff.
}

Hope that helps.

ExtJS Panel with embedded google map

1 Answers