Popup on a MapPanel is difficult to manually resize

Question

I have a layout of type 'border' and in the 'center' panel I have a MapPanel. I want to display a modeless popup with the code below. It works fine, I can drag and resize.

But on resizing, if I drag with mouse outside the popup area (and inside MapPanel area) then I loose control of this action (the dotted line representing popup border disappear). But if I insist in dragging moving outside MapPanel area to 'west' or 'south' panel, then I will get again control of this action (dotted lines appear). I think that MapPanel will get mouse control when it is hovering on it. This behavior let resizing popup still possible but a bit tedious.

If I disable MapPanel on showing popup, resize works well, but that's not what I want. I want to display a modeless popup.

Any idea on any workaround?...

var mapPanel = Ext.ComponentQuery.query('viewMapPanel')[0];
Ext.create('GeoExt.window.Popup', {
    map: mapPanel.map,
    title: 'test',

    frame: true,
    border: false,
    resizable: true,        
    draggable: true,
    closable: true,

  height: 400,
  width: 200,

  shadow: true,
  shadowOffset: 20,

  //modal:true


}).show();

Answer 1

Never used GeoExt. But I have used: http://code.betancourt.us/ext-map/ with the xtype: 'gmappanel' with success. You can just use a regular Ext.window and do layout: 'fit', items: {map} and it doesn't have these kinds of issues. I think you could probably do the same thing instead of using GeoExt just use Ext.create('Ext.window.Window', { and have it pop up a regular window you can choose a layout for and then put your mapPanel in items.

 var map = Ext.create('Ext.window.Window', {
        title: 'I love Maps',
        collapsible: true,
        animCollapse: true,
        maximizable: true,
        width: 950,
        height: 600,
        minWidth: 200,
        minHeight: 200,
        layout: 'fit',
        items: [{mapPanel}],
        dockedItems: [{
            xtype: 'toolbar',
            dock: 'bottom',
            ui: 'footer',
            layout: {
                pack: 'center'
            },
            items: [{
                minWidth: 80,
                text: 'Close',
                xtype: 'button'

            }]
        }]
    });
    map.show();

Answer 2

I assume you handed over a custom OpenLayers map to the GeoExt map panel instead of using the default. Set property "fallThrough" of that map to true, to allow bubbling up events.

var map = new OpenLayers.Map({
    fallThrough: true
});