MapPanel 上的弹出窗口很难手动调整大小答案

【问题标题】：Popup on a MapPanel is difficult to manually resizeMapPanel 上的弹出窗口很难手动调整大小
【发布时间】：2014-07-25 16:26:52
【问题描述】：

我有一个“边框”类型的布局，在“中心”面板中我有一个 MapPanel。我想用下面的代码显示一个无模式的弹出窗口。它工作正常，我可以拖动和调整大小。

但是在调整大小时，如果我用鼠标在弹出区域外（和 MapPanel 区域内）拖动，我就会失去对这个动作的控制（代表弹出边框的虚线消失）。但是，如果我坚持将 MapPanel 区域外的移动拖到“西”或“南”面板，那么我将再次控制此操作（出现虚线）。我认为 MapPanel 将鼠标悬停在其上时会获得鼠标控制。这种行为仍然可以调整弹出窗口的大小，但有点乏味。

如果我在显示弹出窗口时禁用 MapPanel，调整大小效果很好，但这不是我想要的。我想显示一个无模式的弹出窗口。

对任何解决方法有任何想法吗？...

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();

【问题讨论】：

标签： extjs popup geoext

【解决方案1】：

从未使用过 GeoExt。但我已经成功使用了：http://code.betancourt.us/ext-map/ 和 xtype: 'gmpanel'。你可以只使用一个常规的 Ext.window 并做 layout: 'fit', items: {map} 并且它没有这些问题。我认为您可能可以做同样的事情，而不是使用 GeoExt，只需使用 Ext.create('Ext.window.Window', { 并让它弹出一个常规窗口，您可以为其选择布局，然后将 mapPanel 放入项目中。

 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();

【讨论】：

感谢您的回答。不，我刚刚尝试了你有趣的样本，但我仍然有问题。请注意，MapPanel 在弹出窗口后面而不是在弹出窗口中：这就是问题所在。您会在 GeoExt.window.Popup 中看到此背景 MapPanel 参考，因为该弹出类需要此参考。问题在于在他身后拖动 MapPanel 区域上的弹出角：MapPanel 将“窃取”鼠标移动事件，并且只有当鼠标退出他的区域时才会返回。

【解决方案2】：

我假设您将自定义 OpenLayers 地图交给 GeoExt 地图面板，而不是使用默认地图。将 property "fallThrough" of that map 设置为 true，以允许冒泡事件。

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

【讨论】：