I'm trying to make work a custom popup with a datagrid. The popup visually displays correctly, but the problem is how events propagate.
The popup is an ext panel (with a datagrid) who is rendered on a div. This div is set as the element of the ol.Overlay added to the map.
The event propagation problem
For the event propagation, the ol.Overlay have the 'stopEvent' option. If it is setted to true, the click events doesn't work on the popup. You can select elements on the grid, or select the 'Save' button but to press the button (or edit the grid element) you have to select the element and then press enter on the keyboard.
If 'stopEvent' option is setted to false, the popup events fires ok, but if you double-click the popup the map is zoomed, if you drag the popup the map is dragged too, etc...
You can view and test the code here:
Sorry I couldn't make the styles work on the fiddle it should look like this:
Another trouble with the fiddle (that works ok on my app) is when stopEvent is setted to true, if you select an element on the grid and press enter it always edit the first value, just ignore that.
I don't know what should be the next step. Try to use stopEvent=false and do something to priorize the panel events over the ol.Overlay? Use stopEvent=true and try to stop the map events when clicked on the panel? i don't even know if I can do anithing of this. Another option?
PD: I've tried the GeoExt 3 popup but it doesn't fit to my needs.