Layering DIV's above the map using ExtJS - HowTO

[David C. Stuart]

There has been a fair amount of discussion about how to do this on the
board, so I thought I would share this for those interested.

I am currently developing using ExtJS 2.2 (extjs.com). I had been
designing my UI based on the assumption that DIV's over the map would
not be possible. Recently I discovered that Ext had built in support
for iframe shims in browsers that require them (older one's, I
assume), and auto detects the browser for enabling/disabling this
feature. Iframe shims are the way that the layering has been enabled
by some people. Most notably, Markw65 has an example using the
prototype framework.

So, I dug around, and found that you could force using shims with:

Ext.useShims = true;
Ext.onReady(initGUI);
...

This worked but there were still some funky artifacts around the div,
which ended up being the shadow that Ext tries to put on floating
windows. So I disabled the shadow ('shadow: false' in the config of
the window) , and violla, it worked perfectly! I have both pop-up
type windows, and drop-down menus both working over the map. I have
tested IE6/7 and FF3 with no problems.

[bFlood]

you can disable shadows globally using the following hack

Ext.useShims = true; //automatic IFrame backgrounds
Ext.form.ComboBox.prototype.shadow = false;
Ext.Panel.prototype.shadow = false;
Ext.menu.Menu.prototype.shadow = false;

if the GEPlugin ever goes windowless then the above can easily be
turned back on

browsers - agreed, seems to work pretty well in all browsers (I'd add
Chrome to the list too). When I originally tried this with the first
release of the plugin, IE had issues so it seems Goog has changed
something.

cheers
brian