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.

Answer 1

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.