PDA

View Full Version : ExtJS Window floating over Google Earth plugin problem



chubyqc
25 Jun 2010, 5:22 AM
In this project, the google earth plugin is more or less taking all the browser's space and controls are displayed within ExtJS windows.

The main problem that I have is with IE(6, 7, 8).

Basically, it works fine, except when I click on the plugin, the windows disappear. It seems that something happens with the shims. I looked at the shims's style with IE8 debugger, but I couldn't figure out what was the problem. 'display' was set to 'block', which should be the right value.

That being said, when I toggle the 'display' value from 'block' to 'none' and back to 'block', my windows were back.

Another thing that makes my windows come visible again is when I move the mouse over the tabs that I have at the top of my app.

Usually, when the windows disappeared and then came back once, I can play with the Google Earth plugin without anymore problem.

So this is the main problem that I have, but there's also a minor display problem with the shims in IE6. They seem to be offset to their right be some pixels.

Finally, I also have a problem that others wrote about before which is the fact that when I go from the Google Earth plugin tab to another tab and then come back, the Google Earth plugin doesn't work anymore. It no big deal for me though since I don't think the final app will have such tab. I know there's a visibility plugin that could fix this issue, but since it's GPL, we probably can't use it.

Anyways, if anyone know anything about my main problem here, it'd be appreciated.

I just noticed : Risizing an ExtJS window floating over a Google Earth plugin doesn't work. Probably because the shim is resized only at the end. Dragging the window doesn't work too well, especially when dragging toward the top. Remember that these problems are not present with FF.

I found a new way to reproduce my main problem every time. If an extjs window is visible, and I click on a button within its body, and then I play with the globe, the window will disappear. As previously stated, moving the mouse over the tab at the top of the page will make the window reappear. I can repeat this loop endlessly.

Animal
25 Jun 2010, 6:52 AM
Try setting


Ext.useShims = true;


Then configuring your Ext.Windows with



{
...
floating: {
shim: true
}
...
}

chubyqc
25 Jun 2010, 7:15 AM
I wasn't aware of the existence of the floating option on the Ext.Window.

Unfortunately, it didn't change a thing. I believe that since I had already set Ext.useShims to true, shims were applied.

Also, note that initially, windows are correctly displayed over the Google Earth plugin.

All this could be a Google Earth plugin bug. But since the problem is with IE only, I don't know what to think.

That being said, I'd like to know why the Ext.Window becomes visible again just because I move my mouse over some tabs. Is there some javascript executed to change the tab's style that could also affect the Ext.Window's state?

By the way, it's the first time that I try to overlay an Ext.Window over Google Earth. That being said, I've had success displaying other html element over a Google Earth plugin.

Condor
25 Jun 2010, 7:28 AM
Isn't this Google Earth plugin bugreport (http://code.google.com/p/earth-api-samples/issues/detail?id=293) the same problem?

chubyqc
25 Jun 2010, 7:30 AM
By the way, it's the first time that I try to overlay an Ext.Window over Google Earth. That being said, I've had success displaying other html element over a Google Earth plugin.

To make sure that this was true, I went back and look at that other application that I did, and finally, to same problem exists in IE. I case that old app didn't have to work with IE.

This isn't the app that I'm talking about, but it has the same problem: http://maps.myosotissp.com/demos/popups.html

chubyqc
25 Jun 2010, 7:31 AM
Not exactly.

In my case, the order is right at first. But when I click on the plugin, then it's all wrong.

chubyqc
25 Jun 2010, 7:33 AM
Issue 471: Shim dialogs disappear when map window clicked

This is the bug that I have though.

So it seems that ExtJS can't really do anything about that.